原生AJAX

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需要认证，这两个就是提供认证数据，一般不写