织梦Ajax技术入门教程.doc

织梦Ajax技术入门教程Ajax这个名称怎么来的，本人也不得而之了，大概是（Active Javascript Action Xml）吧，说白一点就是运用了 javascript、xmlhttp和xmldom技术及网站后台来处理用户的一些操作的方法吧。那么本人就分三步来说明如何使用 Ajax 技术来做开发。一、用 javascript 操作 xmlhttp 对象二、服务器部对xmlhttp请求的响应（PHP范例）三、xmldom 的使用方法那费话少讲，先说第一部份：一、用 javascript 操作 xmlhttp 对象IE7, Mozilla ,Firefox等浏览器中，javascript是内置有 XMLHttpRequest 这个对象的，但IE5+则没有，需要用如下方法来启动：/IE 6try xhttp = new ActiveXObject(Msxml2.XMLHTTP); catch(e) ; /IE5+if(xhttp = null) try xhttp = new ActiveXObject(Microsoft.XMLHTTP); catch(e) ; 那考虑不同浏览器的兼容，启动一个xmlhttp一般都要按如下方式：复制代码1.2. var xhttp = null;3.4. if(window.XMLHttpRequest) /IE7, Mozilla ,Firefox 等浏览器内置该对象5.6. xhttp = new XMLHttpRequest();7.8. else if(window.ActiveXObject) /IE6、IE59.10. try xhttp = new ActiveXObject(Msxml2.XMLHTTP); catch (e) ; 11.12. if( xhttp = null) try xhttp = new ActiveXObject(Microsoft.XMLHTTP); catch (e); 13.14. 15.对于 xmlhttp 的使用，一般遵守如下的顺序：1、初始化 xmlhttp 对象（上文）；2、打开链接方法xhttp.open(GET, purl, true);参数一：用 GET 或 POST 方式发送数据参数二、请求网址（只能请求你服务器上的资源，一般浏览器安全限制不能读取跨域的数据）参数三、true 表示异步传输（服务器返回信息完成前，你可以进行其它操作），false 表示阻断方式的传输。3、设定要发送的 http 请求头方法：xhttp.setRequestHeader(key,value);一般来说，默认要发送的头是：xhttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded);这种表示发送的内容类型的请求头用于发送文本数据，而且javascript默认是以unicode发送的还有另外一种形式是：xhttp.setRequestHeader(Content-Type,multipart/form-data);是表示发送二制形式的数据，由于安全性原因，javascript一般不能用这种方式来发送数据，所以这个头一般没什么用。如果你的网站开启了使用 refer 参数来防盗链，那么你必须用这个方法指定 Refer 参数，或者如果用户需要登录才能进行某操作，那么要指定 Cookie 的请求头。4、send 数据方法：xhttp.send(postdata);对于用 get攻手请求，不需要指定postdata，直接用 test.php?a=a&b=b 这样形式的网址来请求即可。如果是post方式，需要用 key1=value2&key2=value2 这样的形式来对数据进行处理，把它合并在 postdata 字串中，然后发送。注意事项：javascript默认发送数据的方式是unicode，处理返回的数据必须是utf-8格式，因此，在发送的时候，需要用escape()函数来处理postdata和网址的value，在服务器上必须还原这些value，并把unicode转为页面编码值，因此如果用 jsp 或 都会比较简单，但如果用php处理起来是什么费劲的，等下会教你如何做。5、确认服务器返回资料完成下载1 如果用阻断的方式来发送请求，那么直接用 if(xhttp.readyState = 4)就能判断是否完成。readyState 的具体属性值为：0 没open1 没send2 状态未知3 正在传送4 传送完成当然为了保障起见，还需要加多一重判断就是 if(xhttp.status = 200)status 就是 http 协议里的返回头代码1xx 表示（唉呀，忘记了）2xx 表示成功的信息3xx 表示页面转移4xx 页面不存在5xx 表示服务器的各种错误如果你的页面没特殊处理，一般用 if(xhttp.status = 200) 来确信内容返回是正确的2 如果用异步传输，需要用 onreadystatechange 的事件来监听xhttp.onreadystatechange = function() /这里来进行上面阻断方式的判断 if(myajax.xhttp.readyState = 4) if(myajax.xhttp.status = 200) /要进行的后续操作 6、获取返回结果属性：1xhttp.responseBody;2xhttp.responseStream;3xhttp.responseXml;4xhttp.responseText;其中1、2都是二进制的方式，一般很少会用到，4不用看都知道了如果服务端无意外的话3返回的是一个xmldom的对象二、服务器部对xmlhttp请求的响应（PHP范例）为了简化操作，在这里把 xmlhttp的各作操作封装为一个类复制代码1. function DedeAjax(WiteOKFunc) /WiteOKFunc 为异步状态事件处理函数2.3. /xmlhttp和xmldom对象4. this.xhttp = null;5. this.xdom = null;6.7. /post或get发送数据的键值对8. this.keys = Array();9. this.values = Array();10. this.keyCount = -1;11.12. /http请求头13. this.rkeys = Array();14. this.rvalues = Array();15. this.rkeyCount = -1;16. /请求头类型17. this.rtype = text;18.19. /初始化xmlhttp20. if(window.XMLHttpRequest)/IE7, Mozilla ,Firefox 等浏览器内置该对象21. this.xhttp = new XMLHttpRequest();22. else if(window.ActiveXObject)/IE6、IE523. try this.xhttp = new ActiveXObject(Msxml2.XMLHTTP); catch (e) 24. if (this.xhttp = null) try this.xhttp = new ActiveXObject(Microsoft.XMLHTTP); catch (e) 25. 26. this.xhttp.onreadystatechange = WiteOKFunc;27. /rs: responseBody、responseStream、responseXml、responseText28.29. /以下为成员函数30. /-31.32. /初始化xmldom33. this.InitXDom = function()34. var obj = null;35. if (typeof(DOMParser) != undefined) / Gecko、Mozilla、Firefox36. var parser = new DOMParser();37. obj = parser.parseFromString(xmlText, text/xml);38. else / IE39. try obj = new ActiveXObject(MSXML2.DOMDocument); catch (e) 40. if (obj = null) try obj = new ActiveXObject(Microsoft.XMLDOM); catch (e) 41. 42. this.xdom = obj;43. ;44.45. /增加一个POST或GET键值对46. this.AddKey = function(skey,svalue)47. this.keyCount+;48. this.keysthis.keyCount = skey;49. this.valuesthis.keyCount = escape(svalue);50. ;51.52. /增加一个Http请求头键值对53. this.AddHead = function(skey,svalue)54. this.rkeyCount+;55. this.rkeysthis.rkeyCount = skey;56. this.rvaluesthis.rkeyCount = svalue;57. ;58.59. /清除当前对象的哈希表参数60. this.ClearSet = function()61. this.keyCount = -1;62. this.keys = Array();63. this.values = Array();64. this.rkeyCount = -1;65. this.rkeys = Array();66. this.rvalues = Array();67. ;68.69. /发送http请求头70. this.SendHead = function()71. if(this.rkeyCount!=-1) /发送用户自行设定的请求头72. for(;i=this.rkeyCount;i+)73. this.xhttp.setRequestHeader(this.rkeysi,this.rvaluesi);74. 75. 76. if(this.rtype=binary)77. this.xhttp.setRequestHeader(Content-Type,multipart/form-data);78. else79. this.xhttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded);80. 81. ;82.83. /用Post方式发送数据84. this.SendPost = function(purl)85. var pdata = ;86. var i=0;87. this.state = 0;88. this.xhttp.open(POST, purl, true);89. this.SendHead();90. if(this.keyCount!=-1) /post数据91. for(;i=this.keyCount;i+)92. if(pdata=) pdata = this.keysi+=+this.valuesi;93. else pdata += &+this.keysi+=+this.valuesi;94. 95. 96. this.xhttp.send(pdata);97. ;98.99. /用GET方式发送数据100. this.SendGet = function(purl)101. var gkey = ;102. var i=0;103. this.state = 0;104. if(this.keyCount!=-1) /get参数105. for(;i=this.keyCount;i+)106. if(gkey=) gkey = this.keysi+=+this.valuesi;107. else gkey += &+this.keysi+=+this.valuesi;108. 109. if(purl.indexOf(?)=-1) purl = purl + ? + gkey;110. else purl = purl + & + gkey;111. 112. this.xhttp.open(GET, purl, true);113. this.SendHead();114. this.xhttp.send();115. ;116.117. / End Class DedeAjax118.上面代码保存为： dedeajax.jsok 那现在做个最简单的测试吧test.htm复制代码1. 2. 3. function WiteOK()4. 5. var myinfo = document.getElementById(myinfo);6. if(myajax.xhttp.readyState = 4)7. if(myajax.xhttp.status = 200)8. myinfo.innerHTML = myajax.xhttp.responseText;9. 10. 11. 12. var myajax = new DedeAjax(WiteOK);13. myajax.AddKey(key1,-);14. myajax.SendPost(test.php);15.16. 17.18. 19.20.test.php复制代码1. 5.看到了什么了呢？不用激动，真正让你头痛的东西还没有出来。把类里面的复制代码1. this.AddKey = function(skey,svalue)2. this.keyCount+;3. this.keysthis.keyCount = skey;4. this.valuesthis.keyCount = svalue;/escape(svalue);5. ;6.escape 屏蔽掉发送myajax.AddKey(key1,-中-国-人-);看到什么了，乱码是吧？呵呵，这回开始头大了先把 escape放回去this.valuesthis.keyCount = escape(svalue);那么看到的就是-%u4E2D-%u56FD-%u4EBA-如何把 %u4E2D 这些东西弄回来呢？对于php而言这是一个很复杂的问题，如果用asp就简单多了下面是我写的一个函数：复制代码1. /unicode url编码转gbk编码函数2. function Unicode2Gbk($str)3. 4. /载入对照词典5. if(!isset($GLOBALSGbkUniDic)6. 7. $ds = file(./data/gbk_unicode.dic);8. foreach($ds as $l)9. $GLOBALSGbkUniDichexdec(0x.substr($l,0,4) = substr($l,5,4);10. 11. 12. /处理字符串13. $glen = strlen($str);14. $okstr = ;15. for($i=0; $i 4)18. if($str$i=% & $str$i+1=u)19. $uni = hexdec(0x.substr($str,$i+2,4);20. if(isset($GLOBALSGbkUniDic$uni)21. $uni = $GLOBALSGbkUniDic$uni;22. $okstr .= chr(hexdec(substr($uni,0,2).chr(hexdec(substr($uni,2,2);23. 24. else $okstr .= &#.hexdec(0x.$uni).;25. $i = $i+5;26. 27. else $okstr .= $str$i;28. 29. else $okstr .= $str$i;30. 31. return $okstr;32. 33.词典文件：/myimg/data.rar把test.php 输出改为echo Unicode2Gbk($_POSTkey1);正常了吧:lol:以下说下面和xml有关的东西的了三、xmldom 的使用方法由于本文仅是牵针引线的作用，这一章就简单些，因为针对的是 php ，如果针对的是 或 jsp 写涉及 web server 类的通信，已经不单纯是 ajax 的问题了，本章的任务是把test2.php复制代码1. ?2. header(Content-Type: text/xml; charset=gb2312);3. echo 4. 5. 我是小一6. 我是小二7. 8. ;9. ?10.这个xml文档在客户端用自己的方式展现出来。因为xml这种东西比较麻烦，所以语法也必须严格，test2.htm的页面的源码为复制代码1. 2. 3. 4. ajax测试5. 6. 7. 8. 9. var myajax = new DedeAjax(WiteOK);10. function WiteOK()11. 12. var myinfo = document.getElementById(myinfo);13. var mydom = null;14. myinfo.innerHTML = 以下是处理结果：;15. if(myajax.xhttp.readyState = 4)16. mydom = myajax.xhttp.responseXml;17. alert(mydom);18. 19. 20. function WiteLoadDocument()21. 22. myajax.Send