📅  最后修改于: 2020-10-28 04:35:16             🧑  作者: Mango
本章为您清晰介绍了AJAX操作的确切步骤。
让我们一步一步地采取这些步骤。
事件的结果称为JavaScript函数。
示例-validateUserId() JavaScript函数作为事件处理程序映射到ID设置为“ userid”的输入表单字段上的onkeyup事件
。
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;
}
}
}
}
在此步骤中,我们将编写一个将由客户端事件触发的函数,并将注册一个回调函数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);
}
上面的代码中提供了源代码。用黑体字写的代码负责向Web服务器发出请求。全部使用XMLHttpRequest对象ajaxRequest完成。
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);
}
假设您在用户ID框中输入Zara,然后在上述请求中,URL设置为“ validate?id = Zara”。
您可以使用任何语言来实现服务器端脚本,但是其逻辑应如下。
如果我们假设您要编写一个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 ");
}
}
XMLHttpRequest对象被配置为在XMLHttpRequest对象的readyState发生状态更改时调用processRequest()函数。现在,此函数将从服务器接收结果并执行所需的处理。如下例所示,它根据Web服务器返回的值将变量消息设置为true或false。
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}
这是最后一步,在此步骤中,您的HTML页面将被更新。它以以下方式发生-
document.getElementById("userIdMessage"),
// where "userIdMessage" is the ID attribute
// of an element appearing in the HTML document
现在可以使用JavaScript修改元素的属性。修改元素的样式属性;或添加,删除或修改子元素。这是一个例子-
如果您已了解上述七个步骤,那么您几乎可以使用AJAX了。在下一章中,我们将更详细地介绍XMLHttpRequest对象。