Ajax基础
异步的JS和XML。
Ajax的技术核心是 XMLHttpRequest对象,简称XHR对象;实例化一个XHR对象:
let xhr = createXHR();
XHR的用法:
xhr.open("GET","example.php",true); 第一个参数是open的方法，与get，post之类的，第二个参数是请求的页面的URL，第三个参数表示是否为异步；
只能向同一个域中的同一个端口和相同协议的URL发送请求；
open只是启动了一个请求，但此时并不会发送
要发送特定的请求，需要使用send()方法；
xhr.send(null);//参数为作为请求主体发送的数据，没有则为null，参数是必需的；
响应的数据会自动填充xhr对象，有以下几种属性：
responseText：作为响应主体返回的文本；
responseXML:响应数据的XML DOM数据;
status:响应的http状态;
statusText:http状态说明;
readystate:4表示已经接受到全部响应数据;
xhr也可以设置自定义的头部信息;使用setRequestHeader()即可(在open方法之后,send方法之前);
GET一般用于向服务器查询一些信息;查询字符串可以追加至URL末尾,但一定要注意编码正确;
查询字符串的每个参数的名称和键值都必须使用encodingURIComponent()进行编码,名称和键值对都需要用&符号分割开;
xhr.open("GET","example.php?name1=value1&name2=value2",true);
function addURLParam(url, name, value){
url += (url.indexOf("?")== -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
示例:
var xhr=createXHR();
var url ="example.php";
url=addURLParam(url,"name","Nicholas");
url2=addURLParam(url1,"book","professional");
xhr.open("GET",url2,true);
post常用于像服务器发送应该保存的数据;
如果要模拟表单的提交,则一定要设置头部;
新增的FormData对象,则表示的就是序列化后的表单,也不需要再配置头部了;
var xhr = createXHR();
xhr.open("POST","example.php",true);
var form = document.getElementById('user-info');
xhr.send(FormData(form));
超时设定:
XHR有一个属性是timeout属性,当在设定时间内浏览器没有接受到响应,则会触发一个ontimeout事件,进而会调用事件处理函数;示例:
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
try{
if((xhr.status >=200 && xhr.status<300) || xhr.status == 304){
//请求成功的处理
}else{
//请求没有成功
}
}catch (ex){
//假设由ontimeout()事件处理程序处理
}
}
}
xhr.open("get","example.php",true);
xhr.timeout = 1000;
xhr.ontimeout = function(){
//超时的处理;
}
xhr.send(null);
进度事件:
loadstart:在接受到响应数据的第一个字节时触发;progress:在接受响应期间不断的触发;
error:在请求发生错误时触发;
abort:在请求被调用abort()方法二终止连接时触发
load:在接受到完整的数据时触发;
loadend:在通信完成或者error,abort,或者load事件后触发
load事件:
load事件可用于简化onreadystatechange事件,onload事件处理程序会收到一个event对象,其target属性就指向XHR对象实例,因而可以访问到XHR对象的所有方法和属性;
var xhr = createXHR();
xhr.onload = function(){
if((xhr.status >=200 && xhr.status<300) || xhr.status == 304){
//请求成功的处理
}else{
//请求没有成功
}
}
xhr.open("get","example.php",true);
xhr.send(null);
process事件:
onprocess事件接收的event对象,其target属性是XHR对象,但是包含了3个额外的属性:lengthComputable:进度信息是否可用的布尔值;
position:表示已经接受的字节数;
totalsize:表示根据Content-Length响应头部确定的预期字节数