• 理解AJAX工作原理 构建网站的有效方法(6)


    处理响应

    现在要面对服务器的响应了。现在只要知道两点:

    什么也不要做,直到 xmlHttp.readyState 属性的值等于 4。

    服务器将把响应填充到 xmlHttp.responseText 属性中。

    其中的第一点,即就绪状态,将在下一篇文章中详细讨论,您将进一步了解 HTTP 请求的阶段,可能比您设想的还多。现在只要检查一个特定的值(4)就可以了(下一期文章中还有更多的值要介绍)。第二点,使用 xmlHttp.responseText 属性获得服务器的响应,这很简单。清单 6 中的示例方法可供服务器根据 清单 5 中发送的数据调用。

    清单 6. 处理服务器响应

    function updatePage() {
      if (xmlHttp.readyState == 4) {
        var response = xmlHttp.responseText;
        document.getElementById("zipCode").value = response;
      }
    }

    这些代码同样既不难也不复杂。它等待服务器调用,如果是就绪状态,则使用服务器返回的值(这里是用户输入的城市和州的 ZIP 编码)设置另一个表单字段的值。于是包含 ZIP 编码的 zipCode 字段突然出现了,而用户没有按任何按钮!这就是前面所说的桌面应用程序的感觉。快速响应、动态感受等等,这些都只因为有了小小的一段 Ajax 代码。

    细心的读者可能注意到 zipCode 是一个普通的文本字段。一旦服务器返回 ZIP 编码,updatePage() 方法就用城市/州的 ZIP 编码设置那个字段的值,用户就可以改写该值。这样做有两个原因:保持例子简单,说明有时候可能希望 用户能够修改服务器返回的数据。要记住这两点,它们对于好的用户界面设计来说很重要。

    连接 Web 表单

    还有什么呢?实际上没有多少了。一个 JavaScript 方法捕捉用户输入表单的信息并将其发送到服务器,另一个 JavaScript 方法监听和处理响应,并在响应返回时设置字段的值。所有这些实际上都依赖于调用 第一个 JavaScript 方法,它启动了整个过程。最明显的办法是在 HTML 表单中增加一个按钮,但这是 2001 年的办法,您不这样认为吗?还是像 清单 7 这样利用 JavaScript 技术吧。

    清单 7. 启动一个 Ajax 过程

    <form>
    <p>City: <input type="text" name="city" id="city" size="25" 
           onChange="callServer();" /></p>
    <p>State: <input type="text" name="state" id="state" size="25" 
           onChange="callServer();" /></p>
    <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
    </form>

    如果感觉这像是一段相当普通的代码,那就对了,正是如此!当用户在 city 或 state 字段中输入新的值时,callServer() 方法就被触发,于是 Ajax 开始运行了。有点儿明白怎么回事了吧?好,就是如此!

    结束语

    现在您可能已经准备开始编写第一个 Ajax 应用程序了,至少也希望认真读一下 参考资料 中的那些文章了吧?但可以首先从这些应用程序如何工作的基本概念开始,对 XMLHttpRequest 对象有基本的了解。在下一期文章中,您将掌握这个对象,学会如何处理 JavaScript 和服务器的通信、如何使用 HTML 表单以及如何获得 DOM 句柄。

    现在先花点儿时间考虑考虑 Ajax 应用程序有多么强大。设想一下,当单击按钮、输入一个字段、从组合框中选择一个选项或者用鼠标在屏幕上拖动时,Web 表单能够立刻作出响应会是什么情形。想一想异步 究竟意味着什么,想一想 JavaScript 代码运行而且不等待 服务器对它的请求作出响应。会遇到什么样的问题?会进入什么样的领域?考虑到这种新的方法,编程的时候应如何改变表单的设计?

    如果在这些问题上花一点儿时间,与简单地剪切/粘贴某些代码到您根本不理解的应用程序中相比,收益会更多。在下一期文章中,我们将把这些概念付诸实践,详细介绍使应用程序按照这种方式工作所需要的代码。因此,现在先享受一下 Ajax 所带来的可能性吧。

    本人声明: 个人主页:沐海(http://www.cnblogs.com/mahaisong) 以上文章都是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言或加我QQ!欢迎交流!
  • 相关阅读:
    二、项目和框架矩阵
    一、PowerDesigner概述(系统分析与建模)
    Visual Studio Code 常用插件整理
    IntelliJ IDEA 显示行号
    IntelliJ IDEA 常用快捷键
    MyEclipse中常用的快捷键
    使用Oracle数据库,对某个表频繁更新
    更改MyEclipse中的src目录的浏览方式
    nginx最大并发连接数的思考:worker_processes、worker_connections、worker_rlimit_nofile
    Nginx性能优化
  • 原文地址:https://www.cnblogs.com/mahaisong/p/2016981.html
Copyright © 2020-2023  润新知