Ajax学习总结（一）_H5之家 - 中国HTML5教程资源分享第一站

1，Ajax简介

　　传统web交互模型是通过浏览器直接将请求发送给web服务器，web服务器收到请求并对请求处理后，将处理结果以回送响应的方式直接发给浏览器。在这种交互模式下，请求和响应的整个过程中，不可避免地会出现时延，因为，用户在发出一条请求后必须等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面，之后才能再次发出下一条请求。因此，这种交互给用户带来的体验是非常差的，为了改善用户体验，Ajax应运而生。

　　Ajax，即异步的JavaScript和XML（Asynchronous JavaScript and XML）。Ajax通过在浏览器端引入ajax引擎对用户请求进行预处理后发送给web服务器，同时，ajax引擎还负责接收服务器响应并对响应进行相关处理再回送给浏览器，ajax引擎通过异步的方式允许用户在收到响应之前不断地发送多条请求。Ajax正是通过这种类似于缓冲器的设置，让用户产生请求——响应无延时的体验，从技术角度来说，它并非一种新的技术，而仅仅是几种原有技术的组合，Ajax通过对这些技术的组合有效地实现了web页面与web服务器的动态交互，从而很好地改善了用户体验。这些技术主要包括：

1，CSS和XHTML，用于页面布局和样式设置

2，DOM模型，用于实现各种交互和动态显示。

3，XMLHttpRequest，用于与服务器进行异步通信。

4，javascript来绑定和调用相关函数，实现服务器响应向浏览器的回送。

　　简单来说，Ajax是通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获取数据，然后利用javascript来操作DOM，从而实现浏览器端页面更新。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。

2，XMLHttpRequest对象及其属性

　　XMLHttpRequest本质上是一个javascript对象，该对象是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，通过操纵XMLHttpRequest对象的属性和方法。javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。从而实现多次请求而页面无刷新的效果。

下面简要介绍一下XMLHttpRequest的相关属性和方法：

XMLHttpRequest的相关属性：

　　　　 onreadystatechange状态改变时所触发事件的处理程序

　　　　responseText用于指定以文本形式返回服务器响应信息。

　　　　responseXML 用于指定以DOM兼容的文档形式返回服务器响应信息

status 用于指定服务响应的http状态码，如404、500、200等。

　　　　status Text 用于指定http状态码说明信息。

　　 readyState 用于设置XMLHttpRequest对象状态值，共包含下列5个状态值：

　　　　　　0 (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）

　　　　　　1 (初始化)对象已建立，尚未调用send方法

　　　　 2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　 3 (数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseXML和responseText获取部分数据会出现错误，

　　　　 4 (完成)数据接收完毕,此时可以通过responseXml和responseText获取完整的响应数据。

XMLHttpRequest的主要方法：

　　　　open(参数列表); 用于启动ajax引擎，并通过参数设置请求类型和URL地址及其他请求参数

　　　　send(参数列表); ajax引擎通过调用XMLHttpRequest对象的send方法向服务器发送http请求。

3，Ajax技术开发步骤：

　　完成一个ajax应用程序的开发通常需要实现以下5个步骤：

　　　　1.得到XMLHttpRequest对象.(js对象)

　　　　2.注册回调函数

　　　　3.调用open函数，该函数只是用于设置请求方式以及url,它不发送请求.

　　　　4.调用send函数发送请求，

　　　　5.在回调函数中处理数据。

　　下面通过一个简单的例子来演示一下ajax步骤的具体实现：

　　1，创建jsp页面，如图，在/webroot目录下创建一个名为ajax.jsp（文件名任取）的jsp页面。代码如下：

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2
3
4
5
40
41
42
43

　　2，创建处理请求的Servlet程序，代码如下：

1 package com.swu.ajax;
2
3 import java.io.IOException;
4 import java.io.PrintWriter;
5 import javax.servlet.ServletException;
6 import javax.servlet.http.HttpServlet;
7 import javax.servlet.http.HttpServletRequest;
8 import javax.servlet.http.HttpServletResponse;
9
10 public class Ajax1Servlet extends HttpServlet {
11
12 public void doGet(HttpServletRequest request, HttpServletResponse response)
13 throws ServletException, IOException {
14 //接收请求参数
15 String name = request.getParameter("name");
16 //响应浏览器请求，
17 PrintWriter out = response.getWriter();
18 out.write("Hello " + name);
19 out.flush();
20 out.close();
21
22 //测试服务器是否收到浏览器端发送的请求。
23 System.out.println(name);
24 }
25
26 public void doPost(HttpServletRequest request, HttpServletResponse response)
27 throws ServletException, IOException {
28 this.doGet(request, response);
29 }
30 }

　　3，配置Servlet，在web.xml中配置servlet映射

1 <?xml version="1.0" encoding="UTF-8"?>
2
7