JavaScript原生Ajax|极客笔记

JavaScript原生Ajax

在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种通过在后台与服务器进行少量数据交换，实现无需刷新整个页面的技术。使用Ajax可以使网页实现异步数据交换，提高用户体验。而JavaScript原生的Ajax就是在不依赖第三方库的情况下，使用JavaScript语言来实现Ajax功能。

XMLHttpRequest对象

在JavaScript中，可以使用XMLHttpRequest对象来实现Ajax的功能。XMLHttpRequest对象用于在后台与服务器进行数据交换。通过XMLHttpRequest对象，可以向服务器发送请求并接收响应。

创建XMLHttpRequest对象

下面是创建XMLHttpRequest对象的代码：

var xhr = new XMLHttpRequest();

发送请求

通过XMLHttpRequest对象的open()和send()方法，可以向服务器发送请求。下面是一个发送GET请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

接收响应

XMLHttpRequest对象的onreadystatechange属性可以指定一个回调函数，当服务器响应状态发生变化时，该回调函数会被调用。通过XMLHttpRequest对象的responseText属性可以获取服务器返回的数据。

下面是一个接收响应的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error('请求失败');
        }
    }
};

发送POST请求

除了发送GET请求，也可以发送POST请求。使用POST请求时，需要设置请求头的Content-Type为application/x-www-form-urlencoded，并且在send()方法传入要发送的数据。

下面是一个发送POST请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=30');

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error('请求失败');
        }
    }
};

错误处理

在使用Ajax时，需要对可能出现的错误进行处理，保证用户体验。可以通过XMLHttpRequest对象的onerror属性来指定错误处理函数。

下面是一个错误处理的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error('请求失败');
        }
    }
};

xhr.onerror = function() {
    console.error('网络错误');
};

跨域请求

在跨域请求时，需要在服务器端设置CORS（Cross-Origin Resource Sharing）标头，以允许跨域请求。在发送跨域请求时，需要设置XMLHttpRequest对象的withCredentials属性为true。

下面是一个跨域请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.withCredentials = true;
xhr.send();

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error('请求失败');
        }
    }
};