当前位置 博文首页 > 小丞同学：Ajax向服务器端发送请求
Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。
Ajax是一种异步进程，程序不会等待异步代码执行完后再继续执行后续代码
当后续代码需要调用Ajax返回的数据时，可能会有数据未返回的问题
var xhr = new XMLHttpRequest();
xhr.open('get','127.0.0.1');
xhr.send();
xhr.onload = function () {
console.log(xhr.responseText);
}
服务器端大多数情况下会以JSON对象作为响应数据的格式
在http请求和响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。
JSON.parse();//将json字符串转化为json对象
JSON.stringify() // 将json对象转换为json字符串
xhr.open('get','http://www.');
get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//发送请求
xhr.send();
在Ajax请求执行的过程中每一步都对应一个状态码
| 数值 | 意义 |
|---|---|
| 0 | 请求没有初始化，没有调用 open() |
| 1 | 请求已经建立，但是没有发送 send() |
| 2 | 请求已经发送 |
| 3 | 请求正在处理，通常响应中已经有部分数据可以使用了 |
| 4 | 响应已经完成，可以获取并使用服务器响应了 |
xhr.readyState;//获取Ajax状态值
onreadstatechange事件Ajax状态码发生变化的时候触发
// 当Ajax状态码发生变化时触发事件
xhr.onreadystatechange = function () {
// 判断当Ajax状态码为4时
if (xhr.readyState == 4) {
// 输出响应数据
console.log(xhr.responseText);
}
}
xhr.status();//响应的HTTP状态码
| 状态码 | 意义 |
|---|---|
| 1xx | 信息响应类，表示接收到请求并且继续处理 |
| 2xx | 处理成功响应类，表示动作被成功接收、理解和接受 |
| 3xx | 重定向响应类，为了完成指定的动作，必须接受进一步处理 |
| 4xx | 客户端错误，请求可能出错，妨碍服务器的处理 |
| 5xx | 服务端错误，服务器不能正确执行一个正确的请求 |
由于缓存的存在，在请求地址不发生改变的情况下，只有第一次的数据请求会发送到服务器端，后续的请求都会从浏览器的缓存中获取
解决方法：改变请求的地址
xhr.open('get','http://xxx.com?t=' + Math.random());
通过Math下的方法产生随机数，使请求地址不同
也可以使用Date下的方法，利用时间戳，也可以使值不同
function ajax (options) {
// 设置初始化的默认值
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
}
// 通过assign的方法用options的值替换defaults
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
//处理用户传入的data数据，拼接成特定的数据格式传递给服务器端
var params = '';
// 循环参数
for (var attr in defaults.data) {
// 参数拼接
params += attr + '=' + defaults.data[attr] + '&';
// 去掉参数中最后一个&
//从第一位截取到倒数第一位并返回
params = params.substr(0, params.length-1)
}
// 如果请求方式为get
if (defaults.type == 'get') {
// 将参数拼接在url地址的后面
defaults.url += '?' + params;
}
// 配置ajax请求
xhr.open(defaults.type, defaults.url);
// 如果请求方式为post
if (defaults.type == 'post') {
// 设置请求头
xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
// 如果向服务器端传递的参数类型为json
if (defaults.header['Content-Type'] == 'application/json') {
// 将json对象转换为json字符串
xhr.send(JSON.stringify(defaults.data))
}else {
// 发送请求
//post请求参数放在send中
xhr.send(params);
}
} else {
xhr.send();
}
// 请求加载完成
xhr.onload = function () {
// 获取服务器端返回数据的类型
var contentType = xhr.getResponseHeader('content-type');
// 获取服务器端返回的响应数据
var responseText = xhr.responseText;
// 如果服务器端返回的数据是json数据类型
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText);
}
// 如果请求成功
if (xhr.status == 200) {
// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
defaults.success(responseText, xhr);
} else {
// 调用失败回调函数并且将xhr对象传递给回调函数
defaults.error(responseText, xhr);
}
}
// 当网络中断时
xhr.onerror = function () {
// 调用失败回调函数并且将xhr对象传递给回调函数
defaults.error(xhr);
}
}
