Ajax的用法

1 Ajax是什么

1.1 Asynchronous JavaScript and XML（异步的javascript和xml）

实质为：使用浏览器内置的一个对象（XmlHttpRequest）向服务器发送请求，服务器返回xml数据或文本数据给浏览器，然后在浏览器端，使用这些数据更新部分页面，在整个过程中，页面无任何刷新。

1.2 传统的等待—响应—等待

在传统的web应用中，比如注册，用户填写整个注册表单后提交，此时浏览器会将整个注册页面抛弃，等待服务器返回一个新的完整的页面。在等待过程中，用户不能够做其他操作。服务器生成新的页面发送给浏览器，浏览器需要重新解析这个页面生成相应的页面。

1.3 图示

① Ajax引擎（即XmlHttpRequest对象），首先为该对象注册一个监听器（该监听器是一个事件处理函数，对状态改变事件（readyStatechange）进行监听）

② 当用户对GUI做了某种操作（将产生对应的事件，如焦点失去事件等）

③ 一旦产生对应的事件，将触发事件处理代码

④ 在执行事件处理代码时，会调用Ajax引擎（XmlHttpRequest对象）

⑤ 发送请求：Ajax引擎被调用后，将独自向服务器发送请求（独立于浏览器之外）

　继续其他操作：在Ajax引擎发送请求的同时，用户在浏览器还可以对GUI继续做其他操作，该请求是异步请求（Ajax引擎发送请求时，没有打断用户的操作）

⑥ 服务器的web组件对请求进行处理

⑦ 服务器可能会调用到数据库或者处理业务逻辑的Java类

⑧ 服务器将处理结果响应给（只返回部分数据，可以是xml或者文本）Ajax引擎

⑨ 监听器通过Ajax引擎获取响应数据（xml或者文本）

⑩ 监听器对GUI中的数据进行更新（局部更新，不是整个页面刷新）

整个过程中大部分是通过JS实现的，响应数据可能是xml，所以Ajax可以看做是多种技术的融合。

2 Ajax编程

第一步获得XmlHttpRequest对象

该对象由浏览器提供，但是该类型并没有标准化。

ie和其他浏览器不同，其他浏览器都支持该类型，而ie不支持。

    function getXmlHttpRequest(){var xhr = null;if((typeof XMLHttpRequest) != 'undefined'){xhr = new XMLHttpRequest();}else{xhr = new ActiceXObject(Microsoft.XMLHttp);}return xhr;}

第二步使用XmlHttpRequest向服务器发请求

a. 发送get请求

function change(v1) {var xhr = getXmlHttpRequest();/*open(请求方式，请求地址，同步/异步)请求方式：get/post请求地址：如果是get请求，请求参数添加到地址之后比如 get_comments.do?name=QQ同步/异步：true表示异步*/xhr.open("get", encodeURI("get_comments.do?name=" + v1), true);/*注册一个监听器（即当xhr的状态发生改变产生了readystatechange事件，该事件会由一个函数f1来进行处理，这个函数里需要获得服务器返回的数据，然后更新页面）*/xhr.onreadystatechange = f1;/*只有调用send方法之后，请求才会真正发送*/xhr.send(null);}

b. 发送post请求

function change2(v1){var xhr = getXmlHttpRequest();xhr.open("post","get_comments.do",true);//必须添加一个消息头 content-typexhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.onreadystatechange = f1;xhr.send("name=" + v1);}

第三步在服务器端处理请求

第四步在监听器当中，处理服务器返回的响应

    xhr.onreadystatechange = f1;function f1(){if(xhr.readyState == 4){var txt = xhr.responseText;document.getElementById("d1").innerHTML = txt;}}

或者

    xhr.onreadystatechange =function(){//编写相应的处理代码if(xhr.readyState == 4){//只有readyState等于4，xhr才完整地接收到了服务器返回的数据//获得文本数据var txt = xhr.responseText;//获得一个xml dom 对象var xml = xhr.responseXML;//dom操作 更新页面document.getElementById("d1").innerHTML = txt;}}