Ajax 相关技术探讨

Ajax与传统web请求的区别

 

前面介绍了ajax的基础知识，下面结合相应实例进一步介绍有关ajax。

当用户在浏览器客户端做出某种操作（增加、删除、修改）后，提交这些操作请求，客户端会发送请求到服务器端，在服务器处理客户请求直到将客户请求返回到客户端的这段时间内，用户只能处于等待状态。

     与传统的Web应用不同，AJAX采用异步交互过程。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。后面会根据具体的代码解释什么是ajax引擎。

Ajax  相关技术

Ajax用到的技术主要有以下几种：其中XMLHttpRequest是核心

◆  XMLHttpRequest

◆  DOM

◆  JDOM&XML

◆  XHTML&CSS

 

XMLHttpRequest

    前面提到了ajax引擎，在介绍ajax引擎之前先介绍一下什么是XMLHttpRequest。

    XMLHttpRequest是XMLHttp组件的对象，而XMLHttp是一套可以在Javascript、Vbscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。

XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript作相应的处理；

    当服务器顺利完成响应用户行为的动作、并将响应数据返回时， DOM提供的系列方法可以将这些响应数据以文本、XML Document对象的方式组装起来，提供给Javascript处理。

   XMLHttpRequest对象的属性和方法

 

    属性

Ø       readyState         返回当前请求的状态；

Ø       responseText       以字符串的形式返回服务器响应信息；

Ø       responseXML        将响应信息格式化XML Document对象返回；

Ø       status             返回当前请求的状态码，404=文件未找到                                         200=“成功”

Ø      onreadystatechange  指定当readyState属性改变时的事件处理              句柄。

 

readyState有0、1、2、3、4五个状态，其中当其值为4时，表示数据接收完毕，此时可以通过response系列方法获取完整的回应数据。

    XMLHttpRequest对象属性onreadystatechange 是readyState状态改变的事件触发器，用来指定当readyState属性发生改变时的处理事件。

方法

    XMLHttpRequest对象提供了包括open和send在内的六种方法，用来向服务器发送http请求，并设置相应头信息。

Ø       abort()              取消当前请求；

Ø       getAllResourceHeader 获取相应的全部http头信息；

Ø       getResourceHeader    从响应信息中获取指定的头信息；

Ø       open          创建一个新的http请求，并指定此请求的方法、URL、以及验证信息；

Ø       send                 发送请求到http服务器并接收回应；

Ø       setRequestHeader    单独设定请求的某个http头

http_request.open(bstrMethod,bstrUrl,varAsync,bstrUser,bstrPassword);

    参数：

bstrMethod:    http方法，可选为POST、GET、PUT等

   bstrUrl:        请求的目标Url地址

   varAsync:       指定该请求是否为异步方式默认为ture

http_request.send(varBody);

参数：

     varBody:        发送给服务器的内容。

 

     send方法的同步或异步方式取决于open方法中的         varAsync参数。

    open方法的第二个参数代表目标请求的URL地址，send方法的参数则是将要发送给服务器的内容。

       如果选用GET方式发送表单内容，则可以将表单内容附着在URL后面作为请求参数；

       如果基于安全考虑使用POST方式发送表单内容，则需要将表单内容作为send方法的参数。

Ajax引擎

    前面讲过，Ajax引擎是由javascript编写的。

 

• 第一步：初始化XMLHttpRequest对象。
•     

http_request = false;                  //开始初始化XMLHttpRequest对象

• if(window.XMLHttpRequest) {    //Mozilla 浏览器
•     http_request = new XMLHttpRequest();
•     if (http_request.overrideMimeType) {         //设置MiME类别
•          http_request.overrideMimeType("text/xml");
•     }
• }
• else if (window.ActiveXObject) {                 // IE浏览器
• try {
•       http_request = new ActiveXObject("Msxml2.XMLHTTP");
•      } catch (e){
•                try{
•           http_request = new ActiveXObject("Microsoft.XMLHTTP");
•            } catch (e){ }
•      }
•    }

第二步  设置XMLHttpRequest对象的onreadystatechange属性，指定服务器返回响应数据时要调用的回调函数，即指定响应处理函数。

 

• if(responseType.toLowerCase()=="text") {
•   http_request.onreadystatechange = callback;
• }
• else if(responseType.toLowerCase()=="xml") {
•   http_request.onreadystatechange = callback;
• }

第三步 调用XMLHttpRequest对象的open  方法，创建http请求。

第四步 调用XMLHttpRequest对象的setResouceHeader等方法，设置必要的http请求头信息。

 

• if(method.toLowerCase()=="get") {
•    http_request.open(method, url, true);
• }
• else if(method.toLowerCase()=="post") {
•      http_request.open(method, url, true);
•      http_request.setRequestHeader("Content-       Type","application/x-www-form-     urlencoded");
• }

第五步 调用XMLHttpRequest对象的send方法，发送之前创建http请求。

第六步 根据XMLHttpRequest对象的open方法参数，决定等待或者不等待服务器返回响应数据。如果服务器返回响应数据，则将控制权交给之前设置的回调函数。

 

•  http_request.send(content);

 

       上述步骤实现了发送请求准备，对于服务器响应的数据在发送XMLHttpRequest请求时即为他指定了回调函数，在回调函数中应该首先判断http请求的状态，之后再做响应的处理；否则在服务器接收http请求到返回响应数据这一段时间内，回调函数会多次执行。回调函数应该以下列顺序执行事务。

第一步  判断http请求的状态，并作相应处理。

      

        if (http_request.readyState == 4)

           if (http_request.status == 200)

 

第二步  调用XMLHttpRequest对象的responseXML或者  responseText方法，将服务器返回的响应数据赋予   javascript变量或者对象。

 

       var doc = http_request.responseXML;

 

第三步  使用DOM或者其他方式解析服务器返回的响应数   据，保存在缓存变量或者缓存数组中。

 

        var messageList = doc.getElementsByTagName("message");

 

第四步  使用DOM解析HTML文档，定位目标HTML文档节点。

 

第五步  使用解析完毕的服务器返回的响应数据，更新上一步解析获取的HTML文档节点的属性值或者内容，从而更新HTML文档页面内容。

 

初始化

XMLHttpRequest

指定回

调函数

创建

http请求

设置http

请求头信息

判断http

请求状态

取得服务器返回的响应数据

更新HTML节点属性或内容

解析服务器返回的响应数据

定位目标HTML

文档节点

编写HTML控件的事件触发属性

编写事件处理函数

编写回调函数

回调函数

事件处理函数

发送http请求

    简单的说，Ajax引擎就是用javascript编写，使用XMLHttpRequest对象将客户端请求异步发送到服务器端，并对服务器返回的响应数据进行分派，通过指定回调函数进行处理。至于如何处理，要根据返回的数据是reponseXML还是responseText选择相应函数。

DOM

    DOM是表示文档（如HTML和XML）和访问、操作构成文档各种元素的应用程序接口。

    服务器以XML文档的方式将响应数据返回给客户端，必须经由DOM来解析。

    getElementsByTabName() 返回一个node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序。

XML、JDOM

    XML（可扩展标记语言）是一种允许Web应用程序开发人员创建自定义标记，以便更有效组织和传递内容的语言。

    XML能够用纯文本的形式表现各种复杂的有层次的数据及其之间的相互关系。主要用于数据交换、结构化数据存储与显示等方面。

什么是DTD

    DTD是一套标记的语法规则，其定义了元素、子元素、属性及其取值，规定了用户在DTD关联的XML文档中可以使用什么标记，各个标记出现的顺序及其层次的关系。

 

 

 

<!ELEMENT 书籍 ( 著作+ ) >

<!ELEMENT 著作 ( 书名, 作者*, 出版社, 出版年月, 页数, 价格) >

<!ELEMENT书名 ( #PCDATA ) >

<!ELEMENT作者( 国籍，姓名 ) >

<!ELEMENT出版社  ( #PCDATA ) >

<!ELEMENT出版年月( #PCDATA ) >

<!ELEMENT页数 ( #PCDATA ) >

<!ELEMENT价格 ( #PCDATA ) >

<!ELEMENT国籍 ( #PCDATA ) >

<!ELEMENT姓名 ( #PCDATA ) >

book.dtd

<书籍 xmlns=“book.dtd” xmlns:ref=“book.dtd”>

<著作>

    <书名>ajax教程</书名>

    <作者> tom</作者>

    <出版社>电子工业出版社</出版社>

    <出版年月>2007年</出版年月>

    <页数>500</页数>

    <价格>30</价格>

</著作>

book.xml

book.dtd列出的每条记录与book.xml中的各个元素是对应的。书籍是根节点，著作是书籍的子节点。而著作又有书名, 作者*, 出版社, 出版年月, 页数, 价格子节点…。可见，整个xml文档就是一个树形结构。

    要对xml文档进行相关操作，需要用到相应函数前面介绍的DOM是在客户端将服务器返回的xml格式数据进行解析，并将解析结果显示在浏览器上。

    而在服务器端，客户端传过来的是字符串（ajax只能以字符串的方式传递），如果数据本身包含某种结构，例如在客户端传过来的是上例书籍的信息，这些信息本身包含着书籍的各个属性之间的对应关系。所以需要先将它们之间的对应关系整明白。因此我们可以定义一个书籍类，类中定义书籍的各个属性，以及对这些属性进行相关操作的方法。将传过来的字符串解析成此书籍类对应的一个实例。剩下的工作就是通过某些API函数将它持久化成xml文档或其他格式的文档。在这儿，用JDOM将其进行写入、读取xml文档。

JDOM基于树状结构，用java技术对XML文档实现解析、生成、序列化等多种操作。

生成XML的方式

          ●  类自行序列化成xml方式

            ●  xml与java类邦定方式

            ●  页面模板生成方式

XHTML&CSS

   

       XHTML：用XML重写HTML的标记语言。

       CSS（Cascading Style Sheet）用来控制Web应用程序中HTML/XHTML元素的背景、元素设置、元素矿的样式、对齐方式及文本字体等属性设置。