AJAX应用笔记(1)

1.AJAX（Asynchronous JavaScript and XML）定义
  AJAX的核心是JS对象XMLHttpRequest.
  AJAX其实是多种技术的综合，包括Javascript,XHTML和CSS,DOM,XML和XSTL,XMLHttpRequest。其中：使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。在AJAX提出之前，业界对于上述技术都只是单独的使用，没有综合使用，也是由于之前的技术需求所决定的。随着应用的广泛，AJAX也成为香饽饽了。

  AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

2.AJAX的缺陷
   AJAX不是完美的技术。使用AJAX，它的一些缺陷不得不权衡一下：

   AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

    AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

    对流媒体的支持没有FLASH、Java Applet好。一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

3.核心对象XMLHttpRequest

    XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

    IE5.0开始，开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似，方法和属性类似，只是部分属性不同。

XMLHttpRequest对象初始化：
XMLHttpRequest对象的方法：

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	作为字符串返回完整的headers
getResponseHeader("headerLabel")	作为字符串返回单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])	设置未决的请求的目标 URL，方法，和其他参数
send(content)	发送请求
setRequestHeader("label", "value")	设置header并和请求一起发送

XMLHttpRequest对象的属性：

属性	描述
onreadystatechange	状态改变的事件触发器
readyState	对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
responseText	服务器进程返回数据的文本版本
responseXML	服务器进程返回数据的兼容DOM的XML文档对象
status	服务器返回的状态码, 如：404 = "文件未找到" 、200 ="成功"
statusText	服务器返回的状态文本信息

4.AJAX框架基础

   AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程也是：对象初始化->发送请求->服务器接收->服务器返回->户端接收->修改客户端页面内容。只不过这个过程是异步的。

   (1)实例化XMLHttpRequest 并兼容浏览器

    初始化对象并发出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");

     }

     有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息。
http_request = new XMLHttpRequest();

http_request.overrideMimeType('text/xml');

  (2)指定响应处理函数

   接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：
http_request.onreadystatechange = processRequest;
需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如：
http_request.onreadystatechange = function( ) { //(4)处理服务器返回的信息 }; (3)发送HTTP请求

 

  发出HTTP请求指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

http_request.open('GET', 'http://www.example.org/some.file', true);

http_request.send(null);

   open的第一个参数是HTTP请求的方法，为Get、Post或者Head。

   第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。

    第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。

    按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。不过，跟form一样，如果要传文件给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：

    http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

(4)处理服务器返回的信息

   a.定义指定的响应处理函数( processRequest).

   b.检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：

  if (http_request.readyState == 4) {

    // 信息已经返回，可以开始处理

  } else {

    // 信息还没有返回，等待

  }

服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。

if (http_request.status == 200) {

    // 页面正常，可以开始处理信息

} else {

    // 页面有问题

}

XMLHttpRequest对成功返回的信息有两种处理方式：

responseText：将传回的信息当字符串使用；

responseXML：将传回的信息当XML文档使用，可以用DOM处理。

<base href="&lt;%=basePath%&gt;&lt;/base&gt;">--------------</base>

备注:一切源于网络,个人资料积木.

 

使用TOMCAT的数据源方式

数据库为SQL SERVER的 Northwind中的Customers表

index.jsp ,easy.jsp

---存储过程- test_get_customer----

create procedure test_get_customer @id nchar(5)
as
begin
 select * from Customers where CustomerID = @id
end

GO

 5.简单实例