前端知识点回顾之重点篇——AJAX

Ajax(Asynchronous JavaScript and XML)

这种技术就是无须刷新页面即可从服务器中取得数据，但不一定是XML数据。在原生方法上，Ajax技术的核心是XMLHttpRequest对象（简称XHR）。

---

XHR用法

• open(method, url, isAsync)

  开启一个method类型的请求，url是相对于当前页面（也可以是绝对路径），open方法并不会真正发送请求，而只是启动一个请求已备发送。

• send(data)

  接收作为请求主体发送的数据，如果不需要必须传入null，因为这个参数对有些浏览器是必要的。调用send后请求就会被分派到服务器。

• XHR的属性

  在发送请求收到响应后，响应的数据会自动填充XHR对象的属性：

  • responseText：作为响应主体被返回的文本

  • responseXML：如果响应的内容类型是”text/xml“或”application/xml“，这个属性中将保存包含着相应数据的XML DOM文档。

  • status：响应的HTTP状态

  • statusText：HTTP状态的说明

  • readyState：表示请求/响应过程中的当前活动阶段，只要这个值发生变化都会触发一次readystatechange事件，因此可以利用这个事件监听异步请求后的响应结果是否可用。（=0表示尚未调用open；=1表示已调用open但没调用send；=2表示已调用send但未收到响应；=3表示已接收到部分数据；=4收到全部响应并且数据可用）

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){  //在open前指定并用DOM0级保证浏览器兼容
        if(xhr.readyState == 4){
            if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
                console.log(xhr.responseText);
                console.log(xhr.response);
            }else{
                alert('request was unsuccessful:' + xhr.status);
            }
        }
    }
    xhr.open("GET", "http://127.0.0.1:3011", true);
    xhr.send(null);
    

  • abort：取消异步请求，会停止触发事件，不再允许访问任何与响应有关的对象属性（若访问可能会出错，最好将访问的语句放在try...catch语句中），并在终止请求后对XHR对象进行解引用操作。

HTTP头部信息

• setRequestHeader(name, value) 自定义请求头部信息，在open之后send之前调用。
• getResponseHeader(name) 取得相应的响应头部信息
• getAllResponseHeaders() 取得一个包含所有头部信息的长字符串

GET请求

常用于向服务器查询某些信息，将查询的字符串追加到URL末尾以便将查询条件发给服务器（？name1=value1&name2=value2...）。

特别注意查询信息中的name和value值都必须使用encodeURIComponent()进行编码才能放到URL的末尾。

发送信息有限，因为URL有长度限制。

POST请求

常用于向服务器发送应该被保存的数据，POST请求主体可以包含非常多的数据，而且格式不限。

通过设置Content-Type头部信息表明发送的数据类型，规定数据的编码方式。

• application/x-www-form-urlencoded;charset=utf-8

  表单形式的内容类型，body中的数据会以key=values的形式进行序列化，而这个编码的过程中，一些特殊符号会通过URL转码转成如4%D3%3F。。。等形式

• application/json;charset=utf-8

  请求体里面显示的内容是一个标准的json串，而不会像经过URL转码后的数据那样

发送同样的数据，GET请求比POST快（GET有缓存，POST在真正接受数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据）。

---

XMLHttpRequest2级

对XHR的进一步发展

FormData

序列化表单对象，使用FormData的方便之处体现在不比明确在XHR对象上设置请求头，XHR对象能够识别传入的数据类型是FormData的实例并配置适当的头部信息。

let data1 = new FormData(document.form[0]);  //接收表单元素，预先填入键值对

let data = new FormData();
data.append('name', 'simple')  //用append方法添加键值对

timeout

xhr对象的timeout属性表示请求在等待响应多少毫秒后终止，并触发ontimeout事件。设置为0表示不设置超时。

xhr.timeout = 1000; //1s
xhr.ontimeout = function(){
    alert("Request did not return in a second.");
}

overrideMimeType（‘dataType’）

用于重写从服务器返回的响应MIME的类型

进度

• xhr.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.";
      }
  }
  

• xhr.upload.onprogress 监听POST请求体上传进度

  • event.loaded 已经发送的字节数
  • event.total 数据体总的字节数

---

其他类型的HTTP请求

• HEAD 获取资源的头部
  和GET方法一样，只是不返回报文主体部分。资源网站 -> 资源服务器里面（查看是否有重复的资源/更新日期，是否存在请求的资源/URI有效性）
• CONNECT 隧道通讯
  客户端 -> 服务端之间的数据通讯会建立一个通道进行传输,也就是加密 (SSL)
  https 其实就是披SSL外皮的http
• PUT 发送文件
  类似FTP 的文件上传,不带验证机制因此存在安全性问题, REST架构设计才有可能使用
• DELECT 删除文件，PUT相反的方法，同样不带验证机制存在安全隐患问题。
• OPTIONS 询问请求,服务返回支持的请求类型 (GET,POST,HEAD)