创建Ajax基本步骤
目录
1.基本概念
- AJAX：是一种异步通信的方法，通过直接由 js 脚本向服务器发起 http 通信，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一种方法。
- XmlHttpRequest (XHR浏览器原生支持):是Ajax实现的一种方式，是一个构造函数，提供了通过 URL 方式来获取数据，只更新网页的一部分数据。
- Fetch API (浏览器原生支持):XHR可实现的它也可以，除了监控请求速度（文件上传时涉及）
- 原生不好用，出现了一些第三方库(可以做到原生做到的，原生做不到的它也做不到)：Axios（XHR封装）、umi-request（Fetch API封装）
2.XMLHttpRequest 对象的三个常用的属性
- readyState 属性：存有服务器响应的状态信息
- 一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}
- responseText 属性：可以通过 responseText 属性来取回由服务器返回的数据（字符串）。
3.创建Ajax基本步骤
首先是创建一个 XMLHttpRequest 对象。 然后在这个对象上使用 open 方法创建一个 http 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。 在发起请求前，我们可以为这个对象添加一些信息和监听函数。比如说我们可以通过 setRequestHeader 方法来为请求添加头信息。我们还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，我们可以通过设置监听函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候我们可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候我们就可以通过 response 中的数据来对页面进行更新了。 当对象的属性和监听函数设置完成后，最后我们调用 send 方法来向服务器发起请求，可以传入参数作为发送的数据体
(1)创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
(2)设置请求方式
//POST请求
xhr.open('POST',"http://localhost:xxx");
(3)监听响应状态
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {//当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候我们可以通过判断请求的状态，如果状态是 200则代表返回正常。
var obj = document.getElementById(id);
obj.innerHTML = xhr.responseText;//页面进行更新
} else {
alert("AJAX服务器返回错误！");
}
}
}
(4)向服务器端发送请求
//POST请求,请求参数在发送请求Send()中.GET的请求参数在请求地址url中
xhr.send("a=100&b=200");
4.ajax 封装
//封装一个ajax请求
function ajax(options) {
//创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
//初始化参数的内容
options = options || {}
options.type = (options.type || 'GET').toUpperCase()
options.dataType = options.dataType || 'json'
const params = options.data
//发送请求
if (options.type === 'GET') {
xhr.open('GET', options.url + '?' + params, true)
xhr.send(null)
} else if (options.type === 'POST') {
xhr.open('POST', options.url, true)
xhr.send(params)
//监听响应状态
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let status = xhr.status
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML)
} else {
options.fail && options.fail(status)
}
}
}
}
- 使用方式：
ajax({
type: 'post',
dataType: 'json',
data: {},
url: 'https://xxxx',
success: function(text,xml){//请求成功后的回调函数
console.log(text)
},
fail: function(status){请求失败后的回调函数
console.log(status)
}
})
