You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
varxhr=newXMLHttpRequest();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("请求结束");}
XMLHttpRequest
在JavaScript发展的最初阶段,想知道提交一份表单的对错,必须传到服务器等待服务器的想应,而服务器相应的同时会刷新页面,如果表单的内容非常多,因为一个错误要重新填写,是非常头疼的一件事。
因此AJAX的出现正式为我们解决了这些问题。AJAX并不是一个方法,它只是一个概念。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
而实现异步与后台交互就需要使用XMLHttpRequest对象,他是浏览器的内置对象,所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
下面是MDN(火狐开发者社区)的一些提示
用XMLHttpRequest 发起一次异步的Get请求
通过XMLHttpRequest构造函数创建XMLHttpRequest对象
所有的属性方法都在XMLHttpRequest 对象的实例上,必须在所有其他方法被调用前调用构造函数。
xhr.open( ) 方法初始化一个请求
xhr.open(method, url, async, user, password);
open有两个必填的参数:
method(请求方法)包括,「GET」、「POST」、「PUT」、「DELETE」、等
url 一个String 类型的请求地址
Get
方法带参数拼接在url后面,‘/list?page=5’,如果有非法字符 ‘ ’,@,#,中文字符需要用 encodeURIComponent转义async 是一个可选值表示是否是异步请求,默认值为
true
, 推荐一直使用异步请求使用onreadystatechange监听请求的状态
XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。
readyState 属性是什么?
xhr.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态,他是下面值之一
因此当xhr.readyState === 4 时表示请求操作已经完成,XMLHttpRequest.DONE 为xhr对象原型上的属性。如下图:

xhr.status 表示的是响应状态码200表示成功。
xhr.send( )
总结如何发起一个请求
为什么有人用onload 和 onreadystatechange 有什么区别
load:
响应接收完毕后将触发load事件,因此也就没有必要去检查readyState属性了。但一个完成的请求不一定是成功的请求,例如,load事件的处理程序应该检查XMLHttpRequest对象的status状态码来确定收到的是“200 OK”而不是“404 Not Found”的HTTP响应
progress:
progress事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象,但包含着三个额外的属性:lengthComputable、loaded和total。其中,lengthComputable是一个表示进度信息是否可用的布尔值,loaded表示已经接收的字节数,total表示根据Content-Length响应头部确定的预期字节数。
upload:
其他事件:
FormData和表单提交
FileReader
The text was updated successfully, but these errors were encountered: