AJAX开发简略

一、AJAX定义
　　Ajax并不是一种新的技术，而是一种新的Web应用开发模型。AJAX（Asynchronous JavaScript and XML）其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。

           使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。

HTML:用来构建Web表单并确定应用程序其它部分使用的元素。

Javascript:Ajax应用程序的核心代码，用来实现与服务器端应用程序的异步交互。

DOM:文档对象模型，用于（使用JavaScript技术）处理HTML结构和服务器返回的XML。

DHTML:用于在客户端动态更新表单的内容及样式(使用CSS)。

二、Ajax编程的基本步骤如下：

1.创建XMLHttpRequest对象

2.从Web页面中获取需要处理的数据

3.打开到服务器的连接

4.设置处理响应数据的JavaScript回调函数

5.发送请求及请求数据

<script type="text/javascript">

      var client = null;

      function validateUserName(userName){

        client = getXMLHttpRequest();

        var requestURL = "${pageContext.request.contextPath}/user/
                  validateUserName.ajax?userName=" + userName;

        client.open("GET", requestURL, true);

        client.onreadystatechange = showMessage;

        client.send(null);

      }

function getXMLHttpRequest(){

        var client = getXMLHttpRequestFromIE();

         if(client == null){

              client = new XMLHttpRequest();

         }

        return client;

     }  

  

      function getXMLHttpRequestFromIE(){

        var namePrefixes = ["Msxml3","Msxml2","Msxml","Microsoft"];

        for(var i = 0; i < namePrefixes.length; i++){

             try{

                 var name = namePrefixes[i] + ".XMLHTTP";

                 return new ActiveXObject(name);

             }catch(e){

             }

        }

        return null;

}

      

         function showMessage(){

        if(client.readyState == 4){

          if(client.status == 200){           

            var result = client.responseText;

            if(result == "inuse"){

              var message = "用户名：";

              message += document.getElementById("userName").value;

              message += "已经被使用！";

              document.getElementById("message").innerHTML = message;

            }

          }else{

            showErrors(client.status);

          }

        }

      }

</script>

三、关于Ajax请求

Ajax请求，即使用XMLHttpRequest对象发送的请求与浏览器发送的请求并没有本质上的区别，都是基于HTTP协议的请求。在HTTP协议中规定了多种请求类型，包括：GET、POST、HEAD、PUT、DELETE等。从应用的角度来讲，比较常用的包括GET请求和POST请求。

GET请求

GET请求的主要用途是从指定的服务器中获取资源。在GET请求中，通常只需指定资源的路径即可。如果请求的是一个动态的资源，比如JSP、PHP、CGI等，可以在请求的路径后面附件查询的参数信息。以便程序可以根据该参数查询更为具体的信息。附件参数的办法如下：

请求的路径?名称1=值1&名称2=值2&名称3=值3…

在服务器端可以使用request.getQueryString()方法返回?后面的整个字符串，也可以使用request.getParameter(名称)返回某个值。

POST请求

POST请求的主要用途是向服务器发送信息。在POST请求中，参数信息并不是通过URL来传递的，而是在请求的主体中，这部分信息用户无法看见并且没有长度的限制。请求主体中的参数的格式一般为：

名称1=值1&名称2=值2&名称3=值3…

需要注意的是，为了通知服务器端请求主体内容为表单中的参数信息，需要调用XMLHttpRequest的方法来设置请求头，否则将无法取到参数。

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

在服务器端可以使用request.getReader()方法以流的形式得到这些信息，也可以使用request.getParameter(名称)返回某个值。

使用GET还是POST

GET请求和POST请求都可以访问服务器端的程序，并且都可以向程序传递信息。一般来讲，没有严格的规定某个请求必须使用GET或POST来完成。

如果考虑到信息的安全性，应该使用POST请求，因为GET请求所发送的信息显示在URL中；如果要发送的信息量比较大，应该使用POST请求，因为GET请求有长度的限制，而POST请求没有；如果要发送非文本内容，比如文件上传等必须使用POST请求。

四、发送Ajax请求

在Ajax应用中，请求的发送是通过XMLHttpRequest对象的open和send方法来协同完成的。通常在open方法中指定请求的类型，在send方法中发送数据。比如，下述代码向服务器发送GET请求：

var client = getXMLHttpRequest();

var url = “/ajax-app/request/get.ajax?name=管理员&grade=1”;

cient.open(“GET”, url, true);

client.send(null);

其中name=管理员&grade=1为请求的参数，send方法的参数为null是因为GET请求的数据都附加到了URL中。要发送POST请求，可以使用如下的代码：

var client = getXMLHttpRequest();

var url = “/ajax-app/request/post.ajax”;

cient.open(“POST”, url, true);

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

client.send(“name=管理员&grade=1”);

在Ajax应用中，请求不是通过浏览器发送的，因此GET请求的参数不会显示到浏览器的地址栏上，开发者不必担心安全的问题。另外处于对本地系统的安全考虑JavaScript不能访问客户端本地的文件等资源，因此不能使用Ajax进行文件的上传。

五、关于请求数据的字符集

如果在请求中包含非iso8859_1字符集中的字符，比如中文字符的话，开发者必须要考虑字符编码转换的问题。在具体处理时，分GET和POST两种情况。

GET请求的参数出现在URL中，需要在服务器端对URL进行字符集的转码处理，这个工作通常通过修改服务器的配置来完成。在Tomcat中，可以在其安装目录的conf下的server.xml中指定，做法如下：

<Connector port="8080" protocol="HTTP/1.1"

               connectionTimeout="20000"

               redirectPort="8443" URIEncoding="GBK"/>

POST请求的参数通过请求的主体来传送，编码转换的方式与GET有所不同。

在获取POST请求的参数之前，只要调用HttpServletRequest对象的setCharacterEncoding(charset)方法进行字符集转换即可。在Ajax请求中，使用的传输字符集为UTF-8，因此我们需要做如下的处理：

request.setCharacterEncoding("utf-8");

String name = request.getParameter("name");

String gender = request.getParameter("gender");

在开发时，我们可以将上述转换代码放在一个Servlet Filter中统一完成。

六、关于请求头和主体信息

在HTTP协议中规定客户端向服务器端发送的信息分为两个部分，请求头和请求的主体。其中主体信息通常是发给服务器端的处理程序处理的数据，这是请求的核心数据部分。而请求头部信息用来传递一些对服务器及处理程序有用的附加信息，比如请求的字符集、客户端的类型等，这有助于服务器及处理程序能更好地处理主体数据。

在Ajax应用中，使用XMLHttpRequest对象可以发送请求头及请求主体信息。头部信息使用它的setRequestHeader(name, value)方法发送。比如：

主体信息可以通过URL的附加参数或通过XMLHttpRequest对象的send方法发送

七、关于Ajax响应

Ajax响应也是HTTP响应，开发者只需注意接收响应内容的客户端不是浏览器而是XMLHttpRequest对象即可。

在HTTP协议中规定服务器向客户端发送的信息分为两个部分，响应头和响应的主体。其中主体信息通常是发给客户端的处理程序处理的数据，这是响应的核心数据部分。而响应头部信息用来传递一些对客户端程序有用的附加信息，比如响应内容的字符集、服务器的类型等，这有助于客户端处理程序能更好地处理主体数据。

如果服务器端采用Servlet技术的话，可以使用HttpServletResponse对象来生成响应。要生成响应头信息，可以使用：

setHeader(String name, String value)

setIntHeader(String name, int value)

setDateHeader(String name, long date)

addHeader(String name, String value)

setIntHeader(String name, int value)

setDateHeader(String name, long date)

在上述方法中，set(Int|Date)Header方法只设置一个值，如果给定名称的响应头已经存在，使用新的值覆盖原来的值；而add(Int|Date)Header方法运行时一个名称和多个值关联。下面的代码用来防止浏览器缓存响应的内容：

response.setHeader(“Cache-Control”, “no-cache”);

response.setHeader(“Pragma”, “no-cache”);

response.setDateHeader(“Expires”, 0);

要响应的主体内容可以使用如下的代码：

PrintWriter out = response.getWriter();

out.print(“内容”);

在Ajax客户端，可以使用XMLHttpRequest的如下方法获取响应头的信息：

•getAllRequestHeaders()

•getRequestHeader(name)

可以使用如下属性获取响应主体的信息：

•responseText

•ResponseXML

八、响应的状态码

服务器端程序可以通过响应的状态码来通知客户端当前请求的处理情况。在HTTP协议中规定了如下一些常用的状态码：

200 – OK，一切顺利。

302 – 请求被重定义。

403 – 请求被禁止。

404 – 请求的资源不存在。

405 – 请求的方法不支持。

500 – 服务器内部错误，通常为程序执行过程中抛出异常。

在Servlet中，可以使用HttpServletResponse对象的setStatus(int code)或sendError(int code)来发送状态码。

当Servlet的服务器方法doGet和doPost运行时抛出异常时，服务器会自动在响应中设置值为500的状态码。

在Ajax客户端可以使用XMLHttpRequest对象的status属性得到响应的状态码的信息.

属性:

Onreadystatechange  function 用来处理响应的客户端函数对象

ReadyState   number   HTTP请求就绪状态值，代表请求的不同阶段

0：请求还没有发出，即调用open之前

1：请求以建立，但还没有发送，即调用send之前

2：请求已经发出，正在处理中

3：请求已经处理，但服务器还没有完成响应

4：请求已经处理完毕，全部响应内容都可用

status   number HTTP响应的状态码

statusText DOMString HTTP响应的状态码的文本描述

responseText   DOMString 以文本格式得到响应的内容

responseXML   Document   以XML格式得到响应的内容，此时响应类型必须为text/xml,application/xml或以xml结尾。

方法:

open(method,url,async)   void   打开请求，并使request对象处于未发送状态。

send(data) void 发送请求和数据到服务器

setRequestHeader(name,value) void 设置HTTP请求头信息，该方法必须在open及send之间调用。

getAllResponseHeaders() DOMString 得到HTTP响应的所有头部信息

getResponseHeader(name) DOMString 得到HTTP响应的某个头部信息。

abort void 终止请求