Ajax笔记

最新推荐文章于 2025-08-08 15:43:57 发布

巫巫巫政霖

最新推荐文章于 2025-08-08 15:43:57 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

文章标签： ajax web.xml jquery servlet

本文链接：https://blog.youkuaiyun.com/Doraemon_wu/article/details/43801993

Ajax简介

AJAX即“AsynchronousJavascriptAnd XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

实际应用如下
例如：检测注册的用户名时候已经被注册过
部分更新内容（查看下一页 / 上一页的订单）

Ajax的JQuery实现（推荐使用JQuery）
前端代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>     <!--使用百度的库，使用百度在线库-->
	<script type="text/javascript">
		$(document).ready(function(){       //确保在文档加载完之后才能运行
			$("#name").change(function(){
				$.ajax({     
				    url:"CheckID",       //请求路径   ，例子访问jsp虚拟路径已在web.xml配置好“/CheckID”
				    type:"POST",          //访问类型    GET
				    dataType: "json",       //一般常用json
				    data:{             //POST使用data:  GET:自动转换成url路径参数
				    	name: $("#name").val()    
				    },
				    success:function(s2){    //请求成功时的回调函数，变量为返回的json对象
				      alert(s2.isSet);    //使用json对象
				      if(s2.isSet){
				    	  $("#isSetName").text("用户名已存在！");
				    	  alert("leo");
				      }else{
				    	  alert("false");
				    	  
				      }
				    
				    },
				    error:function(jqXHR){    //请求失败时的回调函数
				    	alert("请求失败");
				    }
				});
			});
		});
		
	</script>
</head>
<body>
<h3 id="t1">请填写注册信息</h3>
<form action="" method="post">
	name: <input type="text" name="name" id="name"/><span id="isSetName"></span><br/>
	password: <input type="password" name="password"/><br/>
	<input type="submit" value="提交注册"/>
</form>
</body>
</html>

后端代码：

public class CheckID extends HttpServlet {
	
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String string = "{\"isSet\":\"true\"}";
		//response.setContentType("application/json");    //最好加上返回文本格式
		response.getWriter().println(string);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request,response);
	}

}

web.xml配置：

<servlet>
    <description></description>
    <display-name>CheckID</display-name>
    <servlet-name>CheckID</servlet-name>
    <servlet-class>com.ajax.CheckID</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>CheckID</servlet-name>
    <url-pattern>/CheckID</url-pattern>
  </servlet-mapping>