Ajax

Ajax

AJAX即“AsynchronousJavaScript and XML”（异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术

允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

 

同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个

                        数据包的通讯方式。  
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下

                       个数据包的通讯方式

Ajax的工作原理：

l  Ajax的核心是JavaScript对象XmlHttpRequest。

    该对象在InternetExplorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

 

XMLHttpRequest对象
　　 XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。

XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.

创建XMLHttpRequest对象（由于非标准所以实现方法不统一）

•    Internet Explorer把XMLHttpRequest实现为一个ActiveX对象

•    其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。

•    XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

XMLHttpRequest对象方法：

Abort()  停止当前请求

个tAllResponseHeaders()    把http请求的所有响应首部作为键/值对返回

GetAllResponseHeader(“返回指定首部的串值”);

Open(method,url,async)   规定请求的类型、URL以及是否异步处理请求

Method：请求的类型     get、post

url：文件在服务器上的位置

async:true(异步)或false（同步）

send(content)   向服务器发送请求

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

下面是一个测试用户名唯一性的小实例：

window.onload = function() {

       //第一步：初始化XMLHttpRequest对象

       var xmlHttp = createXMLHttpRequest();

       var btn = document.getElementById("checkBtn");

       btn.onclick = function() {

           var name = document.getElementById("uname");

           xmlHttp.onreadystatechange = function() {

              if (xmlHttp.readyState == 4) {//服务器端已经处理完毕，返回信息

                  if (xmlHttp.status == 200) {//返回的信息是否正确

                     //第六步：客户端接收

                     var msg = xmlHttp.responseText;

                     //第七步：修改页面内容

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

                  }

              }

           }

 

           //第二步：规定请求的参数

           xmlHttp.open("POST", "./exe01Servlet?timeStamp="

                  + new Date().getTime(), true);

           //设置头

           xmlHttp.setRequestHeader("content-type",

                  "application/x-www-form-urlencoded");

           //第三步：发送请求

           xmlHttp.send("name=" + name.value);

 

       }

 

       function createXMLHttpRequest() {

           var xmlHttp;

           try {

              xmlHttp = new XMLHttpRequest();

           } catch (ex) {

              try {

 

                  //IE

                  xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");

              } catch (e) {

                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

              }

 

           }

           return xmlHttp;

       }

 

    }

第四步和第五步位于servlet中

//第四步：服务器接收

       request.setCharacterEncoding("UTF-8");

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

       //第五步：服务器返回

       response.setContentType("text/html;charset=UTF-8");

       PrintWriter out=response.getWriter();

      

       if("aaa".equals(name)){

           out.println("用户名应经存在");

       }else{

           out.println("用户名可以使用");

       }

       out.flush();

       out.close();