您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何學習Ajax 框架,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
一.XMLHttpRequest 對象的三個重要的屬性。
onreadystatechange 屬性
onreadystatechange 屬性存有處理服務(wù)器響應(yīng)的函數(shù)。下面的代碼定義一個空的函數(shù),可同時對 onreadystatechange 屬性進行設(shè)置:
xmlHttp.onreadystatechange=function() { // 我們需要在這里寫一些代碼 }
readyState 屬性
readyState 屬性存有服務(wù)器響應(yīng)的狀態(tài)信息。每當 readyState 改變時,onreadystatechange 函數(shù)就會被執(zhí)行。
這是 readyState 屬性可能的值:
狀態(tài) | 描述 |
0 | 請求未初始化(在調(diào)用 open() 之前) |
1 | 請求已提出(調(diào)用 send() 之前) |
2 | 請求已發(fā)送(這里通??梢詮捻憫?yīng)得到內(nèi)容頭部) |
3 | 請求處理中(響應(yīng)中通常有部分數(shù)據(jù)可用,但是服務(wù)器還沒有完成響應(yīng)) |
4 | 請求已完成(可以訪問服務(wù)器響應(yīng)并使用它) |
我們要向這個 onreadystatechange 函數(shù)添加一條 If 語句,來測試我們的響應(yīng)是否已完成(意味著可獲得數(shù)據(jù)):
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // 從服務(wù)器的response獲得數(shù)據(jù) } }
responseText 屬性
可以通過 responseText 屬性來取回由服務(wù)器返回的數(shù)據(jù)。
二.基本源碼:
var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } //設(shè)置請求響應(yīng)的url var url="getcustomer_xml.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { //responseText 以字符串返回 HTTP 響應(yīng) //document.getElementById("txtHint").innerHTML=xmlHttp.responseText; //responseXML 以 XML 返回響應(yīng) //服務(wù)器端ContentType 屬性為 response 對象設(shè)置了 HTTP 內(nèi)容類型。該屬性的默認值是 "text/html"。服務(wù)器端返回responseXML 要把內(nèi)容類型設(shè)置為 XML。 var xmlDoc=xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML= xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue; document.getElementById("contactname").innerHTML= xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue; document.getElementById("address").innerHTML= xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue; document.getElementById("city").innerHTML= xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue; document.getElementById("country").innerHTML= xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
三.Ajax框架:基于瀏覽器的應(yīng)用框架,基于服務(wù)器端的應(yīng)用框架。
1.基于瀏覽器的應(yīng)用框架一般分為兩種:
Aplication frameworks:提供了瀏覽器功能,但其最著名的還是在于通過窗口生成組件建立桌面GUI。 如:DOJO,qooxdoo,JavaFX,YUI,ExtJS(最開始的名字是yui-ext,因為擴展了yui的庫,后來發(fā)展為可選擇擴展jquery和prototype就改名字為ext),F(xiàn)lex(與ExtJS有很多相似),TIBET等。
Infrastructural frameworks:提供基本的框架功能和輕便式瀏覽器端操作,讓開發(fā)者去創(chuàng)建具體應(yīng)用,主要功能包括:
基于XMLHttpRequest組件的瀏覽器交互功能
XML解析和操作功能
根據(jù)XMLHttpRequest的返回信息進行相應(yīng)的DOM操作
一些特殊情況下,和其他的瀏覽器端技術(shù)如Flash(或Java Applets)等集合到一起應(yīng)用
如:jQuery(代碼量少),prototype,MooTools(功能比prototype強大,設(shè)計比prototype完善,從prototype中汲取很多有益的設(shè)計理念),Google AJAXSLT,F(xiàn)lash/JavaScript,等。
2.基于服務(wù)器端的應(yīng)用框架通常以下面兩種方式工作(盡管它們根據(jù)不同的語言進行了分類) :
HTML/JS Generation(HTML/JS生成):通過服務(wù)器端生成HTML和JS代碼在傳遞給瀏覽器端進行直接運行 。如:Ext GWT。
遠程交互:JavaScript調(diào)用服務(wù)器端函數(shù)(例如調(diào)用Java函數(shù))并返回給JavaScript的回調(diào)句柄,或者請求服務(wù)器端數(shù)據(jù)信息,例如Session信息,數(shù)據(jù)庫查詢等。 如DWR。
上述內(nèi)容就是如何學習Ajax 框架,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。