一、 Ajax介绍
1、什么是Ajax？
Ajax，即\"Asynchronous JavaScript and XML\"（异步 JavaScript 和 XML），是一种创建快速动态网页的「Web 网络开发技术」。它使用可以通过`XMLHttpRequest`对象发送请求的异步 JavaScript 和 Extensible Markup Language（XML）来更新部分网页的内容，而不必刷新整个页面。Ajax 可以让网页实现异步加载，让用户体验更加良好、更流畅。
2、Ajax一般有哪几部分组成？
Ajax 一般有以下几部分组成：① HTML 和 CSS 用于排版和样式；② JavaScript 来实现动态交互和数据处理；③ XMLHttpRequest 对象用于和服务器交换及存取数据；④ DOM数据需要更新的内容
二、Ajax实例
1、获取XML文档数据
以下是一个使用XMLHttpRequest请求文档信息的 Ajax 实例：
```
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
httpRequest.open('GET', 'doc.xml', true);
httpRequest.send(null);
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// alert(httpRequest.responseXML);
}
};
```
2、从服务器获取数据
以下是一个使用XMLHttpRequest从服务器获取数据的 Ajax 实例：
```
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
httpRequest.open('GET', ‘data.txt’, true);
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
alert(httpRequest.responseText);
}
};
httpRequest.send(null);
```
3、进行表单提交
以下是一个使用XMLHttpRequest进行表单提交的 Ajax 实例：
```
var Data = new FormData();
Data.append(‘name’, ‘username’);
Data.append(‘pass’, ‘password’);
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
httpRequest.open('POST', ‘submit.php’, true);
httpRequest.send(Data);
```
4、发送JSON数据
以下是一个使用XMLHttpRequest发送 JSON 数据的 Ajax 实例：
```
//JavaScript object
var data = {\"username\": \"admin\", \"password\": \"admin\"};
// Converting JSON Formet data Into String
var data_str = JSON.stringify(data);
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
httpRequest.open('POST', ‘submit.php’, true);
httpRequest.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
httpRequest.send(data_str);
（一）AJAX简介
AJAX（Asynchronous JavaScript and XML）指的是一种创建交互式网页应用的网页开发技术。它是一种用于在浏览器和服务器之间进行异步通信的技术。它使得页面可以实现局部刷新，让网页不必再整个重新加载，极大地提高了用户体验。
（二）Ajax 原理
AJAX 的实现原理十分简单：当用户操作网页时，浏览器就会发送一个 AJAX 请求到服务器，服务器会响应该请求，将服务器上的数据发送到浏览器，然后浏览器更新网页，并显示更新后的页面。
（三）Ajax 实例
1. 用户注册页面：当用户填写完信息后，AJAX 就会使用这些信息发送一个请求到服务器，检查用户输入的信息是否正确，服务器会以 JSON 形式返回相关信息，再由浏览器更新网页，并显示出错提示。
2. 聊天室： 当用户在聊天室发送消息时，AJAX 会将该消息发送到服务器，服务器如果返回的结果是成功的，那么浏览器就会立即更新页面以显示最新的消息。
3. 购物车： 用户在购物网站上购买了一件商品，AJAX 使用这些数据发送请求到服务器，并将更新后的商品总价及数量返回浏览器，浏览器接收到响应后，就会更新网页，并显示最新结果值。
4. 滚动加载：在浏览新闻网站时看到了图片新闻，当用户滚动页面时，AJAX 会将滚动条位置及其他和页面视口相关的参数发送到服务器，服务器会以 JSON 或者其他图片信息返回给浏览器，再将更新后的图片信息显示到页面上。