Ajax核心概念的神秘面纱(6)

Ranaground0

Ranaground0

2016-02-19 14:11

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的Ajax核心概念的神秘面纱(6),希望大家看完后能赶快学习起来。
处理响应
  
  现在要面对服务器的响应了。现在只要知道两点:
  
  什么也不要做,直到xmlHttp.readyState属性的值等于4。
  
  服务器将把响应填充到xmlHttp.responseText属性中。
  
  其中的第一点,即就绪状态,将在下一篇文章中详细讨论,您将进一步了解HTTP请求的阶段,可能比您设想的还多。现在只要检查一个特定的值(4)就可以了(下一期文章中还有更多的值要介绍)。第二点,使用xmlHttp.responseText属性获得服务器的响应,这很简单。清单6中的示例方法可供服务器根据清单5中发送的数据调用。
  
  清单6.处理服务器响应
  
  functionupdatePage(){
  
  if(xmlHttp.readyState==4){
  
  varresponse=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
  
  pCity:inputtype="text"name="city"id="city"size="25"
  
  onChange="callServer();"//p
  
  pState:inputtype="text"name="state"id="state"size="25"
  
  onChange="callServer();"//p
  
  pZipCode:inputtype="text"name="zipCode"id="city"size="5"//p
  
  /form
  
  如果感觉这像是一段相当普通的代码,那就对了,正是如此!当用户在city或state字段中输入新的值时,callServer()方法就被触发,于是Ajax开始运行了。有点儿明白怎么回事了吧?好,就是如此!
  
  结束语
  
  现在您可能已经准备开始编写第一个Ajax应用程序了,至少也希望认真读一下参考资料中的那些文章了吧?但可以首先从这些应用程序如何工作的基本概念开始,对XMLHttpRequest对象有基本的了解。在下一期文章中,您将掌握这个对象,学会如何处理JavaScript和服务器的通信、如何使用HTML表单以及如何获得DOM句柄。
  
  现在先花点儿时间考虑考虑Ajax应用程序有多么强大。设想一下,当单击按钮、输入一个字段、从组合框中选择一个选项或者用鼠标在屏幕上拖动时,Web表单能够立刻作出响应会是什么情形。想一想异步究竟意味着什么,想一想JavaScript代码运行而且不等待服务器对它的请求作出响应。会遇到什么样的问题?会进入什么样的领域?考虑到这种新的方法,编程的时候应如何改变表单的设计?
  
  如果在这些问题上花一点儿时间,与简单地剪切/粘贴某些代码到您根本不理解的应用程序中相比,收益会更多。在下一期文章中,我们将把这些概念付诸实践,详细介绍使应用程序按照这种方式工作所需要的代码。因此,现在先享受一下Ajax所带来的可能性吧。
  
展开更多 50%)
分享

猜你喜欢

Ajax核心概念的神秘面纱(6)

Web开发
Ajax核心概念的神秘面纱(6)

Ajax核心概念的神秘面纱(4)

Web开发
Ajax核心概念的神秘面纱(4)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Ajax核心概念的神秘面纱(1)

Web开发
Ajax核心概念的神秘面纱(1)

Ajax核心概念的神秘面纱(2)

Web开发
Ajax核心概念的神秘面纱(2)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax核心概念的神秘面纱(5)

Web开发
Ajax核心概念的神秘面纱(5)

Ajax核心概念的神秘面纱(3)

Web开发
Ajax核心概念的神秘面纱(3)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Ajax responseText 的一点阐述

Ajax responseText 的一点阐述

利用C#远程存取Access数据库

利用C#远程存取Access数据库
下拉加载更多内容 ↓