Ajax技术深入学习

Ajax技术深入学习     
  一、AJAX   应用到的技术   
   
  AJAX   涉及到的7   项技术中，个人认为Javascript、XMLHttpRequest、DOM、XML   比较有用。   
   
  1、XMLHttpRequest   对象   
  XMLHttpRequest   是XMLHTTP   组件的对象，通过这个对象，AJAX   可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时   
  间。   
  IE5.0   开始，开发人员可以在Web   页面内部使用XMLHTTP   ActiveX   组件扩展自身的功能，不用从当前的Web   页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0   以及NetScape7   则是创建继承XML   的代理类XMLHttpRequest；对于大多数   
  情况，XMLHttpRequest   对象和XMLHTTP   组件很相似，方法和属性类似，只是部分属性不同。   
   
  2、Javascript   
  Javascript   一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。现在，可以通过Javascript   操作XMLHttpRequest，来跟数据库打交道。   
   
  3、DOM   
  DOM（Document   Object   Model）是提供给HTML   和XML   使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM   才可以跟页面进行交互。Web   开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，   
  document   就代表页面对象本身。   
   
  4、XML   
  通过XML（Extensible   Markup   Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML   表述的数据和文档，可以很容易的让所有程序共享。   
   
  二、AJAX   开发框架   
   
  这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest   请求的程序框架。AJAX   实质上也是遵循Request/Server   模式，所以这个框架基本的流程也是：对象初始   
  化􀃆发送请求􀃆服务器接收􀃆服务器返回􀃆客户端接收􀃆修改客户端页面内容。只不过这个过程是异步的。   
   
  1、初始化对象并发出XMLHttpRequest   请求   
  为了让Javascript   可以向服务器发送HTTP   请求，必须使用XMLHttpRequest   对象。使用之前，要先将XMLHttpRequest   对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE   以ActiveX   控件的形式提供，而Mozilla   等浏览器则直接以XMLHttpRequest   类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写：   
   
  代码:   
  if   (window.XMLHttpRequest)   {   //   Mozilla,   Safari,   ...   
  http_request   =   new   XMLHttpRequest();   
  }   else   if   (window.ActiveXObject)   {   //   IE   
  http_request   =   new   ActiveXObject("Microsoft.XMLHTTP");   
  }   
   
  运行:   
    [Ctrl+A   全部选择   Ctrl+F   搜索文本   提示：你可先修改代码，再运行]   
   
   
   
   
  有些版本的Mozilla   浏览器处理服务器返回的未包含XML   mime-type   头部信息的内容时会出错。因此，要确保返回的内容包含text/xml   信息。   
   
   
  --------------------------------------------------------------------------------   
  代码：     
  http_request   =   new   XMLHttpRequest();   
  http_request.overrideMimeType('text/xml');   
   
  运行:   
  [Ctrl+A   全部选择   Ctrl+F   搜索文本   提示：你可先修改代码，再运行]   
  --------------------------------------------------------------------------------   
      
   
   
  2/指定响应处理函数   
  接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest   对象的onreadystatechange   属性就可以了。比如：   
   
   
  --------------------------------------------------------------------------------   
  代码：     
  http_request.onreadystatechange   =   processRequest;   
   
  运行:   
  [Ctrl+A   全部选择   Ctrl+F   搜索文本   提示：你可先修改代码，再运行]   
  --------------------------------------------------------------------------------

需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript   即时定义函数的方式定义响应函数。比如：   
   
   
  --------------------------------------------------------------------------------   
  代码：     
  http_request.onreadystatechange   =   function()   {   
  };   
   
  运行:     
  [Ctrl+A   全部选择   Ctrl+F   搜索文本   提示：你可先修改代码，再运行]   
  --------------------------------------------------------------------------------   
      
   
   
  3、发出HTTP   请求   
  指定响应处理函数之后，   就可以向服务器发出HTTP   请求了。这一步调用XMLHttpRequest   对象的open   和send   方法。   
   
   
  --------------------------------------------------------------------------------   
  代码：     
  http_request.open('GET',   'http://www.example.org/some.file',   true);   
  http_request.send(null);   
   
  运行:   
    [Ctrl+A   全部选择   Ctrl+F   搜索文本   提示：你可先修改代码，再运行]   
  --------------------------------------------------------------------------------   
      
   
  open   的第一个参数是HTTP   请求的方法，为Get、Post   或者Head。   
  open   的第二个参数是目标URL。基于安全考虑，这个URL   只能是同网域的，否则会提示“没有权限”的错误。这个URL   可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL   处理请求XMLHttpRequest   请求则跟处理普通的HTTP   请求一样，比如JSP   可以用request.getParameter(“”)或request.getAttribute(“”)来取得URL   参数值。   
  open   的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。   
  按照顺序，open   调用完毕之后要调用send   方法。send   的参数如果是以Post   方式发出的话，可以是任何想传给服务器的内容。不过，跟form   一样，如果要传文件或者Post   内容给服务器，必须先调用setRequestHeader   方法，修改MIME   类别。如下：   
   
   
  --------------------------------------------------------------------------------   
  代码：     
  http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);   
   
  运行:   
    [Ctrl+A   全部选择   Ctrl+F   搜索文本   提示：你可先修改代码，再运行]   
  --------------------------------------------------------------------------------   
  这时资料则以查询字符串的形式列出，作为sned   的参数，例如：   
   
   
  --------------------------------------------------------------------------------   
  代码：     
  name=value&anothername=othervalue&so=on   
   
    运行:   
  [Ctrl+A   全部选择   Ctrl+F   搜索文本   提示：你可先修改代码，再运行]   
  --------------------------------------------------------------------------------   
      
   
   
  4、处理服务器返回的信息   
  在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。   
   
  首先，它要检查XMLHttpRequest   对象的readyState   值，判断请求目前的状态。参照前文的属性表可以知道，readyState   值为4   的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：   
   
   
  --------------------------------------------------------------------------------   
  代码：     
  if   (http_request.readyState   ==   4)   {   
  //   信息已经返回，可以开始处理   
  }   else   {   
  //   信息还没有返回，等待   
  }   
   
  运行:   
    [Ctrl+A   全部选择   Ctrl+F   搜索文本   提示：你可先修改代码，再运行]