原生AJAX实现
发送ajax请求步骤
- 1.创建XMLHttpRequest类型的对象
- 2.准备发送，打开与一个网址之间的连接
- 3.执行发送动作
- 4.指定xhr状态变化事件处理函数
XMLHttpRequest类型对象
- AJAX API中核心提供的是一个XMLHttpRequest类型，所有的AJAX操作都需要使用这个类型。
open方法开启请求
- 本质上XMLHttpRequest就是JavaScript在web平台中发送HTTP请求的手段，因此发送出去的请求仍然是HTTP请求，同样符合HTTP约定的格式。
语法：xhr.open(method,url);
- method: 要使用的HTTP方法。
- url: 要向其发送请求的url地址，字符串格式。
setRequestHeader()方法设置请求头
- 此方法必须在 open() 方法和 send() 之间调用
语法：xhr.setRequestHeader(header,value)
- header: 一般设置"Content-Type",传输数据类型，即：服务器需要我们传送的数据类型。
- value: 具体的数据类型，常用"application/x-www-form-urlencoded"和"application/json"。
send方法和请求头
- 用于发送HTTP请求
语法：xhr.send(body)
- body: 在XHR请求中要发送的数据体，根据请求头中的类型进行传参。
- 如果是GET方法，无需设置数据体，可以传null或者不传参。
readyState属性
- readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态，由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次。
?
封装AJAX库
封装一个ajax函数
- 主要是为了了解封装的过程，一般情况在开发中都是使用第三方提供的 AJAX 库，因为它们可能更加严谨。
- 为了在后续的开发过程中可以更方便的使用这套 API，一般的做法都是将其封装到一个函数中以便调用。
- 代码演示（将封装好的函数单独提取到一个文件中）
?
<script>
// 封装自己的ajax函数
/* 参数1：{string} method 请求方法
参数2：{string} url 请求地址
参数2：{Object} params 请求参数
参数3：{function} done 请求完成后执行的回调函数
*/
function ajax(method,url,params,done){
// 创建xhr对象，兼容写法
var xhr = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
// 将method转换成大写
method = method.toUpperCase();
// 参数拼接
var pair = [];
for(var k in params){
pair.push(k + "=" + params[k]);
}
var str = pair.join("&");
// 判断请求方法
if(method === "GET"){
// 字符串拼接 或者 模板字符串
url += "?" + str;
}
xhr.open(method,url);
var data = null;
if(method === "POST"){
// 需要请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data = str;
}
xhr.send(data);
// 指定xhr状态变化事件处理函数
// 执行回调函数
xhr.onreadystatechange = function (){
if(this.readyState === 4){
// 返回的应该是一个对象，这样客户端更好渲染
done(JSON.parse(xhr.responseText));
}
}
}
// 调用自己写的ajax函数
ajax("get","http://localhost:3000/users",{
name:"zs",
age:45
},function (a){
console.log(a);
});
</script>?