Ajax在jQuery中應用--jQuery基礎知識點(5)
阿新 • • 發佈:2019-01-30
Ajax(Asynchronous JavaScript and XML),其核心是通過XMLHttpRequest物件,以一種非同步的方式,向伺服器傳送資料請求,並通過該物件接收請求返回的資料,從而完成人機互動的資料操作。Ajax技術並不侷限於Web動態頁面,在普通的靜態HTML頁面中同樣可以實現!
1. 傳統的JavaScript方法實現Ajax功能2. load(url,[data],[callback])方法實現Ajax功能var objXmlHttp = null; //宣告一個空的XMLHTTP變數 function CreateXMLHTTP() { //根據瀏覽器的不同,返回該變數的實體物件 if (window.ActiveXObject) { objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { if (window.XMLHttpRequest) { objXmlHttp = new XMLHttpRequest(); } else { alert("初始化XMLHTTP錯誤!"); } } } function GetSendData() { document.getElementById("divTip").innerHTML = "<img alt='' title='正在載入中...' src='Images/Loading.gif' />"; //初始化內容 var strSendUrl = "b.html?date="+Date(); //設定傳送地址變數並賦初始值 CreateXMLHTTP(); //例項化XMLHttpRequest物件 objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest objXmlHttp.onreadystatechange = function() { //回撥事件函式 if (objXmlHttp.readyState == 4) { //如果請求完成載入 if (objXmlHttp.status == 200) { //如果響應已成功 //顯示獲取的資料 document.getElementById("divTip").innerHTML = objXmlHttp.responseText; } } } objXmlHttp.send(null); //send傳送設定的請求 }
load()方法可以很快地載入資料到頁面中,但如需對獲取的資料進行處理,必須在先插入頁面中,然後才能進行,執行效率較低。
例:$("#divTip").load("b.html"); //load()方法載入資料
3. getJSON(url,[data],[callback])函式獲取資料
採用將要獲取的資料集另存為一種輕量級的資料交換格式,即JSON檔案格式
<span style="white-space:pre"></span>$.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空標記中的內容 var strHTML = ""; //初始化儲存內容變數 $.each(data, function(InfoIndex, Info) { //遍歷獲取的資料 strHTML += "姓名:" + Info["name"] + "<br>"; strHTML += "性別:" + Info["sex"] + "<br>"; strHTML += "郵箱:" + Info["email"] + "<hr>"; }) $("#divTip").html(strHTML); //顯示處理後的資料 })
4. getScript(url,[data],[callback])函式獲取JS檔案內容
<script type="text/javascript" src="js/*.js"><scirpt> //傳統方式$("<script type="text/javascript" src="js/*.js" />").appendTo("head"); //傳統方式
例:$.getScript("UserInfo.js");//開啟已獲取返回資料的檔案
5. get(url,[data],[callback],[type])實現非同步獲取xml文件資料
$.get("UserInfo.xml", function(data) {
$("#divTip").empty(); //先清空標記中的內容
var strHTML = ""; //初始化儲存內容變數
$(data).find("User").each(function() { //遍歷獲取的資料
var $strUser = $(this);
strHTML += "姓名:" + $strUser.find("name").text() + "<br>";
strHTML += "性別:" + $strUser.find("sex").text() + "<br>";
strHTML += "郵箱:" + $strUser.find("email").text() + "<hr>";
})
$("#divTip").html(strHTML); //顯示處理後的資料
})
6. $.get傳送請求$.get("UserInfo.aspx",{ name: encodeURI($("#txtName").val()) },function(data) {
$("#divTip").empty() //先清空標記中的內容
<span style="white-space:pre"> </span>.html(data); //顯示伺服器返回的資料
})
7. $.post傳送請求$.post("User_Info.aspx",{ name: encodeURI($("#txtName").val()),
<span style="white-space:pre"> </span> sex: encodeURI($("#selSex").val()) },function(data) {
$("#divTip").empty() //先清空標記中的內容
<span style="white-space:pre"> </span>.html(data); //顯示伺服器返回的資料
})
8. GET方式不適合傳遞資料量較大的資料GET方式請求的歷史資訊會在瀏覽器的快取中,有一定的安全風險
9. serialize()序列化表單,簡化引數傳值的方式
將所有選擇的DOM元素轉換成能隨Ajax傳遞的字串,即序列化所選擇的DOM元素!
例:$("#frmUserInfo").serialize(), //序列化表單資料
不足:如表單中有多選項被選中時,該方法只能傳遞一項的值
10. $.ajax([options])方法傳送請求,$.ajax() 是最低層方法,功能最強大
$(function() {
<span style="white-space:pre"> </span>$.ajax({ //請求登入頁
url: "login.html", //登入靜態頁
dataType: "html",
success: function(HTML) { //返回頁面內容
$("#frmUserLogin").html(HTML); //將頁面內容置入表單
$("#btnLogin").click(function() { //“登入”按鈕單擊事件
//獲取使用者名稱稱
var strTxtName = encodeURI($("#txtName").val());
//獲取輸入密碼
var strTxtPass = encodeURI($("#txtPass").val());
//開始傳送資料
$.ajax({ //請求登入處理頁
url: "login.aspx", //登入處理頁
dataType: "html",
//傳送請求資料
data: { txtName: strTxtName, txtPass: strTxtPass },
success: function(strValue) { //登入成功後返回的資料
//根據返回值進行狀態顯示
if (strValue == "True") {
$(".clsShow").html("操作提示,登入成功!");
}
else {
$("#divError").show().html("使用者名稱或密碼錯誤!");
}
}
})
})
}
})
})
11. $.ajaxSetup([options])方法全域性設定Ajax,一次設定,全域性有效 $.ajaxSetup({ //設定全域性性的Ajax選項
type: "GET",
url: "UserInfo.xml",
dataType: "xml"
})
$("#Button1").click(function() { //"姓名”按鈕的單擊事件
$.ajax({
success: function(data) { //傳回請求響應的資料
ShowData(data, "姓名", "name"); //顯示"姓名"部分
}
})
})
$("#Button2").click(function() { //"性別”按鈕的單擊事件
$.ajax({
success: function(data) { //傳回請求響應的資料
ShowData(data, "性別", "sex"); //顯示"性別"部分
}
})
})
12. Ajax中的全域性事件ajaxStart和ajaxStop這兩個全域性事件的使用頻率非常高。前者是當請求開始執行時觸發,往往用於編寫一些準備性的工作,如提示“正在獲取資料...”字樣;後者是當請求結束時觸發,在這一事件中,常常與前者配合,說明請求的最後進展狀態,如將顯示中的“正在獲取資料...”字樣修改為“成功獲取資料...”字樣,然後漸漸消失。
//元素繫結全域性ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //顯示元素
})
//元素繫結全域性ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("已成功獲取資料。").hide();
})