XMLHttpRequest 2级 &&进度事件&&JSONP
XMLHttpRequest 2级
FormData
FormData 为序列化表单以及创建与表单格式相同的数据（用于通过 XHR传输）提供了便利
创建FormData对象
1.append()方法:接收两个参数 => 键和值，分别对应表单字段的名字和字段中包含的值。可以像如下所示这样添加任意多个键值对
var data = new FormData();
data.append("name", "Nicholas");
2.通过向 FormData 构造函数中传入表单元素
var data = new FormData(document.forms[0]);
传给send()方法
创建了 FormData 的实例后，可以将它直接传给 XHR的 send()方法
var xhr=new XMLHttpRequest();
xhr.open('post','example.php',true);
var form=document.getElementById('user-info')
xhr.send(new FormData(form));
超时设定
timeout 属性 => 表示请求在等待响应多少毫秒之后就终止。给 timeout 设置一个数值，如果在规定的时间内浏览器还没有接收到响应，那么就会触发 timeout 事 件，进而调用 ontimeout 事件处理程序
xhr.open('post','example.php',true);
xhr.timeout=1000; //将超时事件设置为1S
xhr.ontimeout=function(){ //请求终止时，会执行ontimeout事件处理程序
alert('request did not return in a second!')
}
xhr.send(null);
overrideMimeType()方法
用于重写 XHR响应的 MIME 类型(返回响应的 MIME类型决定了 XHR对象如何处理它)。比如，服务器返回的 MIME类型是 text/plain，但数据中实际包含的是 XML。根据 MIME类型， 即使数据是 XML，responseXML 属性中仍然是 null。通过调用 overrideMimeType()方法，可以保证把响应当作 XML而非纯文本来处理。
var xhr = createXHR();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
//强迫XHR对象将响应当作XML而非纯文本来处理。调用 overrideMimeType()必须在send()方法之前，才能保证重写响应的MIME类型
xhr.send(null);
Firefox、Safari 4+、Opera 10.5和 Chrome支持
进度事件
load事件
只要浏览器接收到服务器的响应，不管其状态如何，都会触发 load 事件。而这意味着你必须要检查 status 属性，才能确定数据是否真的已经可用了。
xhr.onload = function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: " + xhr.status);
}
}
progress事件
在浏览器接收新数据期间周期性地触发。 onprogress 事件处理程序会接收到一个 event 对象,其 target 属性是 XHR 对象，包含着三个额外的属性：lengthComputable、position 和 totalSize => 可以为用户创建一个进度指示器
|lengthComputable 是一个表示进度信息是否可用的布尔值
|position 表示已经接收的字节数
|totalSize 表示根据 Content-Length 响应头部确定的预期字节数
xhr.onprogress = function(event){//必须在调用 open()方法之前添加 onprogress 事件处理程序
var divStatus = document.getElementById("status");
if (event.lengthComputable){
divStatus.innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes";
}
};
上述例子：每次触发 progress 事件，都会以新的状态信息更新 HTML 元素的内容。如果响应头部中包含 Content-Length 字段，那么也可以利用此信息来计算从响应中已经接收到的数据的百分比
其他事件
1.abort()：在因为调用 abort()方法而终止连接时触发 ；调用abort()的主要原因是 完成取消/超时请求消耗的时间太长/当响应变得无关
2.error()：在请求发生错误时触发。太多重定向这样的网络错误会阻止请求完成 =>error事件
xhr.onabort = function(){
console.log("The transfer has been canceled by the user.");
}
xhr.onerror = function(){
console.log("An error occurred while transferring the file.");
}
JSONP
| JSONP看起来与 JSON差不多，只不过是被包含在函数调用中的 JSON，像这样：callback({ “name”: “Nicholas” });
| JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。数据就是传入回调函数中的JSON数据。
http://freegeoip.net/json/?callback=handleResponse
//请求一个 JSONP地理定位服务 回调函数的名字叫 handleResponse()
| JSONP 是通过动态
function handleResponse(response){
alert("You’re at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
//通过查询地理定位服务来显示你的 IP地址和位置信息
本文地址：https://blog.csdn.net/YogaLin_qwq/article/details/107585086