原生js的ajax代码—js 原生ajax

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换，实现网页无需刷新即可更新部分内容。Ajax的核心是XMLHttpRequest对象，它可以在不重新加载整个网页的情况下向服务器发送请求并接收响应。

原生Ajax的基本用法

使用原生Ajax，我们需要创建一个XMLHttpRequest对象，然后通过该对象发送请求并处理响应。下面是一个基本的原生Ajax代码示例：

“`javascript

var xhr = new XMLHttpRequest();

xhr.open(‘GET’, ‘ true);

xhr.onreadystatechange = function() {

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

var response = JSON.parse(xhr.responseText);

// 处理响应数据

}

};

xhr.send();

上述代码中，我们创建了一个XMLHttpRequest对象，并使用`open`方法指定了请求的方法（GET）、URL（
发送POST请求
除了GET请求，我们还可以发送POST请求来向服务器提交数据。下面是一个发送POST请求的原生Ajax代码示例：
```javascript
var xhr = new XMLHttpRequest();
xhr.open('POST', ' true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // 处理响应数据
    }
};
var data = {
    name: 'John',
    age: 25
};xhr.send(JSON.stringify(data));

在这个示例中，我们使用`open`方法指定了请求的方法（POST）和URL（

处理响应数据

在原生Ajax中，我们可以通过`responseText`属性获取服务器返回的文本数据，通过`responseXML`属性获取服务器返回的XML数据。如果服务器返回的是JSON数据，我们可以使用`JSON.parse`方法将其转换为JavaScript对象。下面是一个处理响应数据的原生Ajax代码示例：

“`javascript

var xhr = new XMLHttpRequest();

xhr.open(‘GET’, ‘ true);

xhr.onreadystatechange = function() {

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

var response = JSON.parse(xhr.responseText);

// 处理响应数据

var name = response.name;

var age = response.age;

console.log(name, age);

}

};

xhr.send();

在这个示例中，我们通过`JSON.parse`方法将服务器返回的JSON字符串转换为JavaScript对象，并从中提取出name和age属性的值。
处理错误和超时
在使用原生Ajax时，我们还需要考虑错误处理和超时的情况。可以通过监听`onerror`和`ontimeout`事件来处理相应的错误和超时情况。下面是一个处理错误和超时的原生Ajax代码示例：
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', ' true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            // 处理响应数据
        } else {
            console.log('请求错误');
        }
    }
};
xhr.onerror = function() {
    console.log('网络错误');
};
xhr.ontimeout = function() {
    console.log('请求超时');
};
xhr.timeout = 5000; // 设置超时时间为5秒xhr.send();

在这个示例中，我们通过监听`onerror`事件处理网络错误，通过监听`ontimeout`事件处理请求超时。我们还可以通过`timeout`属性设置超时时间。

跨域请求

原生Ajax默认只能发送同域的请求，但我们可以通过设置服务器响应头的Access-Control-Allow-Origin字段来实现跨域请求。下面是一个跨域请求的原生Ajax代码示例：

“`javascript

var xhr = new XMLHttpRequest();

xhr.open(‘GET’, ‘ true);

xhr.onreadystatechange = function() {

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

var response = JSON.parse(xhr.responseText);

// 处理响应数据

}

};

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

xhr.withCredentials = true; // 允许发送跨域请求时携带cookie

xhr.send();

在这个示例中，我们通过设置`setRequestHeader`方法来允许跨域请求，并通过`withCredentials`属性允许发送跨域请求时携带cookie。
取消请求
在某些情况下，我们可能需要取消正在进行的Ajax请求。可以通过调用XMLHttpRequest对象的`abort`方法来取消请求。下面是一个取消请求的原生Ajax代码示例：
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', ' true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // 处理响应数据
    }
};
xhr.send();
// 取消请求xhr.abort();

在这个示例中，我们先发送了一个Ajax请求，然后通过调用`abort`方法来取消该请求。

通过原生Ajax，我们可以实现网页的异步更新和数据交互。使用原生Ajax，我们需要创建XMLHttpRequest对象，发送请求并处理响应。我们还可以发送POST请求、处理响应数据、处理错误和超时、实现跨域请求以及取消请求等。原生Ajax提供了强大而灵活的功能，是实现动态网页的重要工具。