AJAX 原生方法记录
2018-11-09 本文已影响4人
Kerwin_F
创建 XMLHttpRequest 对象、open 方法、send 方法
var xhr = new XMLHttpRequest() // 创建原生 XHR 对象
xhr.open("get","example.php",false); // 第一个参数：发送请求类型，第二个参数： 请求URL，第三个参数：是否异步发送（true 为异步）
xhr.send(null); // 请求主体发送数据，如果不需要则必须传入 null ，调用后请求发送到服务器。
当收到响应后，响应的数据会自动填充 XHR 对象的属性
- responseText：作为响应主体被返回
- responseXML：如果响应的内容类型是“text/xml”或者“application/xml”，这个属性将保存包含着响应数据的 XML DOM 文档
- status：响应的 HTTP 状态码
- statusText： HTTP 状态的说明
- readyState: 表示请求/响应过程的当前活动阶段
// readyState 值
0：未初始化，尚未调用 open()方法
1：启动，已经调用 open() 方法，但尚未调用 send() 方法
2：发送，已经调用 send() 方法，但尚未接收到响应
3： 接受，已经接收到部分响应
4： 完成 ，已经接受全部响应
- 方法： onreadystatechange // 只要 readyState 改变，都会触发 readystatechange 事件
xhr.onreadystatechange = function(){
// 对状态进行判断
if(xhr.readyState == 4){
console.log("balabala");
}
}
XHR （XMLHttpRequest） 对象方法集结
var xhr = new XMLHttpRequest();
xhr.setRequestHeader('MyHeader','MyValue'); // 设置发送的头部信息
// Content-Type: application/json ——用于通知服务器该请求需要接受何种类型的返回结果
// dataType： json ————把响应的结果当做 JSON 执行，并返回一个 JavaScript 对象
# 进度设定
只要浏览器接收到服务器的响应，都会触发 load 事件
xhr.onload() = function(){
if((xhr.status>=200 && xhr.status<300) || xhr.status == 304) {
alert(xhr.responseText);
} else{
alert("Request success" );
}
}
# progress 事件
该事件将会在浏览器接受数据期间**周期性**的触发，主要就是用于显示当前加载情况
并且 onprogress 事件处理程序会接收到一个 event 对象，其中 target 属性是 XHR 对象，但包含着三个格外的属性:
1. lengthComputable： 进度信息是否可用的布尔值
2. position：表示已经接受的字节数
3. totalSize： 表示根据 Content-length 响应头部确定的预期字节数
xhr.onprogress = function(event){
console.log(event.lengthComputable,event.position, event.totalSize);
}
超时设定
timeout 属性： 超时时间设定
xhr.timeout = 1000 ; // 将超时设定设置为 1秒钟
xhr.ontimeout = function(){
alert("request did not return in a second");
}// 超时将会调用该函数
XMLHttpRequest 2级
通过 formData 对象
var data = new FormData();
data.append("name"，"laoluo");
