Ajax 实战

2年前 阅读 159 评论 0 赞 0

Ajax 实战

本章为你提供了一个清晰的 Ajax 操作的具体步骤。

Ajax 操作步骤

  • 触发一个客户端事件。
  • 创建一个 XMLHttpRequest 对象。
  • 配置 XMLHttpRequest 对象。
  • 使用 XMLHttpRequest 对象创建一个到 Web 服务器的异步请求。
  • Web 服务器返回包含 XML 文档的结果。
  • XMLHttpRequest 对象调用 callback() 函数处理结果。
  • 更新 HTML DOM。

让我们一个接一个理解这些步骤。

触发客户端事件

  • JavaScript 函数作为事件结果被调用。
  • 比如:JavaScript 函数 validateUserId() 被映射为 id 为 "userid" 的表单输入字段的 onkeyup 事件的事件处理程序。
  • <input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">

创建 XMLHttpRequest 对象

  1. var AjaxRequest; // 缓存 XMLHttpRequest 对象
  2. function AjaxFunction(){
  3. try{
  4. // Opera 8.0+, Firefox, Safari
  5. AjaxRequest = new XMLHttpRequest();
  6. }catch (e){
  7. // IE 浏览器
  8. try{
  9. AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  10. }catch (e) {
  11. try{
  12. AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  13. }catch (e){
  14. // 错误处理
  15. alert("Your browser broke!");
  16. return false;
  17. }
  18. }
  19. }
  20. }

配置 XMLHttpRequest 对象

在这个步骤中,我们将会编写一个将由客户端事件触发的函数,然后注册一个 processRequest() 回调函数。

  1. function validateUserId() {
  2. AjaxFunction();
  3. // 这里的 processRequest() 就是回调函数
  4. AjaxRequest.onreadystatechange = processRequest;
  5. if (!target) target = document.getElementById("userid");
  6. var url = "validate?id=" + escape(target.value);
  7. AjaxRequest.open("GET", url, true);
  8. AjaxRequest.send(null);
  9. }

发起到服务器的异步请求

上面的代码是有效的。加粗的代码负责发起一个到 Web 服务器的请求。这是使用 XMLHttpRequest 对象 AjaxRequest 做到的。

  1. function validateUserId() {
  2. AjaxFunction();
  3. // 这里的 processRequest() 就是回调函数
  4. AjaxRequest.onreadystatechange = processRequest;
  5. __if (!target) target = document.getElementById("userid");__
  6. __var url = "validate?id=" + escape(target.value);__
  7. __AjaxRequest.open("GET", url, true);__
  8. __AjaxRequest.send(null);__
  9. }

假设我们在 userid 输入框中输入 Zara,那么在上面的请求中,URL 会被设置为 “validate?id=Zara”。

Web 服务器返回包含 XML 文档的结果

我们可以使用任意语言实现服务端脚本,但是它应该包含如下逻辑。

  • 从客户端获取请求。
  • 解析来自客户端的输入信息。
  • 做必要的处理。
  • 将输出信息发送到客户端。

我们假设你要编写一个 servlet 程序,下面是这段程序代码。

  1. public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
  2. String targetId = request.getParameter("id");
  3. if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
  4. response.setContentType("text/xml");
  5. response.setHeader("Cache-Control", "no-cache");
  6. response.getWriter().write("true");
  7. } else {
  8. response.setContentType("text/xml");
  9. response.setHeader("Cache-Control", "no-cache");
  10. response.getWriter().write("false");
  11. }
  12. }

被调用的回调函数 processRequest()

XMLHttpRequest 对象被配置为当 XMLHttpRequest 对象的 readyState 状态发生变化时调用 processRequest() 函数。这个函数接受从服务端返回的结果然后做必要的处理。正如下面的示例所示,它基于从 Web 服务器返回的值将消息变量设置为 true 或 false。

  1. function processRequest() {
  2. if (req.readyState == 4) {
  3. if (req.status == 200) {
  4. var message = ...;
  5. ...
  6. }

更新 HTML DOM

这是最后一步,在这一步中我们的 HTML 页面会被更新。它发生在以下方式中:

  • JavaScript 使用 DOM API 获取页面任意元素的引用。
  • 获取一个元素引用推荐的方式就是调用
  1. document.getElementById("userIdMessage"),
  2. // 这里 "userIdMessage" 就是 HTML 文档中某个元素的 ID 属性
  • 然后 JavaScript 可以用来修改元素的属性;修改元素的样式属性,或者添加,移除或修改元素的子元素。这里有一个例子:
  1. <script type="text/javascript">
  2. <!--
  3. function setMessageUsingDOM(message) {
  4. var userMessageElement = document.getElementById("userIdMessage");
  5. var messageText;
  6. if (message == "false") {
  7. userMessageElement.style.color = "red";
  8. messageText = "Invalid User Id";
  9. }
  10. else
  11. {
  12. userMessageElement.style.color = "green";
  13. messageText = "Valid User Id";
  14. }
  15. var messageBody = document.createTextNode(messageText);
  16. // 如果 messageBody 元素已经创建了,则简单的替换它,否则插入一个新的元素。
  17. if (userMessageElement.childNodes[0]) {
  18. userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
  19. }
  20. else
  21. {
  22. userMessageElement.appendChild(messageBody);
  23. }
  24. }
  25. -->
  26. </script>
  27. <body>
  28. <div id="userIdMessage"><div>
  29. </body>

如果理解了上述 7 步,差不多就完成 Ajax 了。下一章中,我们会看到更详细的 XMLHttpRequest 对象。

你的支持将鼓励作者继续创作

评论(0)

(无)