jq中阿賈克斯的格式及做用

時間 2019-12-08

標籤格式欄目 JavaScript 简体版

原文原文鏈接

jq中阿賈克斯的格式及做用javascript

Ajax,我一直讀的是"阿賈克斯",據當時大學老師講該讀音出處是根據當年風靡歐洲的荷蘭足球俱樂部阿賈克斯的名字來的,我以爲說法挺靠譜的。css

jQuery封裝了Ajax的交互過程，用戶不須要考慮XMLHttpRequest對象的兼容性問題以及使用XMLHttpRequest創建鏈接、發送請求、發送方式、接收方式等細節，利用jquery定義html

的幾個簡單方法，便可輕鬆實現客戶端與服務端異步通訊的問題，從而幫助開發人員從繁瑣的技術細節中解脫出來，專心於業務層開發工做。java

最初始的JavaScript的Ajax在剛剛接觸編程的時候接觸過，如今都忘沒了，只記得首先得獲取XMLHttpRequest對象，實際開發中用的全都是jQuery封裝好的Ajax，用的也是很繁。jquery

jQuery中$.ajax()方法屬於最底層的方法，第二層是load()、$.get()和$.post()方法，第三層是$.getScript()和$.getJSON()方法，其中當屬第二層的三個方法使用的頻率最高。ajax

一、使用get和post請求編程

get()方法包含4個參數，說明以下：json

第一個參數表示要請求的URL地址瀏覽器

第二個參數表示一個對象結構的名/值對列表緩存

第三個參數表示異步交互成功以後調用的回調函數，回調函數的參數值爲服務器端相應的信息。

第四個參數表示服務器端響應信息返回的內容格式(如XML、HTML、Script、JSON、Text)

其中第一個參數Url是必選參數，後面三個爲可選參數。

get()方法是隻能在請求成功後調用回調函數,若是要在出錯的時候執行回調函數，則必須使用$.ajax()方法。第二個參數所傳遞的參數能夠寫在url後面。

[html] view plain copy

print?

<span style="font-family:SimSun;font-size:12px;"> $.get(
"test1.jsp",
{
name:"haha",
pass:"123"
},
function(data){ //回調函數
alert(data); //響應信息
}
)
就能夠改爲
$.get
(
"test1.jsp?name=haha&pass=123",function(data){
alert(data);
}
) </span>

jQuery還定義了兩個專用方法getJSON()和getScript()。這兩個方法的功能和用法與get是徹底相同的,只是支持前三個參數,不須要設置第四個參數，從他們的名字上就看出了他

們已經指定響應數據的類型。

post()方法與get()方法幾乎相同,只是請求方式的不一樣,具體選擇哪一種請求方式開發人員本身根據特定需求去決定。

二、$.ajax

$.ajax方法的一些參數
url	發送請求的地址,默認爲當前頁面地址。
type	設置請求方式，如GET或者POST，默認爲GET。
timeout	設置請求超時時間(毫秒)。此設置將覆蓋全局設置。
data	發送到服務器的數據。將自動轉換爲請求字符串格式,必須爲key/value格式。
dataType	預期服務器返回的數據類型。若是不指定，jQuery自動根據HTTP包含的MINE信息返回responseXML或responseText。 xml：返回xml文檔，可用jquery處理 html：返回純文本HTML信息：包含的script標籤會在插入DOM時執行 script：返回純文本JavaScript代碼。不會自動緩存結果,除非設置了cache參數。 json：返回JSON數據 text：返回純文本字符串
async	boolean類型,這個參數極爲重要！！設置是否爲異步請求,默認爲true,即全部請求均爲異步請求。若是須要發送同步請求,設置爲false便可。同步和異步的區別,同步請求將鎖住瀏覽器,用戶其餘操做必須等待請求完成才能夠執行;而異步請求不會影響其餘代碼的執行。回想一下之前遇到過這種問題,就是在ajax方法內給變量賦值,再ajax方法後面alert該變量,有時候是得不到ajax方法內賦予的那個值。就是由於ajax請求設置的是異步請求的緣由。
beforeSend	發送請求可修改XMLHttpRequest對象的函數,如添加自定義的HTTP頭,XMLHttpRequest對象時惟一參數，該函數若是返回fasle,能夠取消本次Ajax請求。不經常使用，反正我是還沒用過。
cache	設置緩存。默認值爲true,當dataType爲script的時候默認值是false，設置爲false的時候將不會從瀏覽器緩存中加載請求信息。之前遇到過這個參數設置不對致使的問題,比較經常使用。
complete	請求完成後的回調函數(請求成功和失敗均調用)。該函數包含兩個參數：XMLHttpRequest對象和一個描述成功請求的類型的字符串。
global	是否觸發全局Ajax事件，默認值爲true。設置爲false將不會觸發全局ajax事件，如ajaxStart或ajaxStop可用於控制不一樣的Ajax事件
success	請求成功後的回調函數,函數的參數是由服務器返回並根據dataType參數進行處理後的數據
error	請求失敗時調用的回調函數。該函數包含三個參數：XMLHttpRequest對象、錯誤信息（可選）、捕獲的錯誤對象。若是發生了錯誤,錯誤信息（第二個參數）除了獲得null以外，還多是timeout、error、notmodified和parsererror。
scriptCharset	只有當請求時datatype爲jsonp或script,而且type是GET纔會用於強制修改charset。一般在本地和遠程的內容編碼不一樣時使用。
dataFilter	給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數，data是ajax返回的原始數據，type是ajax請求時設置的dataType參數。函數的返回值將由jquery進一步處理。

其他也有一些，幾乎沒用過，不整理了。

三、跟蹤狀態

jQuery在XMLHttpRequest對象定義的readyState屬性基礎上，對異步交互中服務器響應狀態進行封裝,提供了6個響應事件,以便於進一步細化對整個請求響應過程的跟蹤

[html] view plain copy

print?

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//頁面加載方法
$(function(){
$("input").click(function(){
$.ajax({
type:"POST",
url:"addClass.html",
data :"name=css8"
});
//設置全局ajax跟蹤事件
$(document).ajaxStart(function(){
alert("Ajax請求開始")
});
$(document).ajaxSend(function(){
alert("Ajax請求將要發送")
});
$(document).ajaxComplete(function(){
alert("Ajax請求完成")
});
$(document).ajaxSuccess(function(){
alert("Ajax請求成功")
});
$(document).ajaxStop(function(){
alert("Ajax請求結束")
});
$(document).ajaxError(function(){
alert("Ajax請求失敗")
});
})
})
</script>
</head>
<body>
<input type="button" value="ajax請求過程">
</body>
</html></span>

四、設置Ajax全局參數

對於頻繁與服務器進行交互的頁面來講,每一次交互都要設置許多選項,這種操做是很繁瑣的,也容易出錯。爲此,jQuery定義了ajaxSetup()方法，該方法能夠預設異步交互中的通用

選項，從而減輕頻繁設置選項的繁瑣。ajaxSetup()方法的參數跟$.ajax()方法的參數相似,都是一個參數列表,在該方法中設置的選項能夠實現全局共享,從而在具體的交互中只要

設置個性化參數便可。

使用方法：

[html] view plain copy

print?

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//頁面加載方法
$(function(){
$.ajaxSetup({
type:"POST",
dataType:"text",
success:function(data){
alert(data);
}
});
$("input").eq(0).click(function(){
$.ajax({
data:"name=wang"
});
});
$("input").eq(1).click(function(){
$.ajax({
data:"name=zhang"
});
});
})
</script>
</head>
<body>
<input type="button" value="按鈕1" onclick="">
<input type="button" value="按鈕2" onclick="">
</body>
</html></span>