Ajax 通信原理

---

Ajax 通信原理

• Ajax 通信实质上是 JavaScript 创建了一个 XMLHttpRequest 对象，这个对象有个 open() 方法其参数包含 URL，method，callback 等，通过这个方法设置其属性，而后通过 send() 方法向后台发送请求。

1. XMLHttpRequest

a. XMLHttpRequest 对象

• XMLHttpRequest 对象用于在后台与服务器交换数据。
• XMLHttpRequest 对象作用：
  • 在不重新加载页面的情况下更新网页。
  • 在页面已加载后从服务器请求数据。
  • 在页面已加载后从服务器接收数据。
  • 在后台向服务器发送数据。
• 创建 XMLHttpRequest 对象：let xmlHttp = new XMLHttpRequest();

b. XMLHttpRequest 方法

1. 打开与服务器的连接:
	open(method,url,async)
    参数说明：
        method: 表示请求方式，GET或POST。
        url: 服务器的访问地址,或者资源的访问路径。
        async : 是否执行异步请求，true为异步，false为同步。
    举例：
    	xmlHttp.open("GET","data.txt",true);
  


2. 将请求送往服务器 :
	send() 

c. XMLHttpRequest 事件

onreadystatechange 事件

• 当请求对象的准备状态发生改变时，会触发 onreadystatechange 事件。
• 发送请求给服务器，这个状态就会发生变化。
• 服务器响应回来，这个状态也会发生变化

d. XMLHttpRequest 属性

i. readyState 属性

• readyState 表示请求与服务器之间的状态信息。
• 每当 readyState 改变时，onreadystatechange 事件就会被触发。

ii. readyState属性可能的值

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

iii. status 属性

status 表示服务器响应结果状态码，常见有以下几个状态：

• 200 : 表示响应正确，服务器成功返回。
• 404 : 服务器找不到请求的资源。(通常是 url 地址错误)
• 500 : 服务器异常，无法完成请求。（通常是服务端代码报错）

iv. responseText 属性

• 通过 responseText 属性来取回由服务器返回的数据，数据为文本格式。

---

2. 前端代码实现

a. 原生 Ajax 方式

//1.创建对象
let xmlHttp = new XMLHttpRequest();

//2.GET方法，异步方式，打开请求
xmlHttp.open("GET","data.txt",true);

//3.发送请求
xmlHttp.send();

//4.监听请求状态改变事件，判断响应是否已完成
xmlHttp.onreadystatechange = function(){
    //请求完成，并成功响应
    if(xmlHttp.readyState==4 && xmlHttp.status==200)  {
    	//5.从服务器取出响应数据
        let data = xmlHttp.responseText;
        console.log(data);
    }
};

b. 原生 GET 方式

<script>
        let xmlHttp = new XMLHttpRequest();
        xmlHttp.open("get","http://localhost:8080/check?username=盲僧",true);
        xmlHttp.send();
        xmlHttp.onreadystatechange = function () {
            console.log(xmlHttp.readyState);
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                console.log(xmlHttp.responseText);
            }
        }
</script>

c. 原生 POST 方式

<script>
        let xmlHttp = new XMLHttpRequest();
        xmlHttp.open("post","http://localhost:8080/check",true);
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send("username=盲僧");
        xmlHttp.onreadystatechange = function () {
            console.log(xmlHttp.readyState);
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                console.log(xmlHttp.responseText);
            }
        }
</script>

---

原文链接：https://qwert.blog.csdn.net/article/details/105459579