训练函数 ajax - Javascript

在Web开发中，处理异步请求是非常常见的需求。Ajax（Asynchronous JavaScript And XML）是一种在不刷新整个页面的情况下更新部分页面的技术。在客户端使用Ajax发送HTTP请求，然后在接收到服务器响应之后，JavaScript通常会使用DOM操作来更新页面。

Ajax请求的基本格式

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 请求完成并成功
        console.log(this.responseText);
    }
};
xhttp.open("GET", "example.php", true);
xhttp.send();

首先创建一个新的XMLHttpRequest对象，然后使用onreadystatechange属性来指定一个回调函数，当XMLHttpRequest对象接收到服务器响应时，将自动调用该函数。使用open()方法来指定请求的类型（GET或POST）、URL和是否异步。最后使用send()方法来发送请求。

同步和异步请求

Ajax请求可以是同步或异步的。在同步请求中，脚本会暂停执行直到请求完成响应。在异步请求中，脚本不会暂停执行，而是在请求发送后继续执行，响应返回时再执行回调函数。

// 异步请求
xhttp.open("GET", "example.php", true);
xhttp.send();

// 同步请求
xhttp.open("GET", "example.php", false);
xhttp.send();

发送POST请求

使用POST方法向服务器发送请求时，数据包含在请求正文中。

xhttp.open("POST", "example.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=John&age=20");

使用setRequestHeader()方法来设置请求头，send()方法的参数包含数据。

处理服务器响应

可以使用XMLHttpRequest对象的responseText或responseXML属性来获取服务器响应。

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText); // 获取响应文本
        console.log(this.responseXML); // 获取响应XML
    }
};

错误处理

在发送请求时可能会发生错误，可以使用onerror属性来处理这些错误。

xhttp.onerror = function() {
    console.error("请求错误");
};

JSON

在Web应用程序中，JSON（JavaScript Object Notation）已成为广泛使用的数据格式之一。在JavaScript中可以很容易地将JSON字符串转换为对象或将对象转换为JSON字符串。

// 将对象转换为JSON字符串
var obj = { "name": "John", "age": 20 };
var json = JSON.stringify(obj);

// 将JSON字符串转换为对象
var json = '{ "name": "John", "age": 20 }';
var obj = JSON.parse(json);

总结

Ajax功能是现代Web应用程序不可或缺的一部分，它允许在不刷新整个页面的情况下更新部分页面。JavaScript内置XMLHttpRequest对象使得发送异步请求变得容易，它也提供了处理服务器响应和错误的方法。JSON是一种使用JavaScript语法的轻量级数据交换格式，被广泛使用来传递数据。