Ajax入门实例
2010-02-21 10:42
393 查看
最近研究了一下Ajax,越看越有趣。Ajax其实就是JavaScript+DOM+CSS+XMLHttpRequest的结合体。前三个实现了 DHTML(动态HTML),再加上XMLHttpRequest后,就成了Ajax。说Ajax 改变了用户的浏览体验,我觉得其实就是Ajax让用户能够在网页上执行连续不间断的操作,就和使用CS程序一样。之所以能够连续不断操作,是因为Ajax是异步的,用Ajax与后台通信,不会打断用户的操作(比如刷新界面等)。真的很不错。昨天从CSDN上看到一个用Ajax技术实现的网络操作系统Ajax13,进去试了一把,爽!
下面是我刚学习Ajax做的一个程序:登录验证
用户输入用户名和密码后到服务器验证,之后返回结果,如果验证失败,就弹出对话框提示,否则就跳转到其他页面。
1.页面
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
< form name ="myform" action ="login.do" method ="post" onSubmit ="return check()" >
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
Name: < input type =text id ="usr" name ="usr" >< br >
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
Password: < input type =password id ="pwd" name ="pwd" >< br >
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
< input type =submit />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</ form >
2.JavaScript
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
< script type = " text/javascript " >
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var xmlRequest = null ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var READY_STATE_UNLOAD = 0 ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var READY_STATE_LOADING = 1 ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var READY_STATE_LOADED = 2 ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var READY_STATE_INTERACTIVE = 3 ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var READY_STATE_COMPLATE = 4 ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
// 获取XMLHttpRequest对象
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
function getXMLHttpRequest() {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if (window.XMLHttpRequest) ... {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
return new XMLHttpRequest();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
} else ... {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
return new ActiveXObject( " Microsoft.XMLHTTP " );
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
function check() {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 获得用户输入的用户名和密码
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var params = " usr= " + document.getElementById( " usr " ).value + " &pwd= " + document.getElementById( " pwd " ).value;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
sendRequest( " login " , params, " get " );
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
return false ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
// 发送请求
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
function sendRequest(url, params, method) {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if ( ! method) ... {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
method = " post " ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
... ... ...
//获得XMLHttpRequest对象
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
xmlRequest = getXMLHttpRequest();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if (xmlRequest) ... {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 设置回调函数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
xmlRequest.onreadystatechange = callBack;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 打开连接
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
xmlRequest.open(method, url, true );
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
xmlRequest.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded " );
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 设置参数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
xmlRequest.send(params);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
// 回调函数
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
function callBack() {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var ready = xmlRequest.readyState;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var data = null ;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if (ready == READY_STATE_COMPLATE) ... {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
data = xmlRequest.responseXML;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 获得返回结果
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var flag = data.getElementsByTagName( " flag " )[ 0 ].firstChild.nodeValue;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if (flag == " false " ) ... {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
alert( ' 用户名或密码错误!请重新输入! ' );
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
} else ... {
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 打开新窗口
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
window.open( " ok " , " _top " );
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</ script > ...
执行的过程是这样的:
Step1:获得XMLHttpRequest对象
Step2:设置请求URL,参数,回调函数
Step3:将请求发送给服务器
Step4:服务器返回结果,回调函数用来处理返回结果
下面是执行的结果:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/tangshuo/%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C.bmp)
相关文章推荐
- AJAX 入门视频之 Ext 2.0.1 Grid 增删改 & DWR 1 实例
- AJAX基础入门实例教程(含代码)
- jquery_ajax 入门实例
- 简单 简洁 Ajax 实例 入门
- AJAX实例:XHR的入门
- ajax 入门实例
- AJAX入门必读与实例(仿google的拖动)[Code]
- AJAX技术简介及入门实例
- ajax实例入门代码
- 原生AJAX入门讲解(含实例)
- 案例4-3 Ajax的响应处理简单实例(征服Ajax——Web 2.0快速入门与项目实践Java)
- [AJAX]:入门小实例,走进AJAX
- AJAX 简介及入门实例
- 【转载】AJAX技术简介及入门实例
- AJAX技术简介及入门实例
- AJAX实例入门
- AJAX实例入门
- Ajax入门实例(ASP+AJAX)
- ajax 入门经典实例