Javascript原生ajax请求代码实例

下面我会详细讲解“JavaScript原生ajax请求代码实例”的完整攻略。

什么是ajax请求？

Ajax（Asynchronous JavaScript and XML）即异步JavaScript和XML，是指利用JavaScript的异步通信机制达到异步更新网页的技术。通过Ajax技术，实现了网页异步请求数据，而不是同步刷新页面。

发送Ajax请求的步骤

发送一个Ajax请求包含了以下步骤：

1. 创建XMLHttpRequest对象：使用JavaScript创建XMLHttpRequest对象

2. 向服务器发送请求：创建一个服务器请求，使用JavaScript的open()方法和send()方法将请求发送到服务器端。

3. 服务器响应请求：服务器响应请求并返回数据。

4. 更新网页：更新网页html内容。

使用原生JavaScript实现Ajax请求

在JavaScript中，可以使用原生的XMLHttpRequest对象实现Ajax请求。下面是一段简单的Ajax请求代码：

let xhr = new XMLHttpRequest();  
xhr.open('get', 'https://jsonplaceholder.typicode.com/todos/1', true);  
xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4 && xhr.status === 200) {  
        console.log(xhr.responseText);  
    }  
};  
xhr.send(null);

上述代码实现了一个简单的Ajax请求，使用GET方法请求了 https://jsonplaceholder.typicode.com/todos/1 这个网址，并在响应成功后，在控制台打印出了响应内容。具体实现步骤如下：

1. 首先创建一个XMLHttpRequest对象，使用new XMLHttpRequest()语句实现。

2. 使用open()方法填写请求内容，第一个参数为请求方式（GET或POST），第二个参数为请求地址，第三个参数为是否异步。

3. 设置请求头

4. 监听onreadystatechange事件，该事件将在readyState属性值发生变化时触发，表示服务器响应状态已经改变。当readyState等于4且status等于200时表示Ajax请求成功，可以获取响应内容了。

5. 发送请求，使用send()方法发送请求。

以上就是基本的原生JavaScript Ajax请求过程，我们还可以通过配合使用Promise、ES6语法，或者发送JSON数据等方式实现更多功能，下面的部分将通过两个示例说明如何使用原生JavaScript实现更多Ajax请求的功能。

示例1: 实现POST方式的Ajax请求

上文的示例代码只实现了GET方式的Ajax请求，如果需要使用POST方式请求数据，则需要进行以下更改：

let xhr = new XMLHttpRequest();  
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);  
xhr.setRequestHeader('Content-type', 'application/json');  
xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4 && xhr.status === 201) {  
        console.log(xhr.response);  
    }  
};  
let data = JSON.stringify({  
    title: 'foo',  
    body: 'bar',  
    userId: 1  
});  
xhr.send(data);

上述代码实现了一个POST方式的Ajax请求，使用POST方法请求了 https://jsonplaceholder.typicode.com/posts 这个网址，并在响应成功后，在控制台打印出了响应内容。具体实现步骤如下：

1. 创建一个XMLHttpRequest对象，使用new XMLHttpRequest()语句实现。

2. 使用open()方法填写请求内容，第一个参数为请求方式（GET或POST），第二个参数为请求地址，第三个参数为是否异步。

3. 设置请求头，使用setRequestHeader()方法设置请求头信息，请求类型为'Content-type': 'application/json'

4. 监听onreadystatechange事件，该事件将在readyState属性值发生变化时触发，表示服务器响应状态已经改变。当readyState等于4且status等于201时表示Ajax请求成功，可以获取响应内容了。

5. 准备数据，使用JSON.stringify()方法将需要发送的数据序列化为字符串。

6. 发送请求，使用send()方法发送请求。

示例2: Ajax请求异常处理

在Ajax请求中，可能会出现请求失败的情况，例如网络不稳定或者服务器宕机等，为了确保代码的健壮性，需要对Ajax请求的异常情况进行处理。以下是一个简单的Ajax请求异常处理代码：

let xhr = new XMLHttpRequest();  
xhr.open('get', '/api/404', true);  
xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4) {  
        if (xhr.status === 200) {  
            console.log(xhr.responseText);  
        } else {  
            console.error('请求错误，错误代码为：' + xhr.status);  
        }  
    }  
};  
xhr.onerror = function() {  
    console.error('请求错误');  
};  
xhr.send(null);

上述代码使用GET请求访问一个不存在的地址，触发了请求错误。使用onerror事件监听Ajax请求发生错误的情况，并使用console.error()方法输出错误信息。通过这种方式可以确保Ajax请求出错时程序能够正常运行，而不会崩溃。

以上就是用原生JavaScript实现Ajax请求的攻略，通过上述的示例代码，我们能够实现满足不同需求的Ajax请求，并且能够对请求异常进行处理，保证代码的健壮性和可靠性。