ajax请求的五个步骤
ajax请求的五个步骤是:1、创建XMLHttpRequest对象;2、配置XMLHttpRequest 对象;3、发出异步请求;4、返回包含 XML 文档的结果;5、调用processRequest() 函数。最后就可以更新您的HTML页面了。
1、创建XMLHttpRequest对象
XMLHttpRequest 对象已创建。
var ajaxRequest; // The variable that makes Ajax possible!
function ajaxFunction() {
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
}
2、配置XMLHttpRequest 对象
在这一步中,我们将编写一个由客户端事件触发的函数,并注册一个回调函数 processRequest()。
function validateUserId() {
ajaxFunction();
// Here processRequest() is the callback function.
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
3、发出异步请求
上面的代码中提供了源代码。用粗体字编写的代码负责向Web服务器发出请求。这一切都是使用 XMLHttpRequest 对象ajaxRequest完成的。
假设你在userid框中输入了Zara,那么在上面的请求中,URL设置为“validate?id = Zara”。
function validateUserId() {
ajaxFunction();
// Here processRequest() is the callback function.
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id = " + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
4、返回包含 XML 文档的结果
你可以用任何语言实现你的服务器端脚本,但是它的逻辑应该如下。
- 从客户端获取请求。
- 解析来自客户端的输入。
- 进行必要的处理。
- 将输出发送到客户端。
假设要编写一个 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("<valid>true</valid>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}
5、调用processRequest() 函数
XMLHttpRequest 对象被配置为在XMLHttpRequest对象的readyState发生状态更改时调用 processRequest() 函数。现在此函数将从服务器接收结果并进行所需的处理。如下例所示,它根据来自 Web 服务器的返回值将变量消息设置为 true 或 false。
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}
最后别忘了更新您的 HTML 页面,可以使用:
- JavaScript 使用 DOM API 获取对页面中任何元素的引用。
- 获得对元素的引用的推荐方法是调用。
拓展阅读
4种常用的Ajax请求方式
$.ajax()返回其创建的 XMLHttpRequest 对象
$.ajax() 只有一个参数:参数key/value对象,包含各配置及回调函数信息。如果你指定了dataType选项,那么需要保证服务器返回正确的MIME信息,(如 xml 返回 “text/xml”)。
通过远程 HTTP GET 请求载入信息
相比于复杂的$.ajax而言,GET请求功能则显得更加简单,请求成功时可调用回调函数。当然如果需要在出错时执行函数,那么还请使用$.ajax。
通过远程 HTTP POST 请求载入信息
POST请求功能也相对比较简单,请求成功时可调用回调函数。如果需要在出错时执行函数,那么请使用$.ajax请求。
通过 HTTP GET 请求载入 JSON 数据