8.1.Ajax 的原理及实现步骤

1.什么是AJAX?

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。

 

2.AJAX的工作原理(Ajax 的无刷新功能就是利用 XMLHttpRequest 的异步请求来完成的)

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。实现了客户端与服务器进行数据交流过程。好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。

首先，有客户端事件触发Ajax事件。

然后，创建一个 XMLHttpRequest 对象（由于浏览器不同需要相应判断处理），设置相应的请求信息（通过open来做，例如请求地址等 设置 ）；然后我们绑定 onreadystatechange 事件，在这个事件中我们根据服务器返回状态的不同来做出不同处理，这其中主要是请求成功后接收相应的返回值来通过 js 对客户端做出相应操作（我 们只是使显示有关信息）；发送这个请 求（通过send方法）。 

最后，执行完毕后，把结果返回给客户端。

 

XMLHttpRequest对象

属性

readyState：请求状态，开始请求时值为0直到请求完成这个值增长到4

0：是uninitialized，未初始化。已经创建了XMLHttpRequest对象但是未初始化。

1：是loading，send for request but not called .已经开始准备好要发送了。

2：是loaded, send called,headers and status are available。已经发送，但是还没有收到响应。

3：是interactive，downloading response,but responseText only partial set.正在接受响应，但是还不完整。

4：是completed，finish downloading.接受响应完毕。

responseText：目前为止接收到的响应体,readyState<3此属性为空字符串，=3为当前响应体，=4则为完整响应体

responseXML：服务器端相应，解析为xml并作为Document对象返回

status：服务器端返回的状态码，=200成功，=404表示“Not Found”

statusText：用名称表示的服务器端返回状态，对于“OK”为200，“Not Found”为400

方法 

setRequestHeader()：向一个打开但是未发生的请求设置头信息

open()：初始化请求参数但是不发送

send()：发送Http请求

abort()：取消当前相应

getAllResponseHeaders()：把http相应头作为未解析的字符串返回

getResponseHeader()：返回http相应头的值

 

代码实现 

ajax.js文件代码，也是我们说的主要内容，是一个javascript文件，所有的Ajax操作都在这里：

//与服务器通信

function talktoServer(url) { var req = newXMLHTTPRequst(); var callbackHandler = getReadyStateHandler(req); req.onreadystatechange = callbackHandler; req.open("POST", url, true);

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var testmsg = document.getElementById("testmsg"); var msg_value = testmsg.value; req.send("msg="+msg_value);

}

//创建XMLHTTP对象

function newXMLHTTPRequst() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXobject) { try{ xmlreq=new ActiveXObject("Msxm12.XMLHTTP") } catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } return xmlreq;

}

//服务器回调函数

function getReadyStateHandler(req) { return function() { if (req.readyState == 4) { if (req.status == 200) { var msg_display = document.getElementById("msg_display"); msg_display.innerHTML = req.responseText; } else { var hellomsg = document.getElementById("hellomsg"); hellomsg.innerHTML = "ERROR" + req.status; } } }

}