原生的AJAX请求

AJAX概念

AJAX全称：Asynchronous Javascript And XML。AJAX并不是一种新的编程语言，是一种技术。AJAX实现了页面不需要刷新也能获取数据。

使用AJAX技术，关键在于XMLHttpRequest对象。
AJAX是异步操作

Demo:

let xmlhttp=new XMLHttpRequest();//创建 XMLhttpRequest 对象
xmlhttp.open("请求方式","请求资源的地址");
xmlhttp.send();//发送请求
xmlhttp.onreadystatechange=()=>{//readyState每次改变就会执行onreadystatechange
	if(xmlhttp.readyState==4){//readyState是请求状态
		if(xmlhttp.status==200||xmlhttp.status==304){
			console.log(xmlhttp.responseText);//控制台输出 请求的内容
		}
	}
}

解析该Demo：
1、创建XMLHttpRequest对象。
2、open(“请求方式”,“资源地址”)；
请求方式有：GET与POST
资源地址，例如：“…/资源文件夹/需要AJAX请求的资源.txt”
3、send();发送请求
4、AJAX请求发送后，readyState状态就会改变，readyState状态一改变就执行onreadystatechange函数。其中readyState状态为4的话，就是请求发送完成。
5、status可以查看到请求资源的状态，200与304就代表成功获取资源，例如404这些就是请求失败。
6、responseText是请求的资源内容。

readyState有5种状态：

| 状态值 |状态描述|
|–|–|–|
| 0 | AJAX开始初始化 |
| 1 | 开始发送AJAX请求 |
| 2 | AJAX请求发送完成 |
| 3 | 开始解析响应的资源|
| 4 | AJAX请求的步骤全部完成 |

既然要发送AJAX请求，那么肯定有携带的参数数据。

数据放在send(data)中。
GET请求时，data为null；POST请求的数据就是data。

GET请求Demo：

xmlhttp.open("GET","./用户数据.txt");
xmlhttp.send();
xmlhttp.onreadystatechange=()=>{
	if(xmlhttp.readyState==4){
		if(xmlhttp.status==200||xmlhttp.status==304){
			console.log(xmlhttp.responseText);
		}
	}
}

GET请求并非不能携带参数数据，数据一般放在请求资源地址后:
“./用户数据.txt?id=0&number=20”

POST请求Demo：

xmlhttp.open("POST","./用户数据.txt");
xmlhttp.send({
	id:"0",
	number:"20"
});
xmlhttp.onreadystatechange=()=>{
	if(xmlhttp.readyState==4){
		if(xmlhttp.status==200||xmlhttp.status==304){
			console.log(xmlhttp.responseText);
		}
	}
}

Tips: open函数实际上并不只有这两个参数

open(“method”,“URL”,async,username,password);
method:GET、POST、HEAD
URL:资源地址
async:是否异步操作，布尔值，true为异步，false为同步，默认是异步
username与password:可选参数，部分URL需要认证，这两个就是提供认证数据，一般不写

欢迎大家补充~

更多推荐

原生的AJAX请求