ajax的xmlHttpRequest请求

1，ajax原理

Ajax的原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

2，原生ajax的四个过程/手写原生ajax

a:new一个XHR对象
b:调用open方法
c:send一些数据
d:对过程进行监听，来知道服务器是不是正确地做出了响应，接着可以做一些事情

// GET请求：document.getElementById("search").onclick = function() {     var request = new XMLHttpRequest();    request.open("GET", "server.php?number=" + document.getElementById("keyword").value);    request.send();    request.onreadystatechange = function() {        if (request.readyState===4) {            if (request.status===200) {                 document.getElementById("searchResult").innerHTML = request.responseText;            } else {                alert("发生错误：" + request.status);            }        }     }}// POST请求document.getElementById("save").onclick = function() {     var request = new XMLHttpRequest();    request.open("POST", "server.php");    var data = "name=" + document.getElementById("staffName").value                       + "&number=" + document.getElementById("staffNumber").value                       + "&sex=" + document.getElementById("staffSex").value                       + "&job=" + document.getElementById("staffJob").value;

//post请求必须加上请求表头，而且发送的数据都放在send（）中发送    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");    request.send(data);    request.onreadystatechange = function() {        if (request.readyState===4) {            if (request.status===200) {                 document.getElementById("createResult").innerHTML = request.responseText;            } else {                alert("发生错误：" + request.status);            }        }     }}

通过哪个属性得到data？

responseText和responseXML。后者是XML解析了的。

XMLHttpRequest 对象的三个重要的属性

属性描述onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

处理文本响应

responseText和responseXML；

通过XMLHttpRequest对象的getResponseHeader方法获取响应的内容类型，

若为text/plan或text/html,则通过responseTest获取响应文本；

若为text.xml，则通过responseXML获取响应文本。

作者：_Yfling
链接：http://www.jianshu.com/p/05de7c1ef080
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。