ajax请求

ajax请求虽然很简单，但是由于开发时粗心大意，有些细节问题还是需要再总结记录下的。

一. ajax用法基本示例

let url = '127.0.0.1:8080/api/blog/addBlog';
let xhr = null;

if(window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
} else {
	xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange = function() {
	console.log(xhr.readyState);
	console.log(xhr.status);
	console.log(xhr.responseText);
}
xhr.open('post', url, true);
xhr.setRequestHeader('content-type', 'application/json;charset=utf-8');
xhr.send(JSON.stringify({
	title: "标题", 
	content: "xxxxx"
}));

一个通过ajax进行的简单post请求已经建立成功，下面我们主要来说下xhr对象的一些属性。

二. 属性特点

ajax可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1. 创建xhr对象

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 创建对象：

xhr = new ActiveXObject('Microsoft.XMLHTTP');

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象：

xhr = new XMLHttpRequest();

2. onreadystatechange监听请求的状态

每当 readyState 属性改变时，就会调用onreadystatechange函数。在该函数中我们可以选择适当的时机获取接口返回的数据进行下一步的操作。

readyState的值有五种，分别是：
0： 在xhr.open()调用之前，表示请求未初始化
1： 在xhr.open()之后，send()之前，表示服务器连接已建立
2： 在send()之后，表示请求已接收，此时响应头中已有数据返回
3： 响应体中已返回部分数据
4： 响应数据全部返回

status状态码常用的值：

1. 200表示接口调用成功
2. 404表示未找到页面或接口
3. …

3. 请求方式

1. GET
   get请求一般可以对url进行encodeURIComponent编码。

2. POST
   如果需要设置请求头中的一些信息可以在setRequestHeader方法中进行设置。要注意，setRequestHeader方法需要放在open和send之间。

4. send

get请求send中是不需要发送数据的，可以设置成xhr.send(null);
post请求中send方法放置请求参数，类型需要是字符串。

三. 不适用ajax的场景

1. ajax可能存在跨域问题
2. ajax调用后端接口，是不允许接口页面地址栏的刷新操作的（ajax可以在不重新加载整个网页的情况下，对网页的某部分进行更新。），解决方案可以参考https://blog.csdn.net/weixin_39889465/article/details/111353346