jQuery学习笔记：Ajax(二)
接上篇“jQuery學(xué)習(xí)筆記：Ajax(一)”。
3、jQuery.get(url,[data],[callback],[type])
通過遠(yuǎn)程 HTTP GET 請求載入信息。
這是一個(gè)簡單的 GET 請求功能以取代復(fù)雜 $.ajax 。請求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請使用 $.ajax。
返回值? XMLHttpRequest
參數(shù)
url (String) : 待載入頁面的URL地址
data (Map) : (可選) 待發(fā)送 Key/value 參數(shù)。
callback (Function) : (可選) 載入成功時(shí)回調(diào)函數(shù)。
type (String) : (可選) 返回內(nèi)容格式，xml, html, script, json, text, _default。
示例
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";
????$.get(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqGetNormalCallBack,?'text');?//返回?cái)?shù)據(jù)類型
}
function?jqGetNormalCallBack(oData)?{
????$("#spanResult").html(oData);//這里直接json數(shù)據(jù)綁定了，下一個(gè)jquery方法會(huì)有處理
????$("#spanResult").css("display",?"block");
????$("#spanResult").css("color",?"red");
}
AjaxHandler.ashx代碼：
Codeusing?System;
using?System.Collections.Generic;
using?System.Linq;
using?System.Web;
using?System.Web.SessionState;
using?System.Xml;
namespace?MyJQTest
{
????public?class?AjaxHandler?:?IHttpHandler,?IRequiresSessionState
????{
????????///?<summary>
????????///?可復(fù)用
????????///?</summary>
????????public?bool?IsReusable
????????{
????????????get
????????????{
????????????????return?true;
????????????}
????????}
????????public?void?ProcessRequest(HttpContext?context)
????????{
????????????AjaxOperations(context);
????????}
????????private?void?AjaxOperations(HttpContext?context)
????????{
????????????string?action?=?context.Request["action"];
????????????if?(!string.IsNullOrEmpty(action))
????????????{
????????????????switch?(action)
????????????????{
????????????????????default:
????????????????????????break;
????????????????????case?"jquery":
????????????????????????ProcessJQueryRequest(context);
????????????????????????break;
????????????????}
????????????}
????????}
????????private?void?ProcessJQueryRequest(HttpContext?context)
????????{
????????????context.Response.ClearContent();
????????????context.Response.ContentType?=?"text/plain";?//設(shè)置輸出流類型
??????????????context.Response.Cache.SetCacheability(HttpCacheability.NoCache);?//沒有緩存
??????????????string?userName?=?context.Request["userName"].Trim();
????????????string?location?=?context.Request["location"].Trim();
????????????string?jsonObject?=?"{\"userName\":\""?+?userName?+?"\",\"location\":\""?+?location?+?"\"}";
????????????context.Response.Write(jsonObject);
????????}
????}
}
ps：本例中，我們返回的是一段json類型的數(shù)據(jù)，在客戶端沒有對json類型數(shù)據(jù)進(jìn)行處理，在下一個(gè)方法（jQuery.getJSON）中會(huì)改進(jìn)處理的。
4、jQuery.getJSON(url,[data],[callback])
通過 HTTP GET 請求載入 JSON 數(shù)據(jù)。
在 jQuery 1.2 中，您可以通過使用JSONP 形式的回調(diào)函數(shù)來加載其他網(wǎng)域的JSON數(shù)據(jù)，如 "myurl?callback=?"。jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
注意：此行以后的代碼將在這個(gè)回調(diào)函數(shù)執(zhí)行前執(zhí)行。
返回值? XMLHttpRequest
參數(shù)
url (String) : 發(fā)送請求地址。
data (Map) : (可選) 待發(fā)送 Key/value 參數(shù)。
callback (Function) : (可選) 載入成功時(shí)回調(diào)函數(shù)。
示例
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";
????//getJSON方法調(diào)用
????$.getJSON(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqGetJsonCallBack);?//返回json數(shù)據(jù)類型
}
//對json數(shù)據(jù)進(jìn)行處理?(oData是json類型的數(shù)據(jù))
function?jqGetJsonCallBack(oData)?{
????var?oJsonStr?=?"";
????//取json中的數(shù)據(jù),并呈現(xiàn)
????oJsonStr?+=?"userName:"?+?oData.userName?+?" location:"?+?oData.location?+?"<br/>";
????//在div中顯示所有數(shù)據(jù)
????$("#divResult").html(oJsonStr);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}
?5、jQuery.getScript(url,[callback])
通過 HTTP GET 請求載入并執(zhí)行一個(gè) JavaScript 文件。
jQuery 1.2 版本之前，getScript 只能調(diào)用同域 JS 文件。 1.2中，您可以跨域調(diào)用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步執(zhí)行腳本。如果通過 getScript 加入腳本，請加入延時(shí)函數(shù)。
返回值? XMLHttpRequest
參數(shù)
url (String) : 待載入 JS 文件地址。
callback (Function) : (可選) 成功載入后回調(diào)函數(shù)。
示例
function?jqAjaxTest()?{
????var?jsUrl?=?"js/jqLoadJs.js";
????//getScript方法調(diào)用
????$.getScript(jsUrl,?jqGetJsCallBack);
}
//oData返回的是整個(gè)js路徑下js文件內(nèi)容
function?jqGetJsCallBack(oData)?{
????alert(oData);
}
6、jQuery.post(url,[data],[callback],[type])
通過遠(yuǎn)程 HTTP POST 請求載入信息。
這是一個(gè)簡單的 POST 請求功能以取代復(fù)雜 $.ajax 。請求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請使用 $.ajax。
返回值? XMLHttpRequest
參數(shù)
url (String) : 發(fā)送請求地址。
data (Map) : (可選) 待發(fā)送 Key/value 參數(shù)。
callback (Function) : (可選) 發(fā)送成功時(shí)回調(diào)函數(shù)。
type (String) : (可選) 返回內(nèi)容格式，xml, html, script, json, text, _default。
示例
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");?//返回text數(shù)據(jù)類型
}
function?jqPostCallBack(oData)?{
????//在div中顯示所有數(shù)據(jù)
????$("#divResult").html(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}
?二、Ajax事件
1、ajaxComplete(callback)
AJAX 請求完成時(shí)執(zhí)行函數(shù)。Ajax 事件。
XMLHttpRequest 對象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。
返回值? jQuery
參數(shù)
callback (Function) : 待執(zhí)行函數(shù)
示例
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");?//返回text數(shù)據(jù)類型
????//AJAX?請求完成時(shí)執(zhí)行函數(shù)
????$("#divResult").ajaxComplete(function(event,?request,?settings)?{
????????$(this).append("<br/>請求完成.");
????});
}
function?jqPostCallBack(oData)?{
????//在div中顯示所有數(shù)據(jù)
????$("#divResult").html(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}
2、ajaxError(callback)
AJAX 請求發(fā)生錯(cuò)誤時(shí)執(zhí)行函數(shù)。Ajax 事件。
XMLHttpRequest 對象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。捕捉到的錯(cuò)誤可作為最后一個(gè)參數(shù)傳遞。
返回值? jQuery
參數(shù)
callback (Function) : 待執(zhí)行函數(shù)
function (event, XMLHttpRequest, ajaxOptions, thrownError) {
????? // thrownError 只有當(dāng)異常發(fā)生時(shí)才會(huì)被傳遞
????? this; // 監(jiān)聽的 dom 元素
}
示例
Codefunction?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandlers.ashx";?//正確的文件名??AjaxHandler.ashx??這里故意寫錯(cuò)??引發(fā)ajaxError事件
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");
}
//AJAX?請求發(fā)生錯(cuò)誤時(shí)執(zhí)行函數(shù)?(這一段放在jqAjaxTest函數(shù)內(nèi)也可以)
$("#divResult").ajaxError(function(event,?request,?settings)?{
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
????$(this).append("<br/>出錯(cuò)頁面:"?+?settings.url);
});
function?jqPostCallBack(oData)?{
????//在div中顯示所有數(shù)據(jù)
????$("#divResult").html(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}
3、ajaxSend(callback)
AJAX 請求發(fā)送前執(zhí)行函數(shù)。Ajax 事件。
XMLHttpRequest 對象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。
返回值? jQuery
參數(shù)
callback (Function) : 待執(zhí)行函數(shù)
示例
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";?
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");
}
//AJAX?請求發(fā)送前執(zhí)行函數(shù)
$("#divResult").ajaxSend(function(evt,?request,?settings)?{
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
????$(this).append("<br/>開始請求:?"?+?settings.url?+?"<br/>");
});
function?jqPostCallBack(oData)?{
????//在div中顯示所有數(shù)據(jù)
????$("#divResult").append(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}
4、ajaxStart(callback)
AJAX 請求開始時(shí)執(zhí)行函數(shù)。Ajax 事件。
返回值? jQuery
參數(shù)
callback (Function) : 待執(zhí)行函數(shù)
示例
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";?
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");
}
//AJAX?請求開始時(shí)執(zhí)行函數(shù)
$("#divResult").ajaxStart(function()?{
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
????$(this).append("<br/>請求開始了<br/>");
});
function?jqPostCallBack(oData)?{
????//在div中顯示所有數(shù)據(jù)
????$("#divResult").append(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}
5、ajaxStop(callback)
AJAX 請求結(jié)束時(shí)執(zhí)行函數(shù)。Ajax 事件。
返回值? jQuery
參數(shù)
callback (Function) : 待執(zhí)行函數(shù)
示例
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";?
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");
}
//AJAX?請求開始時(shí)執(zhí)行函數(shù)
$("#divResult").ajaxStop(function()?{
????$(this).append("<br/>請求已經(jīng)結(jié)束了<br/>");
});
function?jqPostCallBack(oData)?{
????//在div中顯示所有數(shù)據(jù)
????$("#divResult").append(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}
6、ajaxSuccess(callback)
AJAX 請求成功時(shí)執(zhí)行函數(shù)。Ajax 事件。
XMLHttpRequest 對象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。
返回值? jQuery
參數(shù)
callback (Function) : 待執(zhí)行函數(shù)
示例
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";?
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");
}
//AJAX?請求成功時(shí)執(zhí)行函數(shù)
$("#divResult").ajaxSuccess(function(evt,?request,?settings)?{
????$(this).append("<br/>請求成功<br/>");
????$(this).append(settings.url);
});
function?jqPostCallBack(oData)?{
????//在div中顯示所有數(shù)據(jù)
????$("#divResult").append(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}
三、其他
1、jQuery.ajaxSetup(options)
設(shè)置全局 AJAX 默認(rèn)選項(xiàng)。
參數(shù)見 '$.ajax' 說明。
返回值? jQuery
參數(shù)
options (可選) : 選項(xiàng)設(shè)置。所有設(shè)置項(xiàng)均為可選設(shè)置。
示例
$.ajaxSetup({
????url:?"AjaxHandler.ashx",
????global:?false,
????type:?"POST"
});
2、serialize()
序列化表單內(nèi)容為字符串。
返回值? jQuery
參數(shù)
序列化表單內(nèi)容為字符串，用于 Ajax 請求。
示例
????var?oSerializedStr?=?$("form").serialize();?//序列化表單內(nèi)容為字符串
????$("#results").append("<tt>"?+?oSerializedStr?+?"</tt>");
});
文檔片段：
Code<body>
????<p?id="results">
????????<b>Results:?</b>
????</p>
????<form>
????<select?name="single">
????????<option>Single</option>
????????<option>Single2</option>
????</select>
????<select?name="multiple"?multiple="multiple">
????????<option?selected="selected">Multiple</option>
????????<option>Multiple2</option>
????????<option?selected="selected">Multiple3</option>
????</select><br?/>
????<input?type="checkbox"?name="check"?value="check1"?/>
????check1
????<input?type="checkbox"?name="check"?value="check2"?checked="checked"?/>
????check2
????<input?type="radio"?name="radio"?value="radio1"?checked="checked"?/>
????radio1
????<input?type="radio"?name="radio"?value="radio2"?/>
????radio2
????</form>
????<script?src="js/jQTest.js"?type="text/javascript"></script>
</body>
3、serializeArray()
序列化表單內(nèi)容，返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。
返回值? jQuery
參數(shù)
序列化表單內(nèi)容為JSON ，用于 Ajax 請求。
示例
$(document).ready(function()?{
????var?fields?=?$("select,?:radio").serializeArray();?//序列化表單select和raido為json
????jQuery.each(fields,?function(i,?field)?{
????????$("#results").append(field.value?+?"?");
????});?
});
?好了，關(guān)于jQuery的ajax就介紹到這里，筆者的每個(gè)示例都測試通過了。jQuery封裝好的ajax函數(shù)用起來確實(shí)方便，有了這樣的“神兵利器”，以后寫ajax的應(yīng)用程序肯定會(huì)更加得心應(yīng)手。
總結(jié)
以上是生活随笔為你收集整理的jQuery学习笔记：Ajax(二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c# 扩展方法奇思妙用高级篇一：改进 S
- 下一篇： 13.软件限制策略