原生ajax的请求过程
一、请求流程
- 创建XMLHTTPRequest对象。
- 使用open方法设置和服务器的交互信息。
- 设置发送的数据，开始和服务器端交互。
- 注册事件。
- 更新界面。
二、步骤解析
-
创建XMLHTTPRequest对象
XMLHttpRequest是AJAX的基础。所有现代浏览器均支持XMLHttpRequest对象，（IE5 和 IE6 使用 ActiveXObject）。
//新建XMLHttpRequest对象 var ajax = new XMLhttpRequest(); //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象 var activex = new ActiveXObject("Microsoft.XMLHTTP"); //适配所有浏览器 var ajax; if (window.XMLHttpRequest){ // 适配 IE7+,Firefox,Chrome,Opera,Safari ajax=new XMLHttpRequest(); } else{ // 适配 for IE6, IE5 ajax=new ActiveXObject("Microsoft.XMLHTTP"); } -
使用open方法设置和服务器的交互信息
使用open方法设置请求参数 请求方式和请求地址
// method：请求的类型；GET 或 POST // url：文件在服务器上的位置 // async：true（异步）或 false（同步），默认为true ajax.open(method,url,async) //设置get请求 ajax .open ('get','xxxx/xxxx?xx=xxxx'); //设置post请求，post 请求要设置请求头 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ajax.open('post','xxx/xxxx'); -
设置发送的数据，开始和服务器端交互。
//请求发送 ajax.send(); //如果POST请求需要发送表单那样的数据 ajax.send('name=xl&age=22') -
注册事件。
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
// onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 // readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 // 0: 请求未初始化 // 1: 服务器连接已建立 // 2: 请求已接收 // 3: 请求处理中 // 4: 请求已完成，且响应已就绪 // status: 200: "OK" 或 404: 未找到页面 ajax.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.staus == 200 ){ //5.请求成功 console.log(xhr.responsetext) ...相关相应操作 }GET请求
//1.创建异步对象 var ajax = new XMLhttpRequest(); //2.设置请求参数 请求方式 和 请求地址 ajax .open ('get','xxxx/xxxx?xx=xxxx'); //3.发送请求 ajax.send(); //4.注册事件 onreadystatechange 状态改变就会调用 ajax.onreadystatechange = function (){ if(ajax.readyState == 4 && ajax.staus == 200 ){ //5.请求成功 console.log(ajax.responsetext) } }POST请求
// 1.创建异步对象 var xhr = new XMLHttpRequest(); // 2.设置请求方式和请求地址 // post 请求要设置请求头 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.open('post','xxx/xxxx'); //3.发送请求 // a.不需要数据的时候 xhr.send() // b.需要发送data xhr.send('name=xl&age=22') //4.注册事件 onreadystatechange 状态改变就会调用 xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.staus == 200 ){ //5.请求成功 console.log(xhr.responsetext) } -
更新界面。
三、方法封装
如果封装ajax函数需要考虑到的关键点：
- 请求方式(get)，请求参数要与地址拼接后放到open方法中。
- 请求方式post，请求参数类型是json数据类型，要将json转字符串后放到send方法中。
- 对服务器响应处理时获取响应头中的响应数据格式。
- 响应的格式是json对象，处理响应结果要将字符串转json对象。
- 设置ajax函数的默认参数减少代码冗余。
function ajax (options) {
// 存储的是默认值
var defaults = {
type: 'get',
url: '',
data: {
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {
},
error: function () {
}
};
// 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 拼接请求参数的变量
var params = '';
// 循环用户传递进来的对象格式参数
for (var attr in defaults.data) {
// 将参数转换为字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
// 判断请求方式
if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 如果请求方式为post
if (defaults.type == 'post') {
// 用户希望的向服务器端传递的请求参数的类型
var contentType = defaults.header['Content-Type']
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(defaults.data))
}else {
// 向服务器端传递普通类型的请求参数
xhr.send(params);
}
}else {
// 发送请求
xhr.send();
}
// 监听xhr对象下面的onload事件
// 当xhr对象接收完响应数据后触发
xhr.onload = function () {
// xhr.getResponseHeader()
// 获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText;
// 如果响应类型中包含applicaition/json
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
// 当http状态码等于200的时候
if (xhr.status == 200) {
// 请求成功 调用处理成功情况的函数
defaults.success(responseText, xhr);
}else {
// 请求失败 调用处理失败情况的函数
defaults.error(responseText, xhr);
}
}
}
ajax({
type: 'post',
// 请求地址
url: 'http://localhost:3000/responseData',
success: function (data) {
console.log('这里是success函数');
console.log(data)
}
})
代码参考链接：https://juejin.cn/post/6844904071371948046