原生Ajax学习

示例

这里先展示一个比较复杂的应用写法，原理什么的看下面介绍。
注意，本例是学习笔记，学习地址
源码

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;
  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);
            }
        }
    }
}

Ajax

其实原理很简单的。就是调用 XMLHttpRequest 对象来实现前端与后台的数据通信！

第一步：实例化 XMLHttpRequest 对象

var request = new XMLHttpRequest();

第二步：调用 open() 方法

open(Method[数据传输方法: POST | GET ], URL , async[true（异步）| false（同步）] );

request.open("GET", "server.php?number=" + document.getElementById("keyword").value);

第三步：调用 setRequestHeader

这里已经有人把 setRequestHeader 内容很详细的介绍一遍了，这里就不做太多的解释。传送门

request.open("GET", "server.php?number=" + document.getElementById("keyword").value);

第四步：调用 send() 方法

send方法接受一个参数，作为请求主体发送的数据。

注意:如果没有参数，则必须填写 null

request.send(参数|null)

由于send的请求是同步的，请求得到服务器响应之后。响应的数据会自动填充XHR对象的属性

console.log(request.responseText);//响应主体被返回的文本
console.log(request.responseXML);//与 responseText 以字符串返回 HTTP 响应不同，responseXML 以 XML 返回响应。ResponseXML 属性返回 XML 文档对象，可使用 W3C DOM 节点树的方法和属性来检查和解析该对象。

request.status

Ajax status和statusText状态对照表
0：未初始化。尚未调用open()方法。
1：启动。已调用open()方法,但尚未调用send()方法。
2：发生。已调用send()方法，但尚未接收到响应。
3：接受。已经接收到部分响应数据。
4：完成。已经接收到响应数据，并且可以在客户端使用。

console.log(request.status);//响应的HTTP状态
console.log(request.statusText);//HTTP状态的说明

第五步：调用 onreadystatechange 事件处理程序

request.onreadystatechange

    当请求被发送到服务器时，我们需要执行一些基于响应的任务。
    每当 readyState 改变时，就会触发 onreadystatechange 事件。
    readyState 属性存有 XMLHttpRequest 的状态信息。
如下所示：我们通过if语句判断 request.readyState 的响应数据，进行数据处理。

request.onreadystatechange = function () {
  if (request.readyState === 4) {
    console.log(request.readyState);
      if (request.status === 200) {
        document.getElementById("createResult").innerHTML = request.responseText;
      } else {
        alert("发生错误：" + request.status);
    }
  }
}