简易的AJAX工具[转]
生活随笔
收集整理的這篇文章主要介紹了
简易的AJAX工具[转]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
關鍵字: ajax
var?net?=?new?Object(); ?? net.READY_STATE_UNINITIALIZED=0; ?? net.READY_STATE_LOADING=1; ?? net.READY_STATE_LOADED=2; ?? net.READY_STATE_INTERACTIVE=3; ?? net.READY_STATE_COMPLETE=4; ?? net.ContentLoader=function(url,onload,onerror){ ?? ????//this.url?=?encodeURI(url); ?? ????this.url?=?url; ?? ????this.req?=?null; ?? ????this.onload?=?(onload)???onload?:?this.defaultLoad; ?? ????this.onerror?=?(onerror)???onerror?:?this.defaulterror; ?? ????this.loadXMLDoc(url); ?? ????this.getText?=?this.defaultGetText; ?? ????this.getXml?=?this.defaultGetXml; ?? } ?? net.ContentLoader.prototype={ ?? ????loadXMLDoc:function(url){ ?? ????????if(?window.XMLHttpRequest?){ ?? ????????????//Mozilla,?Firefox,?Opera ?? ????????????this.req?=?new?XMLHttpRequest(); ?? ????????}else?if(?window.ActiveXObject?){ ?? ????????????try{ ?? ????????????????//IE6.0 ?? ????????????????this.req?=?new?ActiveXObject("Microsoft.XMLHTTP"); ?? ????????????}catch(e1){ ?? ????????????????try{ ?? ????????????????????xmlHttp=new?ActiveXObject("MSXML2.XMLHTTP"); ?? ????????????????}catch(e2){ ?? ????????????????????try{ ?? ?????????????????????xmlHttp=new?ActiveXObject("MSXML3.XMLHTTP"); ?? ????????????????????}catch(e3){ ?? ????????????????????} ?? ????????????????} ?? ????????????} ?? ????????} ?? ????????if(?this.req?){ ?? ????????????try{ ?? ????????????????var?loader?=?this; ?? ????????????????this.req.onreadystatechange?=?function(){ ?? ????????????????????loader.onReadyState.call(loader); ?? ????????????????} ?? ????????????????this.req.open('post',url,true);? ?? ????????????????this.req.setRequestHeader("Content-Type",?"text/html;charset=UTF-8");? ?? ????????????????this.req.send(null); ?? ????????????}catch(err){ ?? ????????????????this.onerror.call(this); ?? ????????????} ?? ????????} ?? ????}, ?? ????onReadyState:function(){ ?? ????????var?req?=?this.req; ?? ????????var?ready?=?req.readyState; ?? ????????if(?ready?==?net.READY_STATE_COMPLETE?){ ?? ????????????var?httpStatus?=?req.status; ?? ????????????if(?httpStatus?==?200?||?httpStatus?==?0?){ ?? ????????????????this.onload.call(this); ?? ????????????}else{ ?? ????????????????this.onerror.call(this); ?? ????????????} ?? ????????} ?? ????}, ?? ????defaultError:function(){ ?? ????????alert("error?fetching?date!"?? ????????+"\n\nreadyState:?"+this.req.readyState ?? ????????+"\nstatus:?"+this.req.status ?? ????????+"\nheaders:?"+this.req.getAllResponseHeaders() ?? ????????); ?? ????}, ?? ????defaultLoad:function(){ ?? ????????//do?nothing ?? ????}, ?? ????defaultGetXml:function(){ ?? ????????var?retXml?=?this.req.responseText; ?? ????????var?xmlDoc?=?null; ?? ????????if(?window.ActiveXObject?){ ?? ????????????//IE ?? ????????????xmlDoc=new?ActiveXObject("Microsoft.XMLDOM"); ?? ????????????xmlDoc.async=false; ?? ????????????xmlDoc.load(retXml); ?? ????????}else{ ?? ????????????//Mozilla,?Firefox,?Opera ?? ????????????var?parser=new?DOMParser(); ?? ????????????xmlDoc?=?parser.parseFromString(retXml,"text/xml"); ?? ????????} ?? ????????return?xmlDoc; ?? ????}, ?? ????defaultGetText:function(){ ?? ????????return?this.req.responseText; ?? ????} ?? }?? 標簽: javascript, ajax
1.創建XMLHttpRequest對象的js文件
?
?
| Ajax.js function Ajax() { ????var xmlHttp=null; ????if(window.XMLHttpRequest) ???? {//非IE內核瀏覽器 ???????? xmlHttp=new XMLHttpRequest(); ???? } ????elseif(window.ActiveXObject) ???? {//IE內核瀏覽器 ????????try ???????? {//IE6.0 ???????????? xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); ???????? } ????????catch(e1) ???????? { ????????????try ???????????? { ???????????????? xmlHttp=new ActiveXObject("MSXML2.XMLHTTP"); ???????????? } ????????????catch(e2) ???????????? { ????????????????try ???????????????? { ???????????????????? xmlHttp=new ActiveXObject("MSXML3.XMLHTTP"); ???????????????? } ????????????????catch(e3) ???????????????? { ???????????????????? alert("創建Ajax失敗："+e3) ???????????????? } ???????????? } ???????? } ???? } ????else ???? {//未知瀏覽器 ???????? alert("未能識別的瀏覽器"); ???? } ????return xmlHttp; } 放到創建對象的頁面 <script language="javascript" type="text/javascript" src="Ajax.js"></script>用asp舉個例子 <script language="javascript" type="text/javascript" src="Ajax.js"></script><script language="javascript" type="text/javascript"> var xmlHttp=new Ajax(); function checkName() {???? ???? xmlHttp.onreadystatechange=getName; ???? xmlHttp.open("get","getName.asp",true); ???? xmlHttp.send(null) } function getName() { ???? var dom=document.getElementById("name")???? ????if(xmlHttp.readystate==1) ???? { ???????? dom.value="正在連接服務器" ???? } ????elseif(xmlHttp.readystate==2|| xmlHttp.readystate==3) ???? { ???????? dom.value="正在讀取數據"; ???? } ????elseif(xmlHttp.readystate==4) ???? { ????????if (xmlHttp.status==200) ????????? { ???????????? dom.value=xmlHttp.responseText ???????? } ???? } } </script> |
| ?2.XML基礎教程：解析?XML?DOM 讀取、更新、創建或者操作某個XML文檔，則需要XML解析器。 實例解析XML文件 - 跨瀏覽器的實例解析一個XML文檔如需操作某個XML文檔，您需要XML解析器。解析器會將文檔載入電腦的內存中。一旦文檔被載入，可使用DOM對其數據進行操作。DOM把XML作為一顆樹來處理。 微軟的XML解析器與Mozilla瀏覽器中使用的解析器是有差異的。在本教程中，我們會為您展示如何創建可工作于IE和Mozilla瀏覽器中的跨瀏覽器腳本。 微軟的XML解析器微軟的XML解析器是存在于IE 5.0或更高版本中的COM組件。一旦你安裝了IE，就可使用腳本來利用解析器了。 微軟的XML解析器支持所有必要的功能，來遍歷節點樹，訪問節點以及它們的屬性值，插入并刪除節點，并將節點數轉換回XML。 如需創建微軟XML解析器的一個實例，請使用下面的代碼： JavaScript:var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");VBScript:set xmlDoc=CreateObject("Microsoft.XMLDOM")ASP:set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")下面的代碼段可向微軟的XML解析器載入一個已有的XML文檔("note.xml")： var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load("note.xml");上面的腳本的第一行創建了XML解析器的一個實例。第二行關閉了同步載入，這樣可以確保在文檔被完全載入前解析器不會繼續執行。第三行會告知解析器載入名為"note.xml"的XML的文檔。 Mozilla、Firefox以及Opera中的XML解析器Mozilla瀏覽器的XML解析器支持所有必要的功能，來遍歷節點樹，訪問節點以及它們的屬性值，插入并刪除節點，并將節點樹轉換回XML。 如需創建Mozilla瀏覽器的XML解析器的一個實例，請使用下面的代碼： JavaScript:var xmlDoc=document.implementation.createDocument("ns","root",null);第一個參數，ns，定義用于XML文檔的命名空間（namespace）。第二個參數，root，是XML文件中的XML根元素。第三個參數，null，一般總是null，這是由于目前還沒有用到這個參數。 下面的代碼段可向Mozilla瀏覽器的XML解析器載入一個已有的XML文檔("note.xml")： var xmlDoc=document.implementation.createDocument("","",null); xmlDoc.load("note.xml");上面的腳本的第一行創建了XML解析器的一個實例。第二行會告知解析器載入名為"note.xml"的XML的文檔。 解析某個XML文件 - 跨瀏覽器的實例下面的例子是一個跨瀏覽器的實例，向XML解析器載入了某個已有的XML文檔("note.xml")： < html> < head> < script type="text/javascript"> var xmlDoc; function loadXML() {// 用于 IE 的代碼： if (window.ActiveXObject){xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async=false;xmlDoc.load("note.xml");getmessage();}// 用于 Mozilla, Firefox, Opera, 等瀏覽器的代碼： else if (document.implementation && document.implementation.createDocument){xmlDoc=document.implementation.createDocument("","",null);xmlDoc.load("note.xml");xmlDoc.οnlοad=getmessage;} else{alert('Your browser cannot handle this script');} }function getmessage() { document.getElementById("to").innerHTML= xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue; document.getElementById("from").innerHTML= xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue; document.getElementById("message").innerHTML= xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue; } < /script> < /head>< body οnlοad="loadXML()"> < h1>W3Schools Internal Note< /h1> < p>< b>To:< /b> < span id="to">< /span>< br /> < b>From:< /b> < span id="from">< /span>< br /> < b>Message:< /b> < span id="message">< /span> < /p> < /body> < /html>輸出：W3Schools Internal Note To: Tove From: Jani Message: Don't forget me this weekend!重要的注釋如需從某個XML元素（比如< from>Jani< /from>）中提取文本（比如Jani），請使用下面的語法： getElementsByTagName("from")[0].childNodes[0].nodeValue重要事項：getElementsByTagName會返回一個節點數組。此數組含有XML文檔中擁有指定名稱的所有元素。在這例子中，只有一個"from"元素，但是仍然需要設定數組的下標( [0] )。 解析一個XML字符串 - 跨瀏覽器的實例下面的代碼是一個跨瀏覽器的實例，向我們展示了如何加載和解析某個XML字符串： < html> < body>< script type="text/javascript">var text="< note>"; text=text+"< to>Tove< /to>"; text=text+"< from>Jani< /from>"; text=text+"< heading>Reminder< /heading>"; text=text+"< body>Don't forget me this weekend!< /body>"; text=text+"< /note>";// 用于 IE 的代碼： if (window.ActiveXObject){var doc=new ActiveXObject("Microsoft.XMLDOM");doc.async="false";doc.loadXML(text);}// 用于 Mozilla, Firefox, Opera, 等瀏覽器的代碼： else{var parser=new DOMParser();var doc=parser.parseFromString(text,"text/xml");}// documentElement 提交根元素： var x=doc.documentElement;document.write("Text of first child element: "); document.write(x.childNodes[0].childNodes[0].nodeValue); document.write("< br />"); document.write("Text of second child element: "); document.write(x.childNodes[1].childNodes[0].nodeValue); < /script>< /body> < /html>輸出：Text of first child element: Tove Text of second child element: Jani注釋：Internet Explorer使用loadXML()方法解析XML字符串，而Mozilla瀏覽器使用DOMParser對象。 ? 根據以上兩個說明，整理了如下的ajax工具 |
?
?
Ajax.js
Js代碼轉載于:https://www.cnblogs.com/guolanzhu/p/3460071.html
總結
以上是生活随笔為你收集整理的简易的AJAX工具[转]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MAC下代理工具Charles使用
- 下一篇： logrotate管理nginx日志文件