js原生ajax（Js原生过去src）

简介：

AJAX（Asynchronous JavaScript and XML）即异步JavaScript和XML，是一种用于创建快速动态网页的技术，使网页可以在不刷新的情况下更新部分数据。JS原生的AJAX可以避免使用第三方插件和库，更加轻便、灵活。

多级标题：

一、XMLHttpRequest对象

二、AJAX流程

三、AJAX请求方式

四、AJAX发送数据

五、AJAX回调函数

六、异步请求与同步请求的区别

详细内容：

一、XMLHttpRequest对象

XMLHttpRequest对象是AJAX的核心，通过它可以与服务器异步通信。通过调用该对象的open()方法和send()方法，可以向服务器发送请求并接收服务器返回的数据。

```javascript

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readyState === 4 && xhr.status === 200){

console.log(xhr.responseText);

}

};

xhr.open('GET', 'http://localhost:3000/data', true);

xhr.send(null);

```

上述代码中，new一个XMLHttpRequest对象，设置响应函数，调用open()方法和send()方法向服务器发送GET请求，其中true表示异步请求。

二、AJAX流程

AJAX请求的流程主要包括以下步骤：

1. 创建XMLHttpRequest对象；

2. 设置响应函数；

3. 调用open()方法和send()方法发送请求；

4. 服务器处理请求并返回数据；

5. 浏览器接收响应数据并进行处理。

三、AJAX请求方式

AJAX可以发送多种请求，主要包括以下几种：

1. GET请求：通过URL传递参数，常用于请求数据；

2. POST请求：通过HTTP请求体传递参数，常用于提交数据；

3. HEAD请求：仅返回响应头信息；

4. OPTIONS请求：用于查询服务器支持哪些请求方法。

四、AJAX发送数据

通过send()方法发送请求时，还可以向服务器发送数据。主要可分为两种方式：

1. 表单数据：将表单里的数据序列化后作为请求的数据发送，适用于POST请求。

```javascript

var xhr = new XMLHttpRequest();

xhr.open('POST', 'http://localhost:3000/data', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));

```

2. JSON数据：将JS对象序列化成JSON数据发送，适用于POST和GET请求。

```javascript

var xhr = new XMLHttpRequest();

xhr.open('POST', 'http://localhost:3000/data', true);

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.send(JSON.stringify(data));

```

五、AJAX回调函数

当XHR对象状态发生改变时，会触发readyStateChange事件，通过设置回调函数来处理服务器响应结果。主要包括以下几种：

1. onreadystatechange：XHR对象状态改变时的回调函数；

2. onloadstart：XHR对象开始发送请求时的回调函数；

3. onprogress：XHR对象接收到数据时的回调函数；

4. onload：XHR对象请求成功时的回调函数；

5. ontimeout：XHR对象请求超时时的回调函数；

6. onerror：XHR对象请求发生错误时的回调函数。

六、异步请求与同步请求的区别

AJAX可以实现异步请求，也可以实现同步请求。异步请求与同步请求的主要区别在于请求发送后，是否会阻塞后续代码的执行。异步请求不会阻塞后续代码，而同步请求会一直等待服务器响应，直到响应返回才会执行后续代码。

```javascript

//异步请求

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost:3000/data', true);

xhr.onreadystatechange = function(){

if(xhr.readyState === 4 && xhr.status === 200){

console.log(xhr.responseText);

}

};

xhr.send(null);

//同步请求

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost:3000/data', false);

xhr.send(null);

if(xhr.readyState === 4 && xhr.status === 200){

console.log(xhr.responseText);

```