当前位置： 移动技术网 > IT编程>开发语言>JavaScript > XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级 &&进度事件&&JSONP

2020年07月26日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网