原生 Ajax

Ajax

Asynchronous JavaScript and xml ，叫做异步的 JavaScript 和 xml ，也叫做页面局部刷新技术。为什么需要呢？因为有时候我们只需要更新网页的部分数据，比如查看文本的下一页的功能，只需要更新局部的内容即可，不需要让整个页面刷新或者重新重定向。

Ajax 使用 XMLHttpRequest 这个对象发送一步请求和响应出来。在 IE5 中是以 ActiveX 组件的形式存在。

如果要使用 XMLHttpRequest 对象，必须通过 JavaScript 完成但是由于浏览器的内核不同，所以创建 XMLHttpRequest 对象的方式也不同。

请求使用步骤

1. 创建 XMLHttpRequest 对象

   var xmlhttp = new XMLHttpRequest();
   

2. 调用 XMLHttpRequest 对象的 open 函数，创建提交路径，提交路径为一个 Servlet 的 URL 映射地址。

   var contextPath = "${pageContext.request.contextPath}";
   xmlhttp.open("post",contextPath + "/AjaxServletDemo01");
   

3. 为 XMLHttpRequest 对象设置状态改变实践（设置回调函数）

   xmlhttp.onreadystatechange = checkBack;
   function checkBack(){
   	if (xmlhttp.readyState == 4){
   		var content = xmlhttp.responseText;//接受 Servlet 响应的内容
   		//... 剩下可以处理的 content
   	}
   }
   

4. 调用 XMLHttpRequest 对象的 send 函数进行提交

   xmlhttp.send(null);
   

5. 获取 Servlet 响应结果

   这里的响应结果，体现在回调函数中，其中对于响应的状态有四种：

   • xmlhttp.readyState == 1 时，表示 Ajax核心对象已经设置了提交的路径

   • xmlhttp.readyState == 2 时，表示 Ajax核心对象已经提交到 Servlet 了

   • xmlhttp.readyState == 3 时，表示 Servlet 以及响应了内容

   • xmlhttp.readyState == 4 时，表示 Servlet 响应信息结束。

6. 服务器的响应方式

   这里举例 AjaxServletDemo01 的主要代码如下：

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   		response.setContentType("text/html;charset=utf-8");
   		response.setCharacterEncoding("utf-8");
   		PrintWriter out = response.getWriter();
   				request.setCharacterEncoding("utf-8");
   //向页面响应内容，页面响应的内容会被 Ajax的核心对象获悉
   		out.print("我是内容");
   }
   

   通过 response 获得的 out 对象来向客户端输出回应内容。

​