Ajax 简介＋实例

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.asp
3、冗余代码更多了，层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端，所以每次打开一个页面会包含很多的无用的js文件也一同下载下来。
4、破坏了Web的原有标准，<span onclick="location.href='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>