AJAX

1、简介

AJAX：（Asynchronnous JavaScript And XML）异步的JavaScript与XML。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

下面是Ajax 应用程序所用到的基本技术：

①HTML 用于建立Web 表单并确定应用程序其他部分使用的字段。

②JavaScript 代码是运行Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

③DHTML 或Dynamic HTML，用于动态更新表单。我们将使用div、span 和其他动态HTML 元素来标记HTML。

④文档对象模型DOM 用于（通过JavaScript 代码）处理HTML 结构和（某些情况下）服务器返回的XML。

Ajax不是一种新技术，而是几种蓬勃发展的几种强大技术以新的方式组合而成，Ajax包括：基于XHTML和CSS标准的表示；使用Document Object Model进行动态的显示和交互；使用XML Request与服务器进行异步通讯；使用JavaScript绑定一切。

之前的是用户的请求直接向服务器提交。我们看一个计算的例子。

Ajax的工作原理，Ajax的核心是JavaScript和XMLHttpRequest。该对象在Internet Explorer5中首次引入，它是一种支持异步请求的技术。简单的说：XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性能。下面是使用Ajax完成的功能：1、动态更新购物车的物品总数，无需用户单击Update并等待服务器发送整个页面。2、提升站点的性能，这是通过减少从服务器下载的数据量来实现的。例如：当更新购物车一个物品的数量时，会重新载入整个页面，这必须下载32K的数据，而使用Ajax计算新的总量，服务器只需要返回新的总量值，因此所需要的带宽仅仅为原来的百分之一。3、消除了用户每次输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。

用户的请求不再直接向服务器提交，而是使用XMLHttpRequest异步的向服务器发送，从而避免了重载页面。

特征：

异步发送请求

服务器响应的是数据不是页面内容。

2、XMLHttpRequest/ActiveXObject

XMLHttpRequest对象，现代浏览器均支持XMLHttpRequest对象（IE5 和IE6 使用ActiveXObject）。

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest是整个Ajax技术的灵魂。Ajax异步发送请求，就是使用的XMLHttpRequest对象。

使用Ajax进行异步通信的过程：

创建XMLHttpRequest对象。

通过XMLHttpRequest对象向服务器发送请求。

创建回调函数，见识服务器响应状态，在服务器响应完成后，启动回调函数。

回调函数动态更新HTML页面。

创建XMLHttpRequest对象，所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及Opera）都支持创建XMLHttpRequest对象的语法：

Varxhr=new XMLHttpRequest();

为了应对所有的现代浏览器，包括IE5 和IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：

var xmlHttpRequest;

function createXMLHttpRequest() {

if(window.XMLHttpRequest) {

//火狐谷歌

window.alert("支持XMLHttpRequest");

xmlHttpRequest = new XMLHttpRequest();

}else if (window.ActiveXObject) {

//IE5 IE6

try{

xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");

window.alert("不支持XMLHttpRequest,但是是Msxml2.XMLHTTP");

} catch (e) {

try{

xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

window.alert("不支持XMLHttpRequest,但是是Microsoft.XMLHTTP");

} catch (e) {

}

}

}

}

XMLHttpRequest对象的方法，属性和事件

方法：

1.open(method,url),

open方法的第一个参数指定HTTP方法或动作，这个字符不区分大小写，但是通常大家用大写字母匹配HTTP协议。”GET”和”POST”方法得到广泛的支持。”GET”用于常规请求，它适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应式可缓存时。“POST”

方法常用于HTML表单。它在请求主体中包含额外的数据（表单数据）且这些数据长存储在服务器上的数据库中(副作用)。相同URL的重复POST 请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

2.setRequestHeader(“Content-Type”,” application/x-www-form-urlencoded”)

在使用POST方法的时候需要“Content-Type”头指定请求主体的MIME类型。

3.send()

发起HTTP请求，在使用GET请求的时候这个方法没有参数时候就写上参数null，在使用POST请求的时给这个方法传递参数

属性：

XMLHttpRequest的属性：

onreadystatechange：该属性用于指定XMLHttpRequest对象状态发生改变时的事件处理函数。

XMLHttpRequest的对象有如下几种状态：

0：XMLHttpRequest对象还没有完成初始化。

1：XMLHttpRequest对象开始发送请求。

2：XMLHttpRequest对象的请求发送完成。

3：XMLHttpRequest对象开始读取服务器的响应。

4：XMLHttpRequest对象读取服务器响应结束。

它的这几个状态可以通过下面的readyState属性读取。每当XMLHttpRequest对象的readyState属性改变时，其onreadystatechange 属性指定的方法都会被触发。

readyState：获取XMLHttpRequest对象的处理状态

responseText：获取服务器的响应文本，得到是文本形式。

responseXML：获取服务器响应的XML文档对象，得到的是xml。

status：服务器返回的状态码(数字)，服务器响应完成时，才有状态码。

statusText：服务器返回的状态文本信息，服务器响应完成时，才有状态信息。

服务器的响应完成后，依然不可以直接获取服务器响应。因为服务器响应也有很多的情况。

响应状态码（status）:

1xx：请求收到，继续处理

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

2xx：操作成功收到，分析、接受

200——响应正常

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

3xx：完成此请求必须进一步处理

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化。（资源没有任何修改）

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

4xx：请求包含一个错误语法或不能完成

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——没有权限访问资源

404——资源不存在

405——用户在Request-Line字段定义的方法被禁止

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求

也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下

一级服务器不能满足请求

5xx：服务器执行一个完全有效请求失败

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

status状态码，statusText是状态文本。

服务器常见的状态码：

200：服务器响应正常。

304：该资源在上次请求之后没有任何修改。

404：需要访问的资源不存在。

414：请求的URL太长。

500：服务器内部错误。

statusText是和status相对应的，比如：200->OK,500->Internal Server Error。

两种方法的模板

GET方法示例：

function add(){

//初始化XMLHttpRequest对象

createXMLHttpRequest();

var add1 = document.getElementsByName("add1")[0].value;

var add2 = document.getElementsByName("add2")[0].value;

//打开与服务器的连接

xmlHttpRequest.open("GET","/abc/servlet/ajax?type=add&add1="+add1+"&add2="+add2);

//设置回调函数

xmlHttpRequest.onreadystatechange=handleResult;

xmlHttpRequest.send(null);

}

POST方法示例：

function add(){

//初始化XMLHttpRequest对象

createXMLHttpRequest();

var add1 = document.getElementsByName("add1")[0].value;

var add2 = document.getElementsByName("add2")[0].value;

//打开与服务器的连接

xmlHttpRequest.open("POST","/abc/servlet/ajax");

//设置请求头

xmlHttpRequest.setRequestHeader("Content-Type"," application/x-www-form-urlencoded");

//设置回调函数

xmlHttpRequest.onreadystatechange=handleResult;

xmlHttpRequest.send("type=add&add1="+add1+"&add2="+add2);

}

1）响应普通文本

2）<%@page language="java"import="java.util.*"pageEncoding="UTF-8"%>

3）<%

4）S tring path2 = request.getContextPath();

5）S tring basePath2 = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path2+"/"; 6）%>

7）

8）

9）

10）

11）

12）

13）

14）

15）

16）

17）

18）

19）

22）

23）

24） +

25） =

26）计算

27）

72）

73）

74）ajax.java

75）publicvoid doPost(HttpServletRequest request, HttpServletResponse response)

76）throws ServletException, IOException {

77）

78）PrintWriter out = response.getWriter();

79）String type = request.getParameter("type");

80）if("add".equals(type)){

81）String add1 = request.getParameter("add1");

82）String add2 = request.getParameter("add2");

83）int result = Integer.parseInt(add1) + Integer.parseInt(add2);

84）response.setContentType("text/plain;charset=utf-8");

85）out.println(result);

86）out.flush();

87）}

88）

2）响应XML

add.java

publicvoid doPost(HttpServletRequest request, HttpServletResponseresponse)

throws ServletException, IOException {

response.setContentType("text/xml;charset=UTF-8");

OutputStreamos=response.getOutputStream();

String username=request.getParameter("username");

if("张三".equals(username)){

Document document = DocumentHelper.createDocument();

Element student = document.addElement("student");

student.addElement("name").setText("张三");

student.addElement("age").setText("20");

student.addElement("address").setText("浙江杭州");

student.addElement("email").setText("zhangsan@https://www.360docs.net/doc/ad1575256.html,");

XMLWriter out = new XMLWriter(os);

out.write(document);

out.flush();

out.close();

System.out.println("输出");

}else{

Document document = DocumentHelper.createDocument();

Element student = document.addElement("student");

student.addElement("name").setText("李四");

student.addElement("age").setText("30");

student.addElement("address").setText("浙江杭州");

student.addElement("email").setText("zhangsan@https://www.360docs.net/doc/ad1575256.html,");

XMLWriter out = new XMLWriter(os);

out.write(document);

out.flush();

out.close();

}

}

.jsp

请输入学生的姓名：

3)加法计算

如果使用GET方法GET方法：

使用POST方法：4）三级联动