Ajax的使用方法

具体使用步骤

btn.onclick = function(){
// 1. 实例化一个 XMLHttpRequest 对象
let http = new XMLHttpRequest();
// 2. 规划一个请求（三要素）
   	// 2.1 请求方式 GET || POST
	// 2.2 请求地址
	// 2.3 同步还是异步可选的参数，如果省略就是异步的请求
	http.open("GET","http://10.35.170.103/data.php");
	//带有一个请求参数的请求
	http.open("GET",`http://10.35.170.103/data.php?age=${age.value}&sex=${sex.value}`);
// 3. 真实的发送请求
	http.send();
// 4. 接收来自服务器端的响应
	http.onreadystatechange = function(){
	//服务器端已将返回的内容交付给客户端手里了
	if(http.readyState === 4){ console.log(http.responseText);
	}}}
	• 创建 XMLHttpRequest 对象
	o 浏览器使用 XMLHttpRequest 对象与服务器进行交互，获取数据。一般现在流行的浏览器均支持 		XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
o 语法：
var xml=new XMLHttpRequest();
老版本的 IE 浏览器的创建方式为：var xml=new
 ActiveXObject(“Microsoft.XMLHTTP”);
var xml;
if (window.XMLHttpRequest) {
xml=new XMLHttpRequest();
}else{
xml=new ActiveXObject("Microsoft.XMLHTTP");
} 
	• 向服务器发送请求

发送不同方式的请求

1、get 方式提交使用 XMLHttpRequest 对象的 open()方法向服务器发送请求
语法：

open(请求方式,请求地址（get 发送的数据拼接在 url 后面）,true(异 步))
xml.open("get","index.json",true);
xmlH.send();// get 请求 send 保持为空

2、post 方式提交 使用 XMLHttpRequest 对象的 open()与 send() 方法向服务器发
送请求
语法：

open(请求方式,请求地址,true(异步))
send()
xml.open("post","index.json",true);
//如果想要使用 post 提交数据,必须添加此行
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
通过 send 方法传递 //将数据
xhr.send('name=fox&age=18');
• onreadystatechange 事件

不同的状态码所代表的的含义

当向服务器发送请求时 readyState 的值发生改变时触发 onreadystatechange
事件。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 有两种数值，分别表示： 200: “OK” 404: 未找到页面

xml.onreadystatechange(function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
console.log(xhr.responseText);
}}

在这再向大家拓展一下status的更多数值，简单用图来表示出来