ajax學(xué)習(xí)心得

時(shí)間：2024-02-11 04:15:51 嘉欣2 學(xué)習(xí)經(jīng)驗(yàn)

　　ajax學(xué)習(xí)心得篇一

　　新建一個(gè)html頁布局如下：

　　<body>

　　<tr>

　　</td>

　　<td>

　　</td>

　　</tr>

　　<td>

　　<td>

　　</table>

　　</body>

　　如圖：

　　然后在<head></head>里邊添加如下的兩個(gè)函數(shù)(該函數(shù)必須包含在<script></script>中)：

　　var xmlhttp = false;//全局xmlhttp對象

　　//作用：創(chuàng)建HttpRequest對象，該對象是Ajax的核心

　　function CreatHttpRequest() {

　　try {

　　xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//新版本的IE創(chuàng)建IE兼容對象

　　} catch (e) {

　　try {

　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//使用舊版本的IE創(chuàng)建IE兼容對象

　　} catch (e1) {

　　return false;

　　}

　　//如果xmlhttp對象為創(chuàng)建成功，或者對象為undefined則使用通用的方法創(chuàng)建xmlhttp對象，Mozilla、Opera、Safari 和大部分非 Microsoft 瀏覽器已經(jīng)IE7以后均采用此種方式創(chuàng)建。

　　if (!xmlhttp && xmlhttp == 'undefined') {

　　xmlhttp = new XMLHttpRequest();

　　}

　　function SayHello() {

　　CreatHttpRequest();

　　if (xmlhttp != null) {

　　var name = document.getElementById("txtname").value;//獲得用戶姓名

　　xmlhttp.open("Get", "SayHello.ashx?Name="+name+"&i="+Math.random(),true);//將用戶姓名傳給ashx頁進(jìn)行數(shù)據(jù)校驗(yàn)，i=Math.random()主要是為了避免get方式提交時(shí)受緩存的影響

　　xmlhttp.onreadystatechange = function () {

　　//xmlhttp.readState屬性為說明Http請求狀態(tài)，4為請求完畢，

　　//xmlhttp.status屬性為從服務(wù)器發(fā)回的狀態(tài)碼，200為就緒

　　if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

　　alert(xmlhttp.responseText);//xmlhttp.responseText為從ashx頁處理后的結(jié)果

　　}//每次 readyState 屬性改變的時(shí)候調(diào)用的事件句柄函數(shù),后邊跟的是一個(gè)匿名的函數(shù)，每次屬性改變都會調(diào)用該函數(shù)

　　}

　　xmlhttp.send();//只有調(diào)用了send()方法才能真正的向服務(wù)器發(fā)送請求，函數(shù)參數(shù)可以為null，一般也可不填

　　}

　　Else{

　　alert("HttpRequest對象創(chuàng)建失敗");

　　}

　　</script>

　　下面說下SayHello.ashx頁(即一般處理程序頁)

　　代碼如下：僅僅是讀取用戶輸入的姓名，并返回"Hello"+用戶姓名，這里主要做演示demo用，所以就沒有從數(shù)據(jù)庫讀取信息。

　　public void ProcessRequest(HttpContext context)

　　{

　　var name = context.Request["Name"].ToString();

　　context.Response.Write("Hello !"+name);

　　}

　　結(jié)果：

　　Ok，到這里你已經(jīng)實(shí)現(xiàn)了你的第一個(gè)Ajax程序了，趕快測試一下看看吧。通過測試你會發(fā)現(xiàn)，在頁面并沒有刷新的情況話，從我們的模擬后臺數(shù)據(jù)庫中讀取到了相應(yīng)的數(shù)據(jù)，返回了我們想要的結(jié)果，這樣的用不體驗(yàn)是不是比一點(diǎn)擊登陸頁面就會瞬間變白重繪要好很多呢?如果數(shù)據(jù)檢索的時(shí)間比較長頁面就會持續(xù)的變白，這樣的用戶的體驗(yàn)效果會很差的。你有沒有體驗(yàn)到Ajax帶來的美感呢?我想現(xiàn)在你肯定有很多的不明白，下面我會給你細(xì)細(xì)的詳解一番。

　　首先來看第一個(gè)函數(shù)，該函數(shù)的主要作用是生成一個(gè)HttpRequest對象，何為HttpRrequest對象呢?HttpRequest是AJAX的核心，它是在IE5中首先引入的，是一種支持異步請求的技術(shù)。Javascript可以及時(shí)向服務(wù)器提出請求和處理響應(yīng)，獲取到服務(wù)器的數(shù)據(jù)，然后再通過DOM將數(shù)據(jù)插入到頁面中呈現(xiàn)。雖然名字中包含XML，但Ajax通訊與數(shù)據(jù)格式無關(guān)。具體的創(chuàng)建在函數(shù)里有具體的解析，這里就不再做重復(fù)的介紹了。

　　下面看第二函數(shù)，也就是實(shí)現(xiàn)AJAX的主體函數(shù)，在該函數(shù)中，我們先調(diào)用了CreateHttpRequest()函數(shù)，也就是先將全局變量xmlhttp實(shí)例化，然后獲取用戶的輸入名。調(diào)用HttpRequest的open()方法，該方法只是用來初始化 HTTP 請求參數(shù)，例如 URL 和 HTTP 方法，但是并不發(fā)送請求。

　　該方法有三個(gè)參數(shù)第一個(gè)參數(shù)是說明Http方法，有兩種形式一種是“get",另一個(gè)種是”post",兩者的區(qū)別就相當(dāng)于表單提交時(shí)如果使用get方法，就可以在url里看到提交的值，是顯示的，不安全，post是隱式的，看不到提交的值，相對比較安全，上邊的示例我們采用的是“get"方法，本文最后我會跟大家演示一下”post“方法。

　　第二個(gè)參數(shù)是一個(gè)url也就是后臺要處理的頁，也就是相對于執(zhí)行代碼的當(dāng)前頁面(使用絕對路徑)，本例中是“SayHello.ashx?Name="+name+"&i="+Math.Random()，做過asp.net 開發(fā)的朋友相信對這個(gè)一定都不陌生，是的，這里就相當(dāng)于querystring傳值，把你需要傳遞的值通過這種方法傳遞進(jìn)入，如果有多個(gè)值的話跟QueryString一樣使用“&”分割開來，后邊又跟了一個(gè)參數(shù)”i“這里采用Math.Random()產(chǎn)生隨機(jī)數(shù)，主要是為了解決的瀏覽器緩存問題，這樣沒每次提交的數(shù)據(jù)都不會一樣，很好的解決了緩存問題。

　　第三個(gè)參數(shù)為是否設(shè)置為異步，在這里我們當(dāng)然選擇是異步操作，設(shè)置為"true"即可。

　　同步與異步的區(qū)別如下：

　　同步請求：發(fā)生請求后，要等待服務(wù)器執(zhí)行完畢才繼續(xù)執(zhí)行當(dāng)前代碼。

　　異步請求：發(fā)生請求后，無需等到服務(wù)器執(zhí)行完畢，可以繼續(xù)執(zhí)行當(dāng)前代碼

　　緊跟著下邊是HttpRequest的onreadystateChange屬性，具體可以理解為每次 readyState 屬性改變的時(shí)候調(diào)用的事件句柄函數(shù)，所以在其后邊緊跟了一個(gè)匿名的函數(shù)

　　在該匿名函數(shù)里首先在if條件判斷里又用到了HttpRequest的兩個(gè)屬性，分別介紹下，

　　第一個(gè)是HttpRequest.readyState,還記得我們在上邊open()函數(shù)里設(shè)置的第三個(gè)參數(shù)，也就是是否設(shè)置為異步嗎，我們設(shè)置的為true，也就是異步請求，所以在請求過程中javascript代碼會繼續(xù)執(zhí)行，這時(shí)可以通過readyState屬性判斷請求的狀態(tài)，當(dāng)readyState = 4時(shí)，表示收到全部響應(yīng)數(shù)據(jù)，屬性值的定義如下：

readyState值	描述
0	未初始化；尚未調(diào)用open()方法
1	啟動；尚未調(diào)用send()方法
2	已發(fā)送；但尚未收到響應(yīng)
3	接收；已經(jīng)收到部分響應(yīng)數(shù)據(jù)
4	完成；收到全部響應(yīng)數(shù)據(jù)

　　下面看第二個(gè)屬性：HttpRequest.status ：由服務(wù)器返回的 HTTP 狀態(tài)代碼 200表示OK一切正常，可以進(jìn)行下一步的操作，當(dāng)然還有其他的一些狀態(tài)碼，比如大家所知的404、303等，這里就不再做過多介紹了，只要用到HttpReques.status,我們記的拿它與200相比就可以了。當(dāng)然還有另外一種狀態(tài)的表示方式：HttpRequest.statusText, 這個(gè)屬性用名稱而不是數(shù)字指定了請求的 HTTP 的狀態(tài)代碼，僅當(dāng)readyState值為3或4才可用。當(dāng)readyState為其它值時(shí)試圖存取statusText屬性將引發(fā)一個(gè)異常。

　　然后我們看滿足if條件時(shí)，執(zhí)行的代碼，這里邊又用到了一個(gè)HttpRequest.responseText:

　　該屬性的意思是如果滿足了if()里的判斷條件，則包含客戶端接收到的HTTP響應(yīng)的文本內(nèi)容，如果不滿足以上的readyState==4，則當(dāng)readyState值為0、1或2時(shí)，responseText包含一個(gè)空字符串。當(dāng)readyState值為3(正在接收)時(shí)，響應(yīng)中包含客戶端還未完成的響應(yīng)信息。上邊也有介紹，這里就不再重復(fù)了。此外還有一個(gè)HttpRequest.reponseXML 屬性，此屬性用于當(dāng)接收到完整的HTTP響應(yīng)時(shí)(readyState為4)描述XML響應(yīng);此時(shí)，Content-Type頭部指定MIME(媒體)類型為text/xml，application/xml或以+xml結(jié)尾。如果Content-Type頭部并不包含這些媒體類型之一，那么responseXML的值為null。

　　緊接下來要執(zhí)行的是HttpRequest.send()函數(shù)，這個(gè)時(shí)候才真正的向服務(wù)器發(fā)送請求，send()方法接受一個(gè)參數(shù)，如果是用“get”的方式請求這里邊可是設(shè)置為null也可以什么都寫，因?yàn)?ldquo;get"的方式所需傳的值都通過url傳遞了，如果是”Post“的請求方式，則傳遞的參數(shù)可以寫在send()里。

　　下面附上使用Post的請求方式的Ajax代碼

　　function SayHello() {

　　alert("hell0");

　　CreatHttpRequest();

　　if (xmlhttp != null) {

　　var name = document.getElementById("txtname").value;

　　xmlhttp.open("Post", "SayHello.ashx", true);

　　xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//使用Post方式請求時(shí)必須要加上這句話

　　xmlhttp.onreadystatechange = function () {

　　if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

　　alert(xmlhttp.responseText);

　　}

　　xmlhttp.send("Name="+name+"&i="+Math.random());//傳遞所需的參數(shù)

　　}

　　到這里我已經(jīng)基本上把HttpRequest的核心的東西給大家講完了，通過這一章節(jié)的學(xué)習(xí)，我想你已經(jīng)可以自如做到構(gòu)建一個(gè)屬于你的Ajax程序了，當(dāng)然這些都只是些比較基礎(chǔ)的Ajax的東西，這些都是原生態(tài)的Ajax，現(xiàn)在我們也可以使用JQuery實(shí)現(xiàn)Ajax，而且這個(gè)封裝的也比較好，用起來也比較方便，但是我覺得我們還是有必要把Ajax的原理給搞清楚的，這樣運(yùn)用起來才會比較的自如。希望能對大家有所幫助，也希望大家多多指點(diǎn)!

　　ajax學(xué)習(xí)心得篇二

　　在使用AJAX容易出現(xiàn)的幾個(gè)小問題

　　1.提交參數(shù)包含中文時(shí),獲取不到中文值

　　var keywords = escape(document.getElementById("keywords").value);//escape()解決中文參數(shù)

　　2.POST提交獲取不到參數(shù)值

　　xmlHttp.setrequestheader("content-length",postdata.length);

　　xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded");

　　假如以上兩句話就可以了

　　3:為了兼容大部分的瀏覽器，最好在創(chuàng)建XMLHttpRequest的時(shí)候加入完整的判斷不要簡單的用

　　var req; //定義變量，用來創(chuàng)建xmlhttprequest對象

　　function creatReq() // 創(chuàng)建xmlhttprequest,ajax開始

　　{

　　if(window.XMLHttpRequest) //非IE瀏覽器，用xmlhttprequest對象創(chuàng)建

　　{

　　req=new XMLHttpRequest();

　　}

　　else if(window.ActiveXObject) //IE瀏覽器用activexobject對象創(chuàng)建

　　{

　　req=new ActiveXObject("Microsoft.XMLHttp");

　　}

　　4:我經(jīng)常犯的的一個(gè)錯誤就是xmlreq.onreadystatechange = CheckState();//制定相應(yīng)的函數(shù)

　　這樣寫是錯誤的，函數(shù)的括號是不需要的。

Code

　　用AJAX的Get和Post調(diào)用Servlet的簡單示例。

Code

　　看到的說明原文如下：

　　用AJAX來GET回一個(gè)頁面時(shí)，RESPONSETEXT里面的中文多半會出現(xiàn)亂碼，這是因?yàn)閤mlhttp在處理返回的 responseText的時(shí)候，是把resposeBody按UTF-8編碼進(jìn)解碼考形成的，如果服務(wù)器送出的確實(shí)是UTF-8的數(shù)據(jù)流的時(shí)候漢字會正確顯示，而送出了GBK編碼流的時(shí)候就亂了。解決的辦法就是在送出的流里面加一個(gè)HEADER，指明送出的是什么編碼流，這樣XMLHTTP就不會亂搞了。

　　PHP:header('Content-Type:text/html;charset=GB2312');

　　ASP:Response.Charset("GB2312")

　　JSP:response.setHeader("Charset","GB2312");

　　AJAX ResponseXML 實(shí)例

　　在下面的 AJAX 實(shí)例中，我們將演示網(wǎng)頁如何使用 AJAX 技術(shù)從數(shù)據(jù)庫中讀取信息。這次，這些從數(shù)據(jù)庫中選取的數(shù)據(jù)將被轉(zhuǎn)換為 XML 文檔，然后我們將使用 DOM 來提取要顯示的值。

　　AJAX 實(shí)例解釋

　　上面的例子包含一個(gè) HTML 表單，若干個(gè)保留所返回?cái)?shù)據(jù)的 <span> 元素，以及指向一段 JavaScript 的鏈接：

　　<html>

　　<head>

　　</head>

　　<body>

　　<label>選擇客戶：

　　<option value="ALFKI">Alfreds Futterkiste</option>

　　<option value="NORTS ">North/South</option>

　　<option value="WOLZA">Wolski Zajazd</option>

　　</select></label>

　　</form>

　　</body>

　　</html>上面的例子包含了一個(gè) HTML 表單，該表單帶有一個(gè)名為 "customers" 下拉框。

　　當(dāng)用戶選取下拉框中的客戶時(shí)，函數(shù) "showCustomer()" 就會被執(zhí)行。事件 "onchange" 會觸發(fā)該函數(shù)執(zhí)行。換句話說，每當(dāng)用戶改變下拉框中的值時(shí)，函數(shù) showCustomer() 就會被調(diào)用。

　　下面列出了 JavaScript 代碼。

　　AJAX JavaScript

　　這是存儲在文件 "selectcustomer_xml.js" 中的 JavaScript 代碼：

　　var xmlHttp

　　function showCustomer(str)

　　{

　　xmlHttp=GetXmlHttpObject();

　　if (xmlHttp==null)

　　{

　　alert ("Your browser does not support AJAX!");

　　return;

　　}

　　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)

　　{

　　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;

　　}showCustomer() 和 GetXmlHttpObject() 與上一節(jié)相同。stateChanged() 函數(shù)稍早前也在本教程中使用過。不過，這次我們通過 responseXML 以 XML 文檔返回結(jié)果，并使用 DOM 來提取要顯示的值。

　　AJAX 服務(wù)器頁面

　　這個(gè)被 JavaScript 調(diào)用的服務(wù)器頁面，是名為 "getcustomer_xml.asp" 的簡單 ASP 文件。

　　該頁面使用 VBScript 編寫，針對 Internet 信息服務(wù)器 (IIS)。可以用 PHP 或其他服務(wù)器語言，簡單地重寫該頁面。

　　請看在 PHP 中對應(yīng)的例子(測試：缺具體頁面)。

　　這段代碼執(zhí)行針對數(shù)據(jù)庫的 SQL 查詢，并以 XML 文檔返回結(jié)果：

　　response.expires=-1

　　response.contenttype="text/xml"

　　sql="SELECT * FROM CUSTOMERS "

　　sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"

　　on error resume next

　　set conn=Server.CreateObject("ADODB.Connection")

　　conn.Provider="Microsoft.Jet.OLEDB.4.0"

　　conn.Open(Server.Mappath("/db/northwind.mdb"))

　　set rs=Server.CreateObject("ADODB.recordset")

　　rs.Open sql, conn

　　if err <> 0 then

　　response.write(err.description)

　　set rs=nothing

　　set conn=nothing

　　else

　　response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")

　　response.write("<company>")

　　response.write("<compname>" &rs.fields("companyname")& "</compname>")

　　response.write("<contname>" &rs.fields("contactname")& "</contname>")

　　response.write("<address>" &rs.fields("address")& "</address>")

　　response.write("<city>" &rs.fields("city")& "</city>")

　　response.write("<country>" &rs.fields("country")& "</country>")

　　response.write("</company>")

　　end if

　　on error goto 0

　　%>請注意上面的 ASP 代碼中的第二行：response.contenttype="text/xml"。ContentType 屬性為 response 對象設(shè)置了 HTTP 內(nèi)容類型。該屬性的默認(rèn)值是 "text/html"。這次我們把內(nèi)容類型設(shè)置為 XML。

　　然后我們從數(shù)據(jù)庫中選取數(shù)據(jù)，并使用這些數(shù)據(jù)構(gòu)建 XML 文檔。

　　ajax學(xué)習(xí)心得篇三

　　AJAX全稱為“Asynchronous JavaScript and XML”(異步JavaScript和XML)，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

　　主要包含了以下幾種技術(shù)：

　　基于web標(biāo)準(zhǔn)(standards-based presentation)XHTML+CSS的表示;

　　使用 DOM(Document Object Model)進(jìn)行動態(tài)顯示及交互;

　　使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作;

　　使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢、檢索;

　　使用 JavaScript 將所有的東西綁定在一起。

　　Ajax應(yīng)用程序的優(yōu)勢在于：

　　1. 通過異步模式，提升了用戶體驗(yàn)

　　2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用

　　3. Ajax引擎在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，從而減少了大用戶量下的服務(wù)器負(fù)載。

　　Ajax的工作原理

　　Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶。

　　在創(chuàng)建Web站點(diǎn)時(shí)，在客戶端執(zhí)行屏幕更新為用戶提供了很大的靈活性

　　工作原理：相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層，使用戶操作與服務(wù)器響應(yīng)異步化，可以把一些服務(wù)器的工作轉(zhuǎn)嫁給客戶端。

　　傳統(tǒng)的Http模式新的AJAX模式

　　AJAX的缺點(diǎn)：

　　無法回退，不能為每個(gè)頁面建立標(biāo)簽，無法送出一個(gè)鏈接。

　　不能過分使用，客戶端代碼太大，也會影響性能。

　　異步方式需要用戶接

　　IE以前版本不支持

　　安全考慮;在瀏覽器中可以看到源代碼;建立XHR對象，必須包括URI。

看了ajax學(xué)習(xí)心得還看：

1.html5培訓(xùn)心得體會

2.企業(yè)學(xué)結(jié)范文3篇

3.初學(xué)者h(yuǎn)tml5如何學(xué)習(xí)

4.學(xué)習(xí)c#心得范文4篇

5.c#學(xué)習(xí)計(jì)劃