Ajax入门实例

最近研究了一下Ajax，越看越有趣。Ajax其实就是JavaScript+DOM+CSS+XMLHttpRequest的结合体。前三个实现了 DHTML（动态HTML），再加上XMLHttpRequest后，就成了Ajax。说Ajax 改变了用户的浏览体验，我觉得其实就是Ajax让用户能够在网页上执行连续不间断的操作，就和使用CS程序一样。之所以能够连续不断操作，是因为Ajax是异步的，用Ajax与后台通信，不会打断用户的操作（比如刷新界面等）。真的很不错。昨天从CSDN上看到一个用Ajax技术实现的网络操作系统Ajax13，进去试了一把，爽！

下面是我刚学习Ajax做的一个程序：登录验证

用户输入用户名和密码后到服务器验证，之后返回结果，如果验证失败，就弹出对话框提示，否则就跳转到其他页面。

1.页面


< form name ="myform" action ="login.do" method ="post" onSubmit ="return check()" >


Name: < input type =text id ="usr" name ="usr" >< br >


Password: < input type =password id ="pwd" name ="pwd" >< br >




< input type =submit />


</ form >

2.JavaScript


< script type = " text/javascript " >


var xmlRequest = null ;


var READY_STATE_UNLOAD = 0 ;


var READY_STATE_LOADING = 1 ;


var READY_STATE_LOADED = 2 ;


var READY_STATE_INTERACTIVE = 3 ;


var READY_STATE_COMPLATE = 4 ;




// 获取XMLHttpRequest对象




function getXMLHttpRequest() {




if (window.XMLHttpRequest) ... {


return new XMLHttpRequest();




} else ... {


return new ActiveXObject( " Microsoft.XMLHTTP " );


}


}






function check() {


// 获得用户输入的用户名和密码


var params = " usr= " + document.getElementById( " usr " ).value + " &pwd= " + document.getElementById( " pwd " ).value;




sendRequest( " login " , params, " get " );




return false ;


}




// 发送请求




function sendRequest(url, params, method) {




if ( ! method) ... {


method = " post " ;


}


... ... ...
//获得XMLHttpRequest对象


xmlRequest = getXMLHttpRequest();




if (xmlRequest) ... {


// 设置回调函数


xmlRequest.onreadystatechange = callBack;




// 打开连接


xmlRequest.open(method, url, true );


xmlRequest.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded " );


// 设置参数


xmlRequest.send(params);


}




}




// 回调函数




function callBack() {


var ready = xmlRequest.readyState;


var data = null ;






if (ready == READY_STATE_COMPLATE) ... {


data = xmlRequest.responseXML;




// 获得返回结果


var flag = data.getElementsByTagName( " flag " )[ 0 ].firstChild.nodeValue;






if (flag == " false " ) ... {


alert( ' 用户名或密码错误！请重新输入！ ' );




} else ... {


// 打开新窗口


window.open( " ok " , " _top " );


}


}


}




</ script > ...

执行的过程是这样的：

Step1：获得XMLHttpRequest对象

Step2：设置请求URL，参数，回调函数

Step3：将请求发送给服务器

Step4：服务器返回结果，回调函数用来处理返回结果

下面是执行的结果：