本篇文章给大家分享的是有关Ajax有哪些操作步骤，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联建站服务项目包括樟树网站建设、樟树网站制作、樟树网页制作以及樟树网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，樟树网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到樟树省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
首先我们来总结一下Ajax的操作步骤，然后在详细介绍一下每步具体是如何操作的。
1、调用客户端事件
2、创建XMLHttpRequest对象
3、配置XMLHttpRequest对象。
4、XMLHttpRequest对象向Web服务器发出异步请求。
5、Web服务器返回包含XML文档的结果。
6、XMLHttpRequest对象调用callback（）函数并处理结果。
7、更新HTML DOM。
下面我们来一步步实现这些步骤实现Ajax的操作。
调用客户端事件
JavaScript函数作为事件的结果被调用。
示例 ：
说明：
JavaScript函数validateUserId（）作为事件处理程序映射到输入表单字段上的onkeyup事件，其id设置为“userid”。
创建XMLHttpRequest对象
var ajaxRequest; // 使Ajax成为可能的变量！
function ajaxFunction() {
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer浏览器
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser broke!");
return false;
}
}
}}配置XMLHttpRequest对象
在这一步中，我们将编写一个将由客户端事件触发的函数，并将注册一个回调函数processRequest（）。
function validateUserId() {
ajaxFunction();
// 这里的processRequest（）是回调函数。
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}对Web服务器进行异步请求
源代码可在上面的代码中找到。以粗体字体编写的代码负责向Web服务器发出请求。这都是使用XMLHttpRequest对象ajaxRequest完成的。
function validateUserId() {
ajaxFunction();
// 这里的processRequest（）是回调函数。
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id = " + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}假设在用户ID框中输入了“Zara”，然后在上述请求中，URL将会设置为“validate？id = Zara”。
Webserver返回包含XML文档的结果
可以使用任何语言实现服务器端脚本，但其逻辑应如下所示。
1、从客户端获取请求。
2、解析客户端的输入。
3、需要处理。
4、将输出发送到客户端。
如果我们假设你要编写一个servlet，那么这是一段代码。
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("true");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("false");
}
}回调函数调用processRequest（）
XMLHttpRequest对象配置为在XMLHttpRequest对象的readyState状态发生更改时调用processRequest（）函数。现在，此函数将从服务器接收结果，并将执行所需的处理。如下例所示，它根据Webserver的返回值设置变量消息的true或false。
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}更新HTML DOM
这是最后一步，在此步骤中，HTML页面将会更新。它会以下列方式来发生：
1、JavaScript使用DOM API获取对页面中任何元素的引用。
2、获取元素来引用的推荐方法是调用。
document.getElementById("userIdMessage"),3、现在可以使用JavaScript来修改元素的属性、 修改元素的样式属性、 或添加，删除或修改子元素。
举一个例子：
js代码：
html代码：
