Ajax
Ajax Asynchronous Javascript +XML
本质:远程脚本
Ajax-无需刷新当前页面即可从服务器获取额外数据的一个方法.
最初是通过JavaScript从服务器获取XML数据的一种手段
- 最初,JavaScript对服务器的请求可以通过中介(如Java小程序、或flash影片),即远程脚本
- 在XHR出现之前Ajax风格的通信必须通过黑科技实现-隐藏的窗格、内嵌窗格。
- XHR由微软提出,又被其他浏览器借鉴,打开一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息,提供了原生的浏览器通信能力。
XHR为发送服务器请求和获取响应提供了合理的接口,该接口可以实现同/异步从服务器获取额外的数据,即用户不用点击页面刷新也可以获得新的数据。 - XHR的API被认为比较难用,所以又推出了fetch API,后者支持promise、service worker。
通过XHR进行请求有一个主要限制是跨域安全策略,默认情况下,XHR只允许访问 与发起请求的页面在同一个域的资源。想要实现跨域XHR,从实现跨域HTTP入手,CORS方法、CSP头部。此外也可以直接不用XHR,采用其他不受跨域限制的方法,jsonp、img图片探测
XMLHttpRequest对象 同/异 步
XMLHttpRequest对象 fetch API
一个异/同步(配置open方法的参数来实现同/异 步)调用对象,设置响应HTTP请求状态变化的函数
let xhr=new XMLHttpRequest();
//收到响应后,xhr的部分属性会被填充赋值
xhr.onreadystatechange=function(){
if(xhr.readyStatus==4){
if(xhr.status>=200&&xhr.status<300||xhr.status==304){
alert(xhr.responseText);
}else{
alert("Request failed :"+xhr.status);
}//不用this取代xhr,防止作用域问题
}
};
xhr.open("get","./url",请求是否异步的布尔值);//请求方法,不请求,只是做准备,只能访问同源URL
//修改添加 应在这时完成
xhr.send(请求体);//无请求体,传入null
一般浏览器自己的默认HTTP消息头都会携带上去,此外
open()与send()函数之间开发者可以使用setRequestHeader()发送自定义的头部
属性
- responseText:作为响应体返回的文本
- responseXML:当响应体是XML时
- status:响应的HTTP状态
- statusText:响应的HTTP状态描述
- readyState:当前处在请求/