JS Ajax请求的五个步骤

随着互联网技术的发展，Ajax已经成为了现代Web应用程序的基石，在现代Web开发中有着广泛的应用。AJAX技术是异步的JavaScript和XML技术的缩写，其基本思想是利用JavaScript脚本通过XMLHttpRequest对象发起HTTP请求，从而更新Web页面的部分内容，而不需要刷新整个页面。

一、创建XMLHttpRequest对象

XMLHttpRequest对象是一个核心对象，是AJAX实现的基础，用于在不刷新页面的情况下从服务器获取数据和更新网页内容。创建XMLHttpRequest对象有两种方法：


var xhr = new XMLHttpRequest();  // 创建xhr对象的方式一
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); // 创建xhr对象的方式二，IE浏览器下

可以看到，创建xhr对象的方式一是标准的方法，能够适用于几乎所有现代浏览器，而方式二是IE浏览器特有的方法。

二、发送请求

通过open()方法设置请求的参数，如请求类型、请求地址、请求是否异步。通过send()方法向服务器发送请求。


xhr.open('get', "example.php", true);
xhr.send(null);

如果请求需要附带参数，可以在send()方法中传入参数字符串。如：


xhr.open('post', 'example.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=Tom&age=18');

需要注意的是，如果请求使用了post方法，那么在请求发送之前需要设置请求头（Content-Type），请求头要设置成application/x-www-form-urlencoded，表示请求参数的格式是form表单格式。

三、接收响应

在send()方法发送请求后，服务器会对请求做出响应，使用readyState属性来监测服务器响应的状态：

0: 表示未初始化，send()方法还没有被调用
1: 表示正在加载，send()方法已经被调用，HTTP请求已经发送到服务器
2: 表示已加载完成，HTTP请求已经发送完毕，但是服务器还没有响应
3: 表示正在交互，收到了部分响应数据
4: 表示完成，收到了全部响应数据

在readyState值为4（即请求完成）时，通过status属性获取HTTP响应的状态码。HTTP状态码是Web服务器响应HTTP请求时发送的3位数字代码，用于表示网络请求的状态，常见的状态码有200、404、500等。


xhr.onreadystatechange = function(){
    if(xhr.readyState==4 && xhr.status==200){
        console.log(xhr.responseText);
    }
}

四、处理响应

响应主体可以是文本、XML、JSON等格式，根据服务器返回的内容类型不一样，可以选择使用对应的解析方式。

如果响应类型是text，则可以使用responseText属性来获得响应的文本内容。如果响应类型是JSON，则可以使用JSON.parse()方法将响应文本解析成JSON对象，如：


xhr.onreadystatechange = function(){
    if(xhr.readyState==4 && xhr.status==200 && xhr.responseText){
        var response = JSON.parse(xhr.responseText);
        console.log(response.name);
    }
}

五、处理错误

在请求过程中可能会出现错误，如网络问题、服务器故障等。要正确处理这些错误，可以使用onerror事件捕获错误信息，如：


xhr.onerror = function(error){
    console.log('An error occurred:', error);
}

当发生错误时，该函数会输出错误信息。

完整示例代码


var xhr = new XMLHttpRequest();
xhr.open('get', "example.php", true);
xhr.onreadystatechange = function(){
    if(xhr.readyState==4 && xhr.status==200 && xhr.responseText){
        var response = JSON.parse(xhr.responseText);
        console.log(response.name);
    }
};
xhr.onerror = function(error){
    console.log('An error occurred:', error);
};
xhr.send(null);

以上就是AJAX请求的五个步骤，通过这些步骤可以轻松实现页面异步更新，提升网站的用户体验。