AJAX-XMLHttpRequest

时间  2019-11-13
标签 ajax xmlhttprequest 栏目 Ajax 繁體版
原文   原文链接

一. AJAX是什么？

AJAX是js脚本向服务器发起http通讯的统称。html

总的来讲，ajax就是js经过XMLHttpRequest建立实例，发起请求，接受请求，更新页数据的过程。ajax

二.XMLHttpRequest

1.什么是XMLHttpRequest?

XMLHttpRequest是一个位于Window对象上的一个原生的构造函数。json

它是ajax通讯的主要接口，用于浏览器和服务器之间通讯。跨域

经过它生成的实例对象，能够用于发起http请求：数组

const xhr = new XMLHttpRequest();

因为位于Window对象，因此实例化的xhr对象其实就是一个浏览器内置的对象。浏览器

它提供了对http协议的彻底的访问，用于JS进行http请求和http响应。安全

2.兼容性

几乎全部的主流浏览器都支持，IE须要经过下面的办法兼容服务器

 new ActiveXObject("Microsoft.XMLHTTP")

3.发展历史

XMLHttpRequest有两个阶段，一个是Level1,一个是Leve2cookie

level1的缺点：网络

  • 受同源策略（Same Origin Policy）影响, 不能发送跨域请求
  • 不能发送二进制（音频，视频，图片等）文件，只能发送文本
  • 发送和接收数据时，没有实时进度信息，只能判断是否完成

level2解决了以上缺点，并添加了新功能：

  • 只要服务器容许，能够进行跨域访问
  • 能够发送和获取二进制数据（音频，视频，图片等都是二进制文件）
  • 能够获取请求发送数据的实时进度信息
  • 新增FormData数据，能够发送表单数据（multipart/formdata）
  • 能够设置过期时间timeout

4.只读属性

1.readyState --HTTP 请求的状态.

从对象实例化为0开始到结束为4，依次递增。

状态 名称 描述
0 UNSENT 初始化。new了实例或者已经被abort()方法重置
1 OPENED 调用了open方法，可是还未调用send方法。请求还未发送。
2 HEADERS_RECEIVED send发送成功。而且接收到服务器返回的请求头和状态码
3 LOADING 响应头已经接收。响应体开始接收，未完成。
4 DONE 响应接收完成。

 

 

 

 

 

 

每次状态改变都会触发onreadystatechange事件。

 LOADING状态可能会触发屡次，由于每接收一个数据包就会触发一次。

2.status--http请求响应中～的状态码

进入响应前和响应失败都是0；响应中若是未特殊指定，都为200。

let xhr = null;
if (window.XMLHttpRequest) {// code for Firefox, Chrome, etc.
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log('UNSENT-->',xhr.readyState,'-->', xhr.status,'-->',xhr.statusText);
if (xhr != null) {
    let data = null
    xhr.open('GET','./1.jpeg', true);
    console.log('OPENED-->',xhr.readyState,'-->', xhr.status,'-->',xhr.statusText);
    xhr.send(data);    
}
xhr.onreadystatechange = function() { // 只有在readyState >=3 的时候，才能获取正确的结果。
    console.log('状态变化-->',xhr.readyState,'-->',xhr.status,'-->',xhr.statusText)
}
xhr.onprogress = function () {
    console.log('LOADING',xhr.readyState,'-->', xhr.status,'-->',xhr.statusText);
};
xhr.onload = function () {
    console.log('DONE',xhr.readyState,'-->', xhr.status,'-->',xhr.statusText);
};
// 运行结果以下：
/*
UNSENT-->0 -->0 -->""
OPEND-->1-->0-->""
状态变化-->1->0-->""
状态变化-->2-->200-->"OK" //headers_received
状态变化-->3-->200-->"OK" //loading
LOADING-->3-->200-->"OK" 
LOADING-->4-->200-->"OK"
状态变化-->4-->200-->"OK" //done
DONE-->4-->200-->"OK"
*/

3. statusText -- http响应中～的状态名称

例如：xhr.statusText --- OK

4. response--返回响应

若是responseType的类型是""或者"text",那么LOADING状态时，会接收到传递的部分数据。

5. responseText

从服务器返回的字符串；当readyState为4时，取到完整的字符串。为3时，可能返回部分数据。

6. responseXML

从服务器返回的XML/HTML文档；要求返回的Content-Type: text/xml 或者application/xml。

该属性生效的前提是：

xhr.responseType = "document";

若是仍不符合要求：

xhr.overrideMimeType('text/xml');

7.responseURL

返回实际返回数据（跳转则为跳转后的网址）的服务器的地址；若是有锚点（fragment），会自动剥离锚点。

5.可写属性

1.responseType --- 指定服务器应该返回的数据类型

  • "": 默认。 返回字符串，等同于"text"类型。
  • "text": 返回字符串。
  • "arraybuffer": 返回ArrayBuffer类型的数据（二进制数组）。
  • "blob": 返回Blob数据，二进制对象，如图片。
  • "document": 返回Document对象，文档对象，XML或者HTML文档。
  • "json": 返回JSON对象。
xhr.responseType = 'json';
// 若是设置为json，浏览器会自动调用JSON.parse()方法；
// 即经过xhr.response返回的是一个JSON对象

若是responstType指定的数据，服务器没法返回，能够经过xhr.overrideMimeType()来

覆盖服务器返回的数据类型。客户端根据该方法的参数解析

// 该方法必须在send()方法以前调用
xhr.overrideMimeType('text/plain');

2.timeout--设置请求超时时间

默认0，表示不设置请求超时。

其余数值，单位为ms, 规定时间后触发ontimeout事件。

3.withCredentials--携带验证信息

默认false; 该属性只跨域请求时须要设置。

同域请求时，浏览器会自动将cookie添加到请求头中，可是跨域请求不会。

由于CORS规定，跨域时，不容许携带任何认证信息，除非withCredentials=true;

首先，为了可以跨域，服务器端须要设置

Access-Control-Allow-Origin: *// 或者具体的域名

若是请求须要认证信息，浏览器端须要设置：

xhr.withCredentials = true

服务器端须要设置

Access-Control-Allow-Origin: //具体的origin,必定不能设置成*
Access-Control-Allow-Credentials: true

6.方法

1.open(method, url [, async, username, password])方法

初始化请求参数

method: 请求方式主要有GET、POST、PUT、DELETE，也能够是HEAD(请求资源的头部信息,和GET返回的头部同样)---CORS安全

url: 请求路由

async: 默认true，异步请求。为false时，同步, 已被废弃deprecated。

基本都用异步请求。同步请求几乎不用，一是由于会出现阻塞，网页挂起的状况；二是不能使用timeout,不能进行跨域，也没有进度信息。

const xhr = new XMLHttpRequest();
xhr.open("POST", url, true); // 异步
xhr.send();
// readyState === 1 异步请求send当即返回

const xhr = new XMLHttpRequest();
xhr.open("POST", url, false); // 同步
xhr.send();
// readyState === 4 同步等全部的进程结束再返回

username,password: 认证权限

2. setRequestHeader(name, value)

只能在open和send之间调用。既能够设置系统默认的一些头部信息（如ContentType），也能够设置自定义的头部信息(‘X-USER’)。

一旦设置，就没法撤销。设置一样的name，也是append,而不会覆盖。

var client = new XMLHttpRequest();
client.open('GET', 'demo.cgi');
client.setRequestHeader('X-Test', 'one'); // 自定义请求头
client.setRequestHeader('X-Test', 'two');  // 自定义请求头
client.send();
// X-TEST: one, two

name: 请求头的名称。忽略大小写。

有些请求头只能由浏览器控制，用户不能操做。不然  Refused to set unsafe header "..."

`Accept-Charset` `Accept-Encoding`
`Access-Control-Request-Headers` `Access-Control-Request-Method`
`Connection`
`Content-Length` `Cookie` `Cookie2` `Date`
`DNT`
`Expect`
`Host` `Keep-Alive` `Origin` `Referer`
`TE`
`Trailer`
`Transfer-Encoding`
`Upgrade`
`Via`

用户能够操做的请求头有：

Accept: 经过设置Accept通知服务器客户端能够接受的数据类型。

Content-Type: 设置发送的数据类型,即send(body)中请求体的类型。如下所有为POST请求

      GET方法设置这些请求头无效

  • "multipart/formdata; boundry=something": 当传递FormData类型时，默认是该类型。

      // 示例： multipart/form-data; boundary=----WebKitFormBoundary2OgAPgMEOp8S1XFR

      至关于表单设置了enctype属性，<form enctype="multipart/form-data"></form> 

      若是是GET方法，enctype的值被忽略

 

...
data = new FormData();
data.append('name', 'lyra'); // append方法的第一个参数是控件名；第二个参数是值
data.append('age',18);
xhr.send(data); 
// 还能够从网页中获取表单的值
<form id="form">
   <input type='text' name="age" value="" /><!--必须有name，用于做为参数名-->
</form>
const formData = document.querySelector('#form'); // formData是整个form表单对应的元素
data = new FormData(formData);
data.append('name','lyra');
xhr.send(data);
// 还能够上传文件等二进制文件
<body>
    <button onclick="loadJSONDoc()">Get JSON</button>
    <form id="form">
        <label for="image">上传图片</label>
        <input id="file" type='file' name="image" accept="image/png,image/jpeg" multiple />
    </form>
    <script>
        var xhr;
        function loadJSONDoc() {
            xhr = null;
            if (window.XMLHttpRequest) {// code for Firefox, Chrome, etc.
                xhr = new XMLHttpRequest();
                console.log(xhr.readyState); // 0
            } else if (window.ActiveXObject) {// code for IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.onreadystatechange = function() {
                // 0,1,2,3,4
                console.log(xhr.readyState)
            }
            if (xhr != null) {
                let data = null;
                const fileDOM = document.querySelector('input');
                const formData = new FormData();
                const files = fileDOM.files; // 元素的files属性获取文件列表
                for(let file of files) {
                    formData.append("image", file, file.name); // 第一个参数是控件名称；第三个参数是文件名
                }
                data = formData;
                xhr.open("POST", '/postdata', true); // 1
                xhr.send(data);               
            }
        }
    </script>
</body>
  • "application/x-www-form-urlencoded;charset=UTF-8"

     // 表单POST默认提交方式 

     示例：  id=1&username=lyra

const xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true); // 表单提交必须是POST
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')；
// 若是不设置请求头，则默认为text/plain;charset=UTF-8,数据看成字符串传递
const data = 'id=1&username=lyra';
xhr.send(data);
  • "text/html;charset=UTF-8":  当传递的数据为document类型时，默认是该类型。
data = document;
xhr.send(data);
  • "text/plain; charset=UTF-8": 当传递的数据是对象，数字，字符串，布尔值时，默认都是该类型。

    ⚠️//单独的传"name=lyra"属于字符串，不是URLSearchParams对象。

data = {a: 1};
//data = "22";
//data = 22;
//data = true
xhr.send(data);
  • "application/json; charset=UTF-8": 浏览器不会默认该类型，须要手动添加。

     传参数据须要JSON.stringify()处理。

data = JSON.stringify({a: 0});
xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8');
xhr.send(data);

  • "image/jpeg"或者"image/png"： 用于FileAPI上传图片

const xhr = new XMLRequestHeader();
xhr.open('POST', '/', true);

const fileDOM = document.querySelector('inputFile');
const file= fileDOM.files[0];

xhr.setRequestHeader('Content-Type', file.type); //能够省略，系统自动添加
xhr.send(file);

3.send([body])

发送http请求。

若是是GET方法，没有请求体body或者传null。

POST方法须要传请求体body。

4.getAllResponseHeaders()

获取除了Set-Cookie和Set-Cookie2以外的全部响应头信息。

若是无响应，返回null; 若是网络错误，返回""

而且每一个头信息单独占一行。例如：

Cache-Control: max-age=31536000
Content-Length: 4260
Content-Type: image/png
Date: Sat, 08 Sep 2012 16:53:16 GMT

如上所示，返回的响应头信息，每一行都是以回车+换行（'\r\n'）分割，而且该规则全部操做系统都同样。

name和value之间以冒号+空格隔开": " ,是一个固定的规范。

因此想要获取一个name，value是对象的形式，能够以下操做：

xhr.onreadystatechange = function() { // 只有在readyState >=3 的时候，才能获取正确的结果。
    if (xhr.readyState ===3 || xhr.readyState === 4) {
        const allHeaders = xhr.getAllResponseHeaders();
        // 注意须要清空两头的"\r\n",不然会多出"":undefined
        const resultObj = allHeaders.trim().split("\r\n").reduce((memo, next) => {
            let [name, value] = next.split(": ");
            if (memo[name]) { // 若是请求头重复
                memo[name] = `${memo[name]}; ${value}`;
            } else {
                memo[name] = value;
            }   
            return memo         
        }, {}) 
        console.log(resultObj);
    }
}

5.getResponseHeader(name)

获取特定名称的响应头信息，除了Set-Cookie和Set-Cookie2

若是有多个结果，会返回一个值，经过空格+逗号隔开。

xhr.getResponseHeader('Content-Type');

6.abort() 

终止请求。xhr.abort(); 

调用后，readyState的值变为4； status为0

7. XHR相关事件

除了onprogress事件，其余的均没有参数;

全部的监听函数都应该在xhr.send()方法以前定义。

也能够经过addEventListen('事件名', fn, false)进行监听事件的调用。

1.onreadystatechange

当readyState状态改变时触发；但重置时，即变为0，不触发。

2. onloadstart

当掉用send()方法时，触发该事件；

3. onprogress

监听函数有个事件对象的参数，该对象有三个属性；

xhr.onprogress = function(event) {
  // event对象有三个参数event.loaded/event.total/event.lengthComputable
}

loaded: 已经传输的数据

total: 总的数据量

lengthComputable:  布尔值; 进度是否能够计算

4.onload

请求成功的监听函数；

5. onloadend

请求结束（成功或者失败）触发；readystate === 4

load,error,abort事件都会随后触发loadend事件；

6.onabort

请求中断；调用xhr.abort()触发; 

7.onerror

请求失败触发；网络问题或者请求路由有误。

8.ontimeout

从onloadstart开始，超过设置的timeout时间触发；timeout不为0。

8.xhr的上传对象

xhr上有个upload属性，能够用来描述文件上传的状态。

它有除了onreadystatechange以外，xhr有的其余7个事件。

xhr.upload.onloadstart
xhr.upload.onload
xhr.upload.onerror
xhr.upload.onloadend
xhr.upload.onprogress
xhr.upload.ontimeout
xhr.upload.onabort

经过upload的监听事件，查看当前文件上传的进度

示例：

<body>
  <!--
    progress标签是H5标签；闭合标签不能省略;
    value表示进度；max表示最大值;min表示最小值
  -->
  <progress value="0" min="0" max="100"></progress>
  <script>  
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/server', true);

    const progressBar = document.querySelector('progress');
    xhr.upload.onprogress = function(e) {
      if(e.lengthComputable) {
        const { loaded, total } = e;
        console.log(loaded, total);
        progressBar.value = (loaded/total)*100;
        // 兼容不支持 <progress> 元素的老式浏览器
        progressBar.textContent = progressBar.value;
      }
    }
    xhr.send(new Blob(['hello world']), {type: 'text/plain'});
  </script> 
</body>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程