Ajax

1、概念

Ajax 是对 Asynchronous Javascript + XML 的简写，通过这一技术能够向服务器请求额外的数据而无需卸载页面，即无刷新页面进行数据更新，

从而给用户带来更好地用户体验。

2、XMLHttpRequest

Ajax 的核心就是 XMLHttpRequest。

var xhr = null;
  //不同的浏览器获取XHR 对象
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()
  }else if(window.ActiveXObject){
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }

  /*
    xhr对象的readyState属性改变，触发
    0：为初始化。即尚未调用open() 方法
    1：启动。已经调用open() 方法，但为调用send()方法
    2：发送。已经调用send()方法，但为接收到响应
    3：接收。已经接收到部分响应数据。
    4：完成。已经接收到全部响应数据，而且已经在客户端使用。

  */
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        /*
         收到响应之后，响应的数据会自动填充到XHR对象中，相关属性：
         responseText：作为响应主体被返回的文本
         responseXml：如果响应的内容是 XML 类型，则保存相应的文档
         status：响应的HTTP状态的说明
         statusText：HTTP 状态码的说明
        */
        alert(xhr.responseText);
      }else{
        alert('Request was unsuccessfun: ' + xhr.status);
      }
    }
  };

  /*
    参数1：要发送的请求类型
    参数2：请求的URL
    参数3: 表示是否异步发送请求的布尔值
   */
  xhr.open('get','example.txt',false);
  /*
    参数：即要作为请求主题发送的数据，如果不需要通过请求主体发送数据，则必须传入null。
    这个方法调用之后，请求就会派送到服务器。
   */
  xhr.send(null);

可以通过xhr.setRequestHeader() 方法设置头部信息。

3、XHR 请求方式 之 表单提交

POST 请求方式，需要设置一个请求头。

 var xhr = null;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()
  }else if(window.ActiveXObject){
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
      }else{
        alert('Request was unsuccessfun: ' + xhr.status);
      }
    }
  };

  xhr.open('get','postexample.php',true);
  xhr.setRequestHeader('Content-Type','application/x-wwww-form-urlencoded');
  var form = document.getElementById('user-form');
  xhr.send('序列化表单的参数。。。');

4、FormData 对象

  /*
    FormData 为序列化表单以及创建与表单格式相同的数据提供了遍历
   */
  //预先填入表单的键值对作为初始化
  var formdata = new FormData(document.forms[0]);
  formdata.append('name','zhangsan');
  xhr.send(formdata);

5、超时设定

/*
    overrideMimeType()方法，用于重写XHR 响应的MIME类型。
    因为返回响应的MIME类型决定了XHR对象如何处理它，它以提供一种方法能够重写服务器返回的MIME类型是很有用的。
    比如，服务器返回的MIME类型是text/plain，但数据中实际包含的是XML。根据MIME类型，即使数据是XML，
    responseXML 属性中仍然是null。通过调用overrideMimeType() 方法，可以保证把响应当做XML 而非纯文本来处理。
   */
  
  xhr.overrideMimeType('text/xml');

6、进度事件

/*
    针对XHR对象的6个进度事件
    loadstart：在接收到响应数据的第一个字节时触发
    progress：在接收响应期间持续不断的触发
    error：在请求发生错误时触发
    abort：在因为调用abort() 方法而终止链接时触发
    load：在接收到完整的响应数据时触发
    loadend：在通信完成或者触发 error，abort，或者 load 事件后触发

    每个请求都从触发loadstart事件开始，接下来是一或多个process事件，然后触发error、abort或load事件中的一个，
    最后以触发loadend 事件结束。
   */
  
  /*
    onprogress : 接收到一个event对象，其target属性是XHR 对象，但包含着单个额外的属性：
                  lengthComputable: 表示进度信息是否可用的布尔值
                  position: 表示已经接收到的字节数
                  totalSize: 表示根据 Content-Length 响应头部确定的预期字节数
   */
  xhr.onprogress = function(event){
    var divStatus = document.getElementById('status');
    if(event.lengthComputable){
      divStatus.innerHTML = 'Received ' + event.position + ' of ' + event.totalSize + ' bytes';
    }
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!