详解原生 ajax 过程

·  阅读 4496
详解原生 ajax 过程
原文链接: www.w3ctrain.com
//创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//监听statechange事件
xhr.onreadystatechange = function() {
  /**
   * XMLHttpRequest的readystate有五个状态
   * 0 还没有调用open方法
   * 1 已调用open方法,尚未调用send方法
   * 2 已调用send,但尚未接收到响应
   * 3 已接收到部分响应数据
   * 4 已经接收到到全部数据,而且可以在客户端使用
   */
  if (xhr.readystate == 4) {
    //状态码在200 到 300表示请求成功,状态码304表示资源没有被修改,可以直接使用缓存中的版本
    if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)) {
      alert(xhr.responseText);
    } else {
      //发生错误打印状态码,
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
}
//打开请求以备发送
xhr.open('post', 'http://example.com', false);
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//序列化表单
var form = document.getElementById('test-form');
//发送请求
xhr.send(serialize(form));

步骤

  • 创建XMLHttpRequest对象(这里需要兼容,IE7之前的是ActiveXObject对象)
  • 设置回调函数
  • open()
  • 设置请求的头部
  • send()
  • 更新页面显示

注:设置请求头必须在open和send之间,而回调函数通常会在send之前。

注意

如果你监听的是load事件,那么你必须要检查status属性,才能确定数据是否真的可用。因为只要浏览器接收到服务器的响应,不管状态如何,都会触发load事件。

待完善~

如需转载,请注明出处: w3ctrain.com/2015/10/08/… ,欢迎加入前端Q群( 467969149 )

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改