1Ajax的简单

1了解Ajax
目前编写应用程序时有两种基本的选择：
桌面应用程序
Web应用程
桌面应用程序通常安装到您的计算机上，桌面应用可以使用互联网下载更新，但运行这些程序的代码在桌面脚手上。Web应用程序运行在某处的Web服务器上，要通过Web浏览器来访问这种应用程序。
不过，比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面应用一般很宽，具有漂亮的用户界面和非凡的动态性。可以单击，选择，输入，打开菜单，基本上不需要等待。另一方面，Web应用程序是最新的潮流，它们提供了在桌面上不能实现的服务。但是伴随着Web的强大而出现的是等待，等待服务器相应，等待屏幕刷新，等待请求返回和生成新的页面。


Ajax尝试建立桌面应用程序的功能和交互性，与不断更新的Web应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在Web应用程序中。Ajax将笨拙的Web界面转化成迅速相应的Ajax应用程序。


Ajax实际上涉及到多种技术，要灵活的运用它必须深入了解这些不同的技术。下面是Ajax应用程序所用到的基本技术：
html，用于建立Web表单并确定应用程序其他部分使用的字段。
javascript，是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。
Dhtml和Dynamic Html用于动态更新表单。我们将使用div，span和其他动态html元素来标记Html。
文档对象模型Dom用于处理Html结构和服务器返回的XML。


2XMLHtmlRequest对象
AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。AJAX中的"A"代表了"异步"，Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些JavaScript代码由JavaScript 代码捕获表单数据并向服务器发送请求而不是直接发送给服务器。然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。


XMLHttpRequest是一个 JavaScript 对象，创建该对象很简单。如：
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>


3加入一些 JavaScript
得到 XMLHttpRequest 的句柄后，其他的 JavaScript 代码就非常简单了。事实上，我们将使用 JavaScript 代码完成非常基本的任务：
·获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。 
·修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。 
·解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM（请参阅 下一节），处理 HTML 表单服务器返回的 XML 数据的结构。 


对于前两点，需要非常熟悉 getElementById()方法


对于不同的浏览器，获取XMLHttpRequest对象有着不同的的方法。
为了用JavaScript向服务器发送一个HTTP请求, 需要一个具备这种功能的类实例. 这样的类首先由Internet Explorer以ActiveX对象引入, 被称为XMLHTTP. 后来Mozilla, Safari 和其他浏览器纷纷仿效, 提供了XMLHttpRequest类,它支持微软的ActiveX对象所提供的方法和属性. 


使用IE
IE使用MSXML解析器处理xml，因此如果编写Ajax应用程序要和IE打交道，那么必须用一种特殊的方式创建对象。但是并不是这么简单，根据IE中安装的javascript技术版本不同，MSXML实际上有两种不同的版本，因此必须对这两种情况分别编写代码。以下就是在Microsoft浏览器上创建XMLHttpRequest对象：
var xmlHttp = false;
if (window.ActiveXObject) { // IE
            try {
//尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Msxml2.XMLHTTP)
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
//如果失败尝试使用较老版本的 Microsoft 兼容的对象（Microsoft.XMLHTTP）。 
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
该代码就是尝试使用一个版本的MSXML创建对象，如果失败则使用另一个版本创建该对象。如果都不成功，则将xmlHttp变量设为false。


处理Mozilla和非IE浏览器
如果选择的浏览器不是IE或非Microsoft浏览器编写代码，就需要使用不同的代码。如下
if (window.XMLHttpRequest) { // Mozilla, Safari,...
            xmlHttp = new XMLHttpRequest();
            if (xmlHttp.overrideMimeType) {
                xmlHttp.overrideMimeType('text/xml');
            }
        }
这行代码在Mozilla，Firefox，Opera以及基本上所有的以任何形式或方式支持Ajax的非IE浏览器中创建了XMLHttpRequest对象。


下面是以多种浏览器的方式创建 XMLHttpRequest 对象
    var http_request = false;
        if (window.XMLHttpRequest) { //非IE
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                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) {}
            }
        }
//如果创建失败给出提示。
        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }


如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作. 为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header. 
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');


4Ajax世界中的请求和响应
发出请求
在创建完XMLhttpRequest对象后，接下来就是在所有Ajax应用程序中基本都雷同的流程：
从Web表单中获取需要的数据。
建立要连接的URL
打开到服务器的连接
设置服务器在完成后要运行的函数。
发送请求
例如：这是一个Ajax发出请求的实例。
function callServer(){
//从表表单中获取city和state的值
var city=document.getElementById("city").value;
var state=document.getElementById("state").value;
//只有在它们的值都不为空值或空字符时继续执行
if((city==null)||(city=="")) return;
if((state==null)||(state=="")) return;
//建立URL的连接
var url="test.jsp?city="+escape(city)+"&state="+escape(state);
//打开到服务器的连接
xmlHttp.open("GET",url,true);
//设置服务器在完成后要运行的函数
xmlHttp.onreadystatechange=updatePage;
//发送请求
xmlHttp.send(null);
}
xmlHttp是XMLHttpRequest对象的实例。它的open()方法用于打开服务器的连接，该方法有三个参数跟别指定了连接方法(GET)和要连接的URL。最后一个参数设为true，那么将请求一个异步连接(这就是Ajax的由来)，服务器在后台处理请求的时候用户仍然可以使用表单。;如果使用false，那么代码代码发出请求后将等待服务器的响应。


XMLHttpRequest对象的onreadystatechange属性可以告诉服务器在运行完成后做什么。在这个实例中，如果服务器处理完请求，一个特殊的名为updatePage()的方法将会被触发。


使用值null调用send()，因为已经在请求URL中添加了要发送给服务器的数据(city和state)，所以请求中不需要发送任何数据，这要就发出了请求，服务器按照您的要求工作。如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可。send()函数的参数是key=value值对。后台通过request.getParameter("key")开获得key的值。


处理响应
现在要面对服务器的响应了，现在只要知道两点：
什么都不要做，直到xmlHttp.readyState属性的值等于4
服务器将把响应填充到xmlHttp.responseText属性中。


XMLHttpRequest对象的readyState属性值列表。
0,描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。(在调用open()之前)
1,描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。(在调用open()之后,send()之前)
2,描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3,描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4,描述一种"已加载"状态；此时，响应已经被完全接收。
例如：


XMLHttpRequest对象的responseText属性
这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState 值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当 readyState为4(已加载)时，该responseText包含完整的响应信息。对于 Ajax 编程，需要直接处理的惟一状态就是就绪状态 4，它表示服务器响应已经完成，可以安全地使用响应数据了。


对于responseText中的文本内容，比如格式和长度，有意保持含糊，这样服务器就可以将文本设置成任何内容，比方说一种脚本可以返回逗号分隔的值，另一个则使用管道符(|)分隔的值，还有一种则返回长文本字符串。何去何从由服务器决定。


例如，处理服务器的响应：
//updatePage被服务器调用，先判断是否在状态4，如果是则使用服务器返回的值(这里是用户输出的城市和州的ZIP编码）设置另一个表单那字段的值。
function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}
在上面的例子中，一个javaScript方法捕捉用户输出表单的信息并将其发送到服务器，另一个JavaScript方法坚挺和处理响应，并在相应返回时设置字段的值。这实力上都依赖于调用的第一个JavaScript方法(callServer)，它启动了整个过程。如:
<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>


****************************
XMLHttpRequest对象的方法和属性
标准XMLHttpRequest方法
Abort()。停止当前请求,重新设置请求对象XMLHttpRequest.


getResponseHeader(“header”)，返回指定首部的串值


Open(“method”,”url”)，建立对服务器的调用，method参数可以是GET,POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。


Send(content)，向服务器发送请求


setRequestHeader(“header”,”value”)，把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()


标准XMLHttpRequest属性
Onreadystatechange，每个状态改变时，都会出发这个事件处理器。通常会调用一个JavaScript函数。


readyState，请求的状态。有5个可取值：0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成


responseText，服务器的响应，表示为一个串。


responseXML，服务器的响应，表示为XML，这个对象可以解析为一个DOM对象。


status，服务器的HTTP状态码（200对应正常，404对应Not Found（未找到），受到保护或者禁止访问的 403 和 401 ，405 表示不允许使用诸如发送 HEAD 请求之类不可接受的请求方法，而 407 则表示需要进行代理认证等）


statusText，HTTP状态的相应文本（OK或者Not Found（未找到）等等）


如果你使用多个函数，最后为每个函数都创建并使用一个XMLHttpRequest，而不是在多个函数之间共享相同的对象。
**********************
一个简单的Ajax实例：
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>一个简单的例子</title>
<script type="text/javascript" language="javascript">
    var xmlHttp = false;
function callServer(){
//根据浏览器的不同先创建XMLHttpRequest对象
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            xmlHttp = new XMLHttpRequest();
            if (xmlHttp.overrideMimeType) {
                xmlHttp.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }


        if (!xmlHttp) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }


var city=document.getElementById("city").value;
var state=document.getElementById("state").value;
if((city==null)||(city=="")) return;
if((state==null)||(state=="")) return;
var url="test.jsp?city="+escape(city)+"&state="+escape(state);
//打开到服务器的连接
xmlHttp.open("GET",url,true);
//设置服务器在完成后要运行的函数
xmlHttp.onreadystatechange=updatePage;
//发送请求
xmlHttp.send(null);
}


function updatePage() {
  if (xmlHttp.readyState == 4) {
if (request.status == 200) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").innerText = response;
    alert(xmlHttp.responseText);
 } else
       alert("status is " + request.status);  
}
}


</script>
</head>
<body>
<br>
<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 id="zipCode"></p>
</form>
</body>
</html>