快捷導(dǎo)航

那些年，我還在學(xué)習(xí)Ajax 學(xué)習(xí)筆記

更新時(shí)間：2012年03月06日 23:11:47 作者：

Ajax不用說，每個(gè)做web開發(fā)的同志都知道，因?yàn)樗菍W(xué)習(xí)web開發(fā)必經(jīng)之路，不管你是做asp.net，還是javaWeb，還是PHP

通俗的說，Ajax就是一種網(wǎng)頁無刷技術(shù)，以提高用戶體驗(yàn)，Ajax并不是什么新的技術(shù)，只是在那些年才火了起來（Ajax火起來時(shí)，哥只知道聊QQ），所以它就備受觀注；當(dāng)然，那些年就開始學(xué)習(xí)了。
一、完成Ajax請(qǐng)求
1、在完成這個(gè)請(qǐng)求之前，先來了解一下Ajax是什么，它的全名叫異步的javascript與、XML，從名稱可以看出，它與javascript和XML有不解之緣，Ajax使用XML地HTTP請(qǐng)求，通過瀏覽器建立的xmlHttpRequest對(duì)象，異步的向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器處理請(qǐng)求后，將響應(yīng)通過xmlHttp.responseText屬性返回給javascript函數(shù)處理數(shù)據(jù)，進(jìn)一步使用javascript處理DOM，完成頁面的局部更新。
2、代碼示例，使用XMLHttpRequest完成請(qǐng)求
代碼：JS：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
//XMLHttpRequest對(duì)象 
var xmlHttp; 
function buildXMLHttpRequest() { 
//判斷瀏覽器 
if (window.ActiveXObject) { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 
} else if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); //非IE 
} else { 
xmlHttp = NaN; 
} 
} 
function sendRequest() { 
buildXMLHttpRequest(); 
//Post請(qǐng)求 
xmlHttp.open("post", "Handler.ashx", true); 
xmlHttp.onreadystatechange = function() { 
//判斷狀態(tài) 
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
alert(xmlHttp.responseText); 
} 
} 
//定義傳輸?shù)奈募﨟TTP頭信息 
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //采用的編碼方式 
xmlHttp.send("value=1"); 
} 
</script> 

Handler.ashx：

復(fù)制代碼代碼如下:

 
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
context.Response.Write("Hello World xin_ny 中文件 "+context.Request.Params["value"]); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
} 

效果：

二、Jquery中的Ajax方法
記得在那些年，我還在學(xué)習(xí)Jquery中沒有說到它的Ajax方法，這里就補(bǔ)上了，JQuery提供了很多Ajax函數(shù)，方便了開發(fā)人員的使用，不再需要開發(fā)人員創(chuàng)建XMLHttpRequest對(duì)象來完成請(qǐng)求，可直接使用JQuery庫中的Ajax函數(shù)完成請(qǐng)求，并兼容性也較好，下面就來看一下Jquery的Ajax吧。
1、Jquery得到數(shù)據(jù)方法:load()
例：

復(fù)制代碼代碼如下:

 
function ajaxMethod() { 
$("#spanDiv").load("DemoData.txt"); 
} 

2、Jquery的get(url,[data],callback)方法
例：

復(fù)制代碼代碼如下:

 
function ajaxGet() { 
//對(duì)象數(shù)據(jù)源 
var obj = { first: "First", second: "Second" }; 
$.get( 
"CallBackData.ashx", obj, function(data) { 
$("#spanDiv").html(data); 
}); 
} 

3、Jquery的post(url,[data],callback,type)方法
例：

復(fù)制代碼代碼如下:

 
function ajaxPost() { 
//對(duì)象數(shù)據(jù)源 
var obj = { first: "First", second: "Second" }; 
$.get( 
"CallBackData.ashx", obj, function(data) { 
$("#spanDiv").text(decodeURI(data)); 
}); 
} 

4、Jquery的ajax(option)方法
例：

復(fù)制代碼代碼如下:

 
function ajaxAjax() { 
//對(duì)象數(shù)據(jù)源 
var obj = { first: "First", second: "Second" }; 
$.ajax({ 
type: "Get", 
url: "CallBackData.ashx", 
data: obj, 
success: function(data) { 
$("#spanDiv").text(decodeURI(data)); 
} 
}); 
} 

5、Jquery的ajaxSetup(options)方法，設(shè)置全局的ajax的配置
例：

復(fù)制代碼代碼如下:

 
function ajaxAjaxSetup() { 
//對(duì)象數(shù)據(jù)源 
var obj = { first: "First", second: "Second" }; 
$.ajax({ 
type: "Post", 
url: "CallBackData.ashx", 
data: obj, 
success: function(data) { 
$("#spanDiv").text(decodeURI(data)); 
} 
}); 
} 

6、Jquery的ajaxSubmit(options)方法，提交表單
總結(jié)
那些年學(xué)習(xí)Ajax,提高了用戶體驗(yàn)，同時(shí)也減輕了服務(wù)器的負(fù)擔(dān)，此文經(jīng)回憶那些年學(xué)習(xí)Ajax的日子。

您可能感興趣的文章: