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 }
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>45
联系客服
