ajax 的工作原理 2017

AJAX（异步 JavaScript 和 XML）是一种能够实现异步通信并更新 Web 内容而无需重新加载整个网页的技术。它通过在后台与服务器交换数据来实现页面内容的动态更新。 AJAX的工作原理是通过JavaScript与服务器进行异步通信，实现数据传输和页面更新，提高用户体验和网页加载速度。

可以通过一个常见的例子来说明AJAX的工作原理。假设一个在线购物网站需要在用户选择商品后实时显示购物车中的商品数量。传统的方法是在用户单击“添加到购物车”按钮后重新加载整个页面来更新购物车中的商品数量。使用AJAX的方法是在用户点击按钮后通过异步请求将数据发送到服务器。服务器返回更新后的数据，然后通过JavaScript更新页面中的购物车数量，而无需重新加载整个页面。

AJAX的实现主要依靠XMLHttpRequest对象（XHR）来实现与服务器的数据交换。 XMLHttpRequest是浏览器提供的内置对象，可以通过JavaScript创建。以下是使用 XHR 对象发送 GET 请求的示例：

var xhr = new XMLHttpRequest();
m.smtshopping.cn('GET', 'http://m.smtshopping.cn/api/data', true);
xhr.onreadystatechange = 函数(){
if(xhr.readyState === 4 && xhr.status === 200){
var 响应 = xhr.responseText;
// 这里处理服务器返回的数据
}
};
xhr.send();

上面的例子中，首先创建了一个XMLHttpRequest对象（XHR），然后使用open方法指定请求的类型（GET）、URL以及是否异步。然后，通过onreadystatechange属性指定服务器返回数据后触发的回调函数。在回调函数中，可以使用responseText属性来获取服务器返回的数据并进行处理。

除了GET请求之外，AJAX还支持其他类型的请求，例如POST请求。以下是使用 XHR 对象发送 POST 请求的示例：

var xhr = new XMLHttpRequest();
m.smtshopping.cn('POST', 'http://m.smtshopping.cn/api/data', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = 函数(){
if(xhr.readyState === 4 && xhr.status === 200){
var 响应 = xhr.responseText;
// 这里处理服务器返回的数据
}
};
xhr.send('name=John&age=25');

上例中，通过setRequestHeader方法设置HTTP请求头的Content-Type字段，并指定请求体的数据格式为form -urlencoded。然后，使用send方法将请求体数据发送到服务器。

AJAX的工作原理是通过异步通信来实现的，即浏览器发送请求后，并不等待服务器返回数据，而是继续执行后续代码。当服务器返回数据时，触发XMLHttpRequest对象的回调函数，然后通过操作DOM或更新页面内容来实现动态页面更新。

总之，AJAX通过在后台与服务器交换数据来实现页面内容的动态更新，提高用户体验和网页加载速度。其工作原理是通过JavaScript与服务器进行异步通信，实现数据传输和页面更新。通过使用XMLHttpRequest对象，您可以轻松地发送各种类型的HTTP请求并处理服务器返回的数据。