1. 理解Ajax：
keywords: HTTP, 同步, Ajax, 异步, JavaScript
a) HTTP协议，同步的，client向server发送请求后需要等待直到server响应；
b) Ajax(Asynchronous JavaScript and XML)实现client和server间的异步：
即client进行操作的时候，背后的JS代表用户与server进行请求和响应的过程,并将相应在页面中进行更新；
2. Ajax技术要素：
keywords: XHTML,CSS,JavaScript,DOM | server端任意(只要能够获取client的请求并能够响应即可)
a)client端首先是一个html页面(包含CSS的)，用户操作的同时(通常是event-driven)，驱动JS(XMLHttpRequest对象)代表用户在后台与server进行交互,并将server的响应反映到html页面中(JS的DOM操作修改内容或CSS操作修改视觉效果)
b)从server端来看,随时等待JS的XMLHttpRequest对象发来的请求，做出逻辑处理後，将响应发送回去；
c)因此需要的技术：
client端，除了XHTML+CSS之外，主要在于JavaScript，其中核心的XMLHttpRequest对象使用很简单，难点在于如何使用JS的强大功能将server端的响应在页面中以DOM修改内容或CSS修改外观的形式展示给用户；(因此JS的功能在这里很重要)。server端，没有什么限制，PHP|Perl|ASP.NET|JSP|Python|Ruby等都差别不大，而且都很类似，根据请求完成逻辑响应，并将响应内容返回client端的JS。3. Ajax应用程序架构：
keywords: .html(.css) .js .php(...)
a)首先是一个html页面，其中有event-driven的js事件响应函数入口；
b)当用户操作的事件驱动了js，js需要
定义并创建一个XMLHttpRequest对象var xmlHttp；
事件响应函数中：对象xmlHttp设置回调函数onreadystatechange(即server端有响应的时候就激发这个函数)；open(请求server端)；send；<这里是核心>回调函数的定义：即对server端的响应进行处理（主要是通过JS对DOM或CSS进行操作进而在页面中有变化）；<这里是难点>c)server端，只需要根据client端js发来的请求，进行逻辑操作(读写数据库，xml处理等)后将响应返回<这一步完成后会触发js的onreadystatechange>
4. Ajax的核心XMLHttpRequest对象其实很简单：
keywords: XMLHttpRequest对象, 属性, 方法
a)属性：
onreadystatechange:保存回调函数句柄;readystate:保存响应的状态,0未初始化;1正在加载;2已加载；3交互中；4完成；status：server的HTTP状态码，200对于OK，404对于Not Found等等；statusText: HTTP状态码的文本(Ok,Not Found等)
responseText:server响应文本格式；
reaponseXML：server响应XML格式，JS当作DOM轻松解析；
b)方法：
open("method", "url", "")
send(content)
setRequestHeader("header","value")
abort()
getAllResponseHeaders()
getResponseHeader("header")
5. Ajax应用程序简例：
a) HTML部分index.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simpleAjax</title>
<scripttype="text/javascript"src="ajax.js"></script>
</head>
<bodyonload='process()'>
Serverwantstoknowyourname:
<inputtype="text"id="name"/>
<divid="serverResponse"/>
</body>
</html>
b)JavaScript部分ajax.js
///////////////////////////////////////////////////
////第一部分：创建一个XMLHttpRequest对象
///////////////////////////////////////////////////
varxmlHttp=createXmlHttpRequestObject();
functioncreateXmlHttpRequestObject()
...{
varxmlHttp;
//ifrunningInternetExplorer
if(window.ActiveXObject)
...{
try
...{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
...{
xmlHttp=false;
}
}
//ifrunningMozillaorotherbrowsers
else
...{
try
...{
xmlHttp=newXMLHttpRequest();
}
catch(e)
...{
xmlHttp=false;
}
}
//returnthecreatedobjectordisplayanerrormessage
if(!xmlHttp)
alert("ErrorcreatingtheXMLHttpRequestobject.");
else
returnxmlHttp;
}
///////////////////////////////////////////////////
////第二部分：HTML页面中event-driven这个JS函数向server异步请求
///////////////////////////////////////////////////
functionprocess()
...{
//proceedonlyifthexmlHttpobjectisn'tbusy（在xmlHttp不忙时处理）
if(xmlHttp.readyState==4||xmlHttp.readyState==0)
...{
//retrievethenametypedbytheuserontheform
name=encodeURIComponent(document.getElementById("name").value);
//executetheserver.phppagefromtheserver
xmlHttp.open("GET","server.php?name="+name,true);
//definethemethodtohandleserverresponses（server响应会回调给函数，在client页面进行更新DOM或者CSS操作）
xmlHttp.onreadystatechange=handleServerResponse;
//maketheserverrequest
xmlHttp.send(null);
}
else
//iftheconnectionisbusy,tryagainafteronesecond
setTimeout('process()',1000);
}
///////////////////////////////////////////////////
////第三部分：服务器响应状态会触发该回调函数
///////////////////////////////////////////////////
functionhandleServerResponse()
...{
//moveforwardonlyifthetransactionhascompleted
if(xmlHttp.readyState==4)
...{
//statusof200indicatesthetransactioncompletedsuccessfully
if(xmlHttp.status==200)
...{
//如下的操作主要是JS的功能，更形页面DOM或CSS操作
//extracttheXMLretrievedfromtheserver
xmlResponse=xmlHttp.responseXML;
//obtainthedocumentelement(therootelement)oftheXMLstructure
xmlDocumentElement=xmlResponse.documentElement;
//getthetextmessage,whichisinthefirstchildof
//thethedocumentelement
helloMessage=xmlDocumentElement.firstChild.data;
//updatetheclientdisplayusingthedatareceivedfromtheserver
document.getElementById("serverResponse").innerHTML=
'<i>'+helloMessage+'</i>';
//restartsequence
setTimeout('process()',1000);
}
//aHTTPstatusdifferentthan200signalsanerror
else
...{
alert("Therewasaproblemaccessingtheserver:"+xmlHttp.statusText);
}
}
}
c) server端PHP脚本server.php
<?php
//server端的PHP脚本产生响应XML格式，直接输入localhost/server.php会显示xml文件（或加上name=参数）
//we'llgenerateXMLoutput
header('Content-Type:text/xml');
//generateXMLheader
echo'<?xmlversion="1.0"encoding="UTF-8"standalone="yes"?>';
//createthe<response>element
echo'<response>';
//retrievetheusername
$name=$_GET['name'];
//generateoutputdependingontheusernamereceivedfromclient
$userNames=array('MICHEAL','SANDY','HELLO');
if(in_array(strtoupper($name),$userNames))
echo'Hello,master'.htmlentities($name).'!';
elseif(trim($name)=='')
echo'Stranger,pleasetellmeyourname!';
else
echohtmlentities($name).',Idon'tknowyou!';
//closethe<response>element
echo'</response>';
?>
分享到：
相关推荐
ajax基础篇
Java Web开发实战经典基础篇(JSP、Servlet、Struts、Ajax) 作者： 李兴华 王月清 共5部分，共17章和2个附录，只有源文件代码，所以资源小。（代码全） 第1部分 Web开发前奏 1~4章 第2部分 Web基础开发 5~8章 第3部分...
Java Web开发实战经典基础篇(JSP、Servlet、Struts、Ajax) 共5部分，现在上传的是前3部分，共14章，只有代码，所以资源小。 第1部分 Web开发前奏 1~4章 第2部分 Web基础开发 5~8章 第3部分 Web高级开发 9~14章
PHP+Ajax_Web开发基础篇,从菜鸟到高手的过程是艰辛的，你渴望救助。这本教程就是你无言的助手，默默的帮你到永远。 带奋斗一起飞翔，因为有了它，让我拥有理智之思；我才使过去的失误不再重演到今天的影片里；我...
ASP.net +ajax 网站开发典型实例 Ajax核心基础篇
Ajax应用利用了一种中间的媒介（Ajax引擎）消除了用户和服务器交互间的等待。Ajax通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。因此Ajax已经成为Web开发...
《Ajax+PHP程序设计实战详解》分为5篇，分别为：PHP基础篇、PHP Web应用篇、Ajax基础开发篇、组合篇和实例篇。内容囊括了PHP开发的基础知识、Ajax开发的基础知识、PHP+Ajax组合开发Web2.0程序和：PHP+Ajax实例程序。...
这篇文章将带您浏览整个AJAX的基本概貌,并展示两个简单的例子让您轻松上路.
在本系列的 上篇文章 中，我们将详细介绍 XMLHttpRequest 对象，它是 Ajax 应用程序的中心，负责处理服务器端应用程序和脚本的请求，并处理从服务器端组件返回的数据。由于所有的 Ajax 应用程序都要使用 ...
在上篇文章给大家介绍了Ajax基础详解教程(一) Ajax基础详解教程(二) 今天接着我们上篇博文的栗子，现在我来扩大一下需求，之前是点击按钮取出新闻，现在要实现每隔一段事件进行新闻的更新。这个时候，肯定是加一个...
MLDN 李兴华 老师 Java Web基础篇课后习题答案，Java Web高级案例篇全部源码。 此源码从最基本的JSP页面到Model 1到Model 2，文件上传，EL，JSTL，Ajax，Structs,一点一点的修改讲解。 最后形成一个完整的案例，...
unigui_ajax Post Callback -返回参数 HTMLFrame 事件_1 基础篇
python 零基础学习篇
python 零基础学习篇
python 零基础学习篇
因为已经有了几篇对 Ajax 进行一般性介绍的文章（请参见参考资料），所以我们假设您了解 Ajax 的基础知识；也就是说，您已经知道了什么是 Ajax、它的名称的由来、它并不是一项新的技术这一事实，以及 Google 如何将...
python 零基础学习篇
第7章 组件开发基础设施 7.1 接口 7.1.1 IDisposable 7.1.2 INotifyDisposing 7.1.3 INotifyPropertyChange 7.2 组件 7.3 IContainer 7.4 应用 7.4.1 addComponent 7.4.2 removeComponent 7.4.3 getComponents 7.4.4...
在上篇文章给大家介绍了Ajax基础详解教程(一)，讲到Ajax中open方法的第三个参数异步和同步的问题，今天呢，就来继续往下唠，先接着上回的代码 var oBtn = document.getElementById('btn'); oBtn.onclick = ...
这篇文章说明 AJAX 相关技术的基础，并提供实例供您上手。