Ajax入门

来源：互联网发布：云计算技术应用编辑：程序博客网时间：2024/05/16 07:44

Ajax(Asynchronous JavaScript and XML)是一种创建互动式网页应用的网页开发技术。根据Ajax提出者Jesse James Garrett建议，它：

使用XHTML+CSS来表示资讯；
使用JavaScript操作DOM（Document Object Model）进行动态显示及互动；
使用XML和XSLT进行资料交换及相关操作；
使用XMLHttpRequest物件与Web伺服器进行非同步资料交换；
使用JavaScript将所有的東西连接在一起。
使用SOAP以XML的格式来传送方法名和方法参数。

Ajax利用JavaScript操作DOM达到无刷新更改页面数据，让程序web程序接近桌面应用程序，提升客户体验。其主要利用了浏览器的内置对象—XMLHttpRequest。

下面是一个简单的Ajax例子，用来测试用户名是否被占用,整个过程中页面无刷新。（以下工程以J2EE为例，代码仅为关键部分，不包括全部）

Jsp页面(利用XMLHttpRequest）提交用户名到servlet
servlet验证用户名是否被占用,然后将结果返回到Jsp页面
Jsp页面显示验证结果

1 login.jsp页面

.warning{

border: #efd78b 1px solid;

width:300px;

height:20px;

background-color:#fffce3;

font-size:12px;

padding-left:15px;

line-height:19px;

color:#f00;

display:none;

}

</style>

<div id="used" class="warning">用户名已被占用!</div>

<div id="unused" class="warning">用户名可以使用!</div>

<div>

请输入用户名:<input type="text" name="loginName" id="loginName">

</div>

2 ajax.js文件

//声明XMLHttpRequest全局变量

var oXmlHttpRequest=null;

/**

* 创建XMLHttpRequest对象

* @return {} XMLHttpRequest对象

function createXMLHttpRequest(){

if(typeof XMLHttpRequest != "undefined"){

// 非IE浏览器

return new XMLHttpRequest();

}else{

// IE浏览器有其自己的ActiveXObject对象

if (window.ActiveXObject) {

var aVersion = ["MSXML2.XMLHttp.6.0",

"MSXML2.XMLHttp.5.0",

"MSXML2.XMLHttp.4.0",

"MSXML2.XMLHttp.3.0",

"MSXML2.XMLHttp",

"Microsoft.XMLHttp"];

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

try {

var oXmlHttp = new ActiveXObject(aVersion[i]);

return oXmlHttp;

}

catch (ex) {

}

throw new Error("XMLHttp can't be created!");

}

/**

* 验证用户名是否被占用

* @param {} textBoxId 需要验证的数据

function check(textBoxId){

//得到页面文本框中的数据

var value = document.getElementById(textBoxId).value;

//要提交给服务器的请求数据串

var queryString = "operate=checkLoginName&loginName="+value;

/********************** 无刷新提交请求的主要步骤 BEGIN **********/

//1.创建XMLHttpRequest

oXmlHttpRequest = createXMLHttpRequest();

//2.设置回调函数

/**

* XmlHttpRequest

* @argument readyState XMLHttpRequest对象把一个HTTP请求

* 发送到服务器时将经历若干种状态，状态值从0~4

* @argument status 这个status属性描述了HTTP状态代码。

* 仅当readyState值为3(正在接收中)或4(已加载)时，这个属性才可用。

* @event onreadystatechange 无论readyState值何时发生改变，

* XMLHttpRequest对象都会激发这个事件

oXmlHttpRequest.onreadystatechange=function(){

//readyState==4时,说明服务器做出的响应已经加载

if(oXmlHttpRequest.readyState == 4){

//HTTP状态值200,请求成功

if(oXmlHttpRequest.status == 200){

callBack();//调用业务

}

};

//3.初始化XMLHttpRequest组件

oXmlHttpRequest.open("GET","LoginServ.do?"+queryString);

//4.发送请求

oXmlHttpRequest.send();

/********************** 无刷新提交请求的主要步骤 END ************/

}

/**

* 回调函数,当服务器返回响应的时候,调用该函数处理结果

function callBack(){

// 客户端接收到的HTTP响应的文本内容

var result = oXmlHttpRequest.responseText;

// jsp页面的信息提示层(用户名已占用)

var oDivUsed = document.getElementById("used");

oDivUsed.style.display = "none";

// jsp页面的信息提示层(用户名可以使用)

var oDivUnused = document.getElementById("unused");

oDivUnused.style.display = "none";

// 根据返回结果,显示用户名是否占用的提示信息

if(result.indexOf("true") != -1){

oDivUsed.style.display = "block";

}else{

oDivUnused.style.display = "block";

}

3 servlet.java文件(doGet方法中的代码)

PrintWriter out = response.getWriter();

//得到需要执行的业务名称

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

//检查用户名

if(operate.equals("checkLoginName")){

//得到提交的用户名

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

boolean result = false;

if(loginName.equals("admin")){

result = true;

}

out.print(result);

}

这写文件编写完之后,配置到服务器上运行，就可以体验到Ajax带来的提交数据无刷新更改页面的效果了。

原理 :

1、当页面调用check(textBoxId)函数时,调用createXMLHttpRequest()函数来创建XMLHttpRequest对象。

2、为XMLHttpRequest对象的onreadystatechange事件设置回调函数。

3、然后XMLHttpRequest对象调用其open()方法进行初始化。

4、初始化完成后，XMLHttpRequest调用其send()方法将请求发送，同时ReadyState属性值开始从1变化至4，每当ReadyState之变化时就会引发onreadystatechange事件，我们就在被引发的这个事件中设置回调函数callBack()来控制页面元素的显示和隐藏。

5、在onreadystatechange事件中我们判断ReadyState属性的值，当其为4时说明服务器响应已经加载成功。

6、然后判断status属性的值，这个值是HTTP状态值，当它为200时，说明没有错误，响应成功。

7、调用callBank()函数。

8、responseText属性里存放的是返回的文本信息，我们可以根据此信息进行相关的操作，例如显示或隐藏某些页面元素。

注：有关于XMLHttpRequest对象，具体请参阅其他文档，本文不予详细介绍。