1．AJAX简介：
Ajax是Asynchronous javascript and XML的缩写。Ajax是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括
　　使用XHTML和CSS标准化呈现;
　　使用DOM实现动态显示和交互;
　　使用XML和XSLT进行数据交换与处理;
　　使用XMLHttpRequest进行异步数据读取;
　　最后用javascript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

核心只有javascript、XMLHTTPRequest和DOM，如果所用数据格式为XML的话，还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式，也可以是文本等其他格式)。

2．使用Ajax
1、判断浏览器来使用不同的函数

>> CODE

1 //处理浏览器，用来选择不同的XML读取函数
2 var agt = navigator.userAgent.toLowerCase();
3 var is_opera = (agt.indexOf("opera") != -1);
4 var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_opera;
5 var is_ie5 = (agt.indexOf("msie 5") != -1) && document.all;

2、创建请求（GET和POST）
1 //创建Get请求
2 function StartGETRequest(url, handler)
3 {
4 xmlhttp = null;
5 if (is_ie) {
6 var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";
7 try {
8 xmlhttp = new ActiveXObject(control);
9 } catch(e) {
10 alert("You need to enable active scripting and activeX controls");
11 DumpException(e);
12 }
13 } else {
14 xmlhttp = new XMLHttpRequest();
15 }
16 xmlhttp.onreadystatechange = function() {handler();}
17 if (url.indexOf("?") != -1){
18 var urltemp = url + "&rand=" + UniqueNum();
19 } else {
20 var urltemp = url + "?rand=" + UniqueNum();
21 }
22 xmlhttp.open('GET', urltemp, true);
23 xmlhttp.send(null);
24 }
25
26 //创建POST请求
27 function StartPOSTRequest(url, data, handler)
28 {
29 xmlhttp = null;
30 if (is_ie) {
31 var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";
32 try {
33 xmlhttp = new ActiveXObject(control);
34 } catch(e) {
35 alert("You need to enable active scripting and activeX controls");
36 DumpException(e);
37 }
38 } else {
39 xmlhttp = new XMLHttpRequest();
40 }
41 xmlhttp.onreadystatechange = function() {handler();}
42 xmlhttp.open('POST', url, true);
43 if (typeof(xmlhttp.setRequestHeader) != "undefined") {
44 xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; Charset=GB2312');
45 }
46 xmlhttp.send(data);
47 }

3、接受返回的数据并进行显示

>> CODE
1
2 function getCommentHtmlList(qid, aid)
3 {
4 var strText;
5 if (xmlhttp.readyState == 4){
6 if (xmlhttp.status == 200){
7 strText = xmlhttp.responseText;//接受文本数据
8 strText = xmlhttp.responseXml;//接受Xml数据
9 document.getElementById("commentsec").innerHTML = strText; //显示数据
10 }else{
11 //Alert(“网络错误！”);
12 alert("Problem: " + xmlhttp.statusText);
13 }
14 }
15 }
16
至此一个流程完毕

4、重要函数应用解释

XMLHttpRequest最早应用XMLHTTP的是微软,IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。

这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回应是创建它自己的继承XML代理类：XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。XMLHttpRequest 对象方法 方法 描述 abort() 停止当前请求 getAllResponseHeaders() 作为字符串返问完整的headers getResponseHeader("headerLabel") 作为字符串返问单个的header标签 open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数 send(content) 发送请求 setRequestHeader("label", "value") 设置header并和请求一起发送 onreadystatechange 状态改变的事件触发器 readyState 对象状态(integer): 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 responseText 服务器进程返回数据的文本版本 responseXML 服务器进程返回数据的兼容DOM的XML文档对象 status 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功" statusText 服务器返回的状态文本信息3．AJAX的好处：1、减轻服务器的负担，减少带宽消耗因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本；2、无刷新更新页面，减少用户实际和心理等待时间； 　　首先，“按需取数据”的模式减少了数据的实际读取量。 　　其次，即使要读取比较大的数据，也不用像RELOAD一样出现白屏的情况，由于Ajax是用XMLHTTP发送请求得到服务端应答数据，在不重新载入整个页面的情况下用javascript操作DOM最终更新页面的，所以在读取数据的过程中，用户所面对的也不是白屏，而是原来的页面状态（或者可以加一个LOADING的提示框让用户了解数据读取的状态），只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到。3、基于标准化并被广泛支持，不需要插件或下载小程序； 实际验证，目前支持的浏览器是IE5以上，Opera（对post处理有点问题），Mozilla Firefox等。并且在加载的时候不会提示用户需要下载程序，减少用户的反感。4、Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离）； 4．AJAX的问题：1、一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax； 2、用javascript作的Ajax引擎，javascript的兼容性和DeBug都是让人头痛的事； 3、Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等； 4、对流媒体的支持没有FLASH、Java Applet好；5．使用中遇到的问题：1、编码问题：我们的网页编码都是使用的GB2312格式，但是在默认的情况下AJAX使用的UTF-8格式的数据，这样就给我们在数据的保存方面造成问题，需要转码。例子：知识人最终页面的评论交互。比如php下可以用 mb_convert_encoding("中国","UTF-8","GB2312") 将汉字转成 UTF-8编码，或者(iconv也可)6．网络里面关于ajax的说法1、对搜索引擎的支持不好2、编写复杂、容易出错，调试器难找，几乎没有，只有这个SplineTech JavaScript HTML Debugger， 地址：http://www.remotedebugger.com/javascript_debugger/javascript_debugger.asp3、冗余代码更多了，层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端，所以每次打开一个页面会包含很多的无用的js文件也一同下载下来。4、破坏了Web的原有标准，<span onclick="location.href="/blog/detail/";">点击查看全部</a>，这个可以替代A标签。5、XML只是用来打幌子，xml有一个致命的缺点，那就是加载的资源耗费，这好像是所有平台下xml的通病。google map没有用xml，而是用了原生的javascript数组。6.同时要注意缓存的问题
>>CODE
1 <script language=javascript>
2 var agt = navigator.userAgent.toLowerCase();
3 var is_opera = (agt.indexOf("opera") != -1);
4 var is_ie = (agt.indexOf("msie") != -1) && document.all && !is_opera;
5 var is_ie5 = (agt.indexOf("msie 5") != -1) && document.all;
6
7 var thisObj=document.getElementById("TAG_USER_STOCK");
8
9
10 function StartGETRequest(url,page,tag)
11 {
12 thisObj=document.getElementById(tag);
13 xmlhttp = null;
14 if (is_ie) {
15 var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";
16 try {
17 xmlhttp = new ActiveXObject(control);
18 } catch(e) {
19 alert("You need to enable active scripting and activeX controls");
20 DumpException(e);
21 }
22 } else {
23 xmlhttp = new XMLHttpRequest();
24 }
25 xmlhttp.onreadystatechange = getCommentHtmlList;
26
27 url=url+"?page="+page;
28
29 xmlhttp.open('GET', url, true);
30 xmlhttp.send(null);
31 }
32 function getCommentHtmlList()
33 {
34 var strText;
35 if (xmlhttp.readyState == 4){
36 if (xmlhttp.status == 200){
37 strText = xmlhttp.responseText;//接受文本数据
38 thisObj.innerHTML = strText; //显示数据
39 }else{
40 alert("Problem: " + xmlhttp.statusText);
41 }
42 }
43 }
44 </script>