Ajax简介和使用

1.Ajax简介

Ajax (Asynchronous JavaScript and XML 阿贾克斯)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax之父Jesse James Garrett于2005年提出这一新概念 由于Google公司在Google地图、Google建议、Gmail等产品中对Ajax的成功运用，使得web浏览器的潜力被大大挖掘了出来，从而Ajax越来越受到关注并流行起来。

 

Ajax的关键技术： 使用CSS构建用户界面样式，负责页面排版和美工

                              使用DOM进行动态显示和交互，对页面进行局部修改

                              使用XMLHttpRequest异步获取数据

                              使用JavaScript将所有元素绑定在一起

                                                                                                   

Ajax的最大特点：异步访问，局部刷新

2.Ajax方案与传统方案比较

传统方案：提交表单，服务器端处理，错误后跳转到注册页面，同时显示错误信息。返回客户端的使用整个注册页面。

缺点：较大的网络流量，用户体验不好 。

方案2：使用Ajax方案。 用户名的确认和用户书写其他表单项可以同时进行；返回客户端的至少错误信息；

优点：较小的网络流量，用户体验好。

3.Ajax执行流程

第一步：创建XMLHttpRequest对象

不同浏览器创建方式不同

可以提取为方法供调用

function createXMLHttpRequest(){
if(window.ActiveXObject){//IE
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{ //其他浏览器
	xhr =  new XMLHttpRequest();
}
}

第二步：建立到服务器的连接

xmlHttp.open("GET",“exmp1.jsp",true);

xmlHttp.open(“POST,“exmp1.jsp");

xmlHttp.open("GET", "examp1.jsp?"+new Date().getTime(),true);

使用 XMLHttpRequest 对象的 open() 方法来建立请求。参数如下：

request-type：发送请求的类型。典型的值是 GET 或 POST。

url：要连接的 URL asynch：如果希望使用异步连接则为 true，否则为 false。默认为 true。

username：如果需要身份验证，则可以在此指定用户名。

password：如果需要身份验证，则可以在此指定口令。

通常使用其中的前三个参数或前两个参数即可。

第三步：指定回调函数 Ajax响应回来后自动调用函数

             不同的Ajax请求基本步骤相同，差别和难易主要在回调函数

function process(){
if(xhr.readyState == 4){//200  404  500
if(xhr.status == 200){
//得到返回的结果
var result = xhr.responseText;
//写到指定位置
document.getElementById("namemsg").innerHTML=result;
}else{
          alert("Ajax请求错误");
}
}
}

HTTP就绪状态，表示请求的状态或情形。在Ajax应用程序中需要了解五种就绪状态,但通常只使用状态4：

0：请求没有发出（在调用 open() 之前）

1：请求已经建立但还没有发出（调用 send() 之前）

2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）

3：请求已经处理，响应中有部分数据可用，但是服务器还没有完成响应

4：响应已完成，可以访问服务器响应并使用它

状态码status

200

404

返回结果数据

responseText

responseXML

 

[注]：Ajax的开发有些繁琐，现在有很多成的Ajax框架封装诸多细节，使的Ajax编程更加容易。但是Ajax的细节还是要掌握。 XMLHttpRequest对象是Ajax应用的核心

属性

readyState：提供当前 HTML 的就绪状态

status：服务器响应的状态代码

responseText/responseXML：服务器返回的请求响应文本/XML

方法

open()：建立到服务器的新请求

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

setRequestHeader(）设定请求头信息

事件

onreadystatechange:用于指定回调函数

注意事项：

（1）服务端web组件可以是JSP、Servlet或者Struts2的Action等

（2）使用Ajax访问就不需要使用转发和重定向