摘要：一般地，使用事件探测请求的完成。但一个完成的请求不一定是成功的请求，例如，事件的处理程序应该检查对象的状态码来确定收到的是而不是的响应获取信息创建对象进度事件发送请求事件会在浏览器接收新数据期间周期性地触发。
一般地，使用readystatechange事件探测HTTP请求的完成。XHR2规范草案定义了进度事件Progress Events规范，XMLHttpRequest对象在请求的不同阶段触发不同类型的事件，所以它不再需要检査readyState属性。这个草案定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其他API(如File API)借鉴。本文将详细介绍进度事件
基础
有以下6个进度事件
loadstart:在接收到响应数据的第一个字节时触发
progress:在接收响应期间持续不断地触
error:在请求发生错误时触发
abort:在因为调用abort()方法而终止连接时触发
load:在接收到完整的响应数据时触发
loadend:在通信完成或者触发error、abort或load事件后触发
timeout:超时发生时触发
[注意]IE9-浏览器不支持以上事件(IE9浏览器仅支持load事件)
每个请求都从触发loadstart事件开始，接下来，通常每隔50毫秒左右触发一次progress事件，然后触发load、error、abort或timeout事件中的一个，最后以触发loadend事件结束
对于任何具体请求，浏览器将只会触发load、abort、timeout和error事件中的一个。XHR2规范草案指出一旦这些事件中的一个发生后，浏览器应该触发loadend事件
load
响应接收完毕后将触发load事件，因此也就没有必要去检查readyState属性了。但一个完成的请求不一定是成功的请求，例如，load事件的处理程序应该检查XMLHttpRequest对象的status状态码来确定收到的是“200 OK”而不是“404 Not Found”的HTTP响应
能仅仅像使用常见的progress事件处理程序一样使用upload事件处理程序。对于XMLHttpRequest对象，设置XHR.onprogress以监控响应的下载进度，并且设置XHR.upload.onprogress以监控请求的上传进度
$file = "photo/test.jpg"; binary_to_file($file); echo "文件上传成功!";
}else{
echo "文件格式不正确，请选择图片文件";
}
function binary_to_file($file){
$content = $GLOBALS["HTTP_RAW_POST_DATA"]; // 需要php.ini设置
if(empty($content)){
$content = file_get_contents("php://input"); //不需要php.ini设置，内存压力小
}
$ret = file_put_contents($file, $content, true);
return $ret;
};
?>
其他事件
HTTP请求无法完成有3种情况，对应3种事件。如果请求超时，会触发timeout事件。如果请求中止，会触发abort事件。最后，像太多重定向这样的网络错误会阻止请求完成，但这些情况发生时会触发error事件
可以通过调用XMLHttpRequest对象的abort()方法来取消正在进行的HTTP请求。调用abort()方法在这个对象上触发abort事件
调用abort()的主要原因是完成取消或超时请求消耗的时间太长或当响应变得无关时。假如使用XMLHttpRequest为文本输入域请求自动完成推荐。如果用户在服务器的建议达到之前输入了新字符，这时等待请求不再有用，应该中止
XHR对象的timeout属性等于一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认等于0，表示没有时间限制
如果请求超时，将触发ontimeout事件
var xhr = new XMLHttpRequest();
btn.onclick = function(){
xhr.abort();
};
xhr.ontimeout = function(){
console.log("The request timed out.");
}
xhr.timeout = 100;
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.");
}
xhr.onloadend = function(){
console.log("请求结束");
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103033.html
摘要：同源策略指的是当前页面和目标协议域名和端口均相同。发出请求的页面所在域。响应的头部信息在后端处理，不在此处讲解。该事件会在数据接收期间不断触发，但间隔不确定。服务器确认允许之后，才发起实际的请求。 ajax作为前端开发必需的基础能力之一，你可能会使用它，但并不一定懂得其原理，以及更深入的服务器通信相关的知识。在最近两天的整理过程中，看了大量的文章，发现自己的后端能力已经限制自己在网络通...
摘要：随着对象被广泛的接收，也开始着手制定相应的标准来规范其行为。四设置请求头每个请求和响应都会带有相应的头部信息，包含一些与数据，收发者网络环境与状态等相关信息。该方法会令对象实例停止触发事件，并且不再允许访问任何和响应有关的对象属性。 在上一篇文章中我们知道，AJAX是一系列技术的统称。在本篇中我们将更进一步，详细解释如何使用Ajax技术在项目中获取数据。而为了解释清楚，我们首先要搞清楚...
摘要：一款精简而丰富的微型框架，非常适合以为核心的项目使用。并集成指令模板进度条效果等功能。虽然支持载入页面的运行，但是由于安全限制以及可能出现的重复运行的问题，建议将所有写在主页面，事件以委托方式绑定。使用模式请求页面，这样可以保证是完全重载。 jQloader v0.2.3 一款精简而丰富的微型框架，非常适合以 jQuery 为核心的项目使用。 它的核心功能为 ajax + pushS...
阅读 3394·2023-04-25 22:44
阅读 859·2021-11-15 11:37
阅读 1601·2019-08-30 15:55
阅读 2582·2019-08-30 15:54
阅读 1046·2019-08-30 13:45
阅读 1401·2019-08-29 17:14
阅读 1806·2019-08-29 13:50
阅读 3345·2019-08-26 11:39
