We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
异步JavaScript + XML的缩写,通过这种技术方案可以实现向服务器请求数据时不需要卸载(刷新)页面。
并且不会阻塞JavaScript代码的执行,解决“单击 - 等待”的交互模式,将前端推向了新的时代(web2.0),实现异步获取数据。
实现AJAX的核心是XMLHttpRequest对象,最早由微软引入的概念,相继各大浏览器提供了相同的实现(XHR1.0)。
web 1.0 时代发送网络请求的主要通过form表单提交,web2.0有了ajax?
现在使用的XHR对象是经过W3C定制过的标准,简称为XHR2.0,并且是现在主流的XHR规则。主要的方法、属性和事件如下:
XMLHttpRequest.open() 方法初始化一个请求
语法为:xhrReq.open(*method*,*url*,*async*,*user*,*password*);
xhrReq.open(*method*,*url*,*async*,*user*,*password*);
method 要使用的HTTP方法,比如「GET」、「POST」、「PUT」、「DELETE」、等。
async 可选 一个可选的布尔参数,默认为true,表示要不要异步执行操作。如果值为false,send()方法直到收到答复前不会返回(阻塞代码)。
调用该方法并不会真正发送请求, 只是启动一个请求以备发送
XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回。
方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。
XHR对象的readState属性拥有如下四个状态码:
0:未初始化 ,没有调用oepn() 1:启动,调用open() 但没有执行send () 2:发送,但未接收响应 3:接收,收到部分数据 4:完成,收到全部数据响应
每次readState属性发生改变都会触发readystatechange事件,因此可以使用该事件监听数据的状态,进行后续处理。
只读属性 XMLHttpRequest.status 返回了XMLHttpRequest 响应中的数字状态码(Http)
每个网络请求都是从触发loadstart事件开始,紧接着是一个或多个progress事件,最后触发error 、abort、load事件中的一个事件,最后以loadend事件收尾。
只要浏览器接收到服务器的响应,都会触发load事件,因此进行status属性的检查
具体过程为:
function getWebData(url) { let xhr = new XMLHttpRequest() xhr.onreadystatechange = function () { switch (xhr.readyState) { case 0: console.log(‘请求未初始化’) break; case 1: console.log(‘以创建请求’) break; case 2: console.log(‘请求已确认’) break; case 3: console.log(‘正在接受数据’) break; case 4: console.log('数据全部接受完毕') break; } } xhr.ontimeout=function (e) { console.log(‘请求超时’,e); } xhr.onerror=function (e) { console.log(‘请求发生错误’,e) } xhr.open(‘get’,url,true); xhr.timeout=3000; // 设置xhr请求超时事件 xhr.responseType=‘text’; //设置响应返回的数据类型 // 常见的有 “document” , “json” , “text” “arraybuffer” xhr.send(null) }
封装ajax方法 promise场景:
function ajax(url) { const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open(‘GET’, url, true) xhr.onreadystatechange = function () { if (xhr.readyState === 4) { // 只要完成后都会返回4 不管成功还是失败 if (xhr.status === 200) { resolve( JSON.parse(xhr.responseText) ) } else if (xhr.status === 404 || xhr.status === 500) { reject(new Error(‘404 not found’)) } } } xhr.send(null) }) return p }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
AJAX简述
异步JavaScript + XML的缩写,通过这种技术方案可以实现向服务器请求数据时不需要卸载(刷新)页面。
并且不会阻塞JavaScript代码的执行,解决“单击 - 等待”的交互模式,将前端推向了新的时代(web2.0),实现异步获取数据。
实现AJAX的核心是XMLHttpRequest对象,最早由微软引入的概念,相继各大浏览器提供了相同的实现(XHR1.0)。
XMLHttpRequest
现在使用的XHR对象是经过W3C定制过的标准,简称为XHR2.0,并且是现在主流的XHR规则。主要的方法、属性和事件如下:
open 方法
XMLHttpRequest.open() 方法初始化一个请求
语法为:
xhrReq.open(*method*,*url*,*async*,*user*,*password*);
method
要使用的HTTP方法,比如「GET」、「POST」、「PUT」、「DELETE」、等。
async 可选
一个可选的布尔参数,默认为true,表示要不要异步执行操作。如果值为false,send()方法直到收到答复前不会返回(阻塞代码)。
send 方法
XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回。
方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。
readState状态码
XHR对象的readState属性拥有如下四个状态码:
每次readState属性发生改变都会触发readystatechange事件,因此可以使用该事件监听数据的状态,进行后续处理。
XHR2.0的进度事件
每个网络请求都是从触发loadstart事件开始,紧接着是一个或多个progress事件,最后触发error 、abort、load事件中的一个事件,最后以loadend事件收尾。
XMLHttpRequest 运作机制 + 封装AJAX方法
具体过程为:
封装ajax方法 promise场景:
跨域方案
简单请求和非简单请求
The text was updated successfully, but these errors were encountered: