Ajax就是經過 HTTP 請求加載遠程數據。一般用於定製一些http請求來靈活的完成前端與後端的數據交互需求。php
注意,全部的選項均可以經過$.ajaxSetup()函數來全局設置。html
JQuery Ajax之因此能發送http請求, 是調用了html中的XMLHttpRequest對象(原生ajax)。前端
另外還有一種跨域Ajax。這個會在最後介紹到 。jquery
1
2
3
4
5
6
7
|
$.ajax({
type: 'POST',
url: url ,
data: data ,
success: success ,
dataType: dataType
});
|
參數名 | 類型 | 描述 |
url | String | (默認: 當前頁地址) 發送請求的地址。 |
type | String | (默認: "GET") 請求方式 ("POST" 或 "GET"), 默認爲 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可使用,但僅部分瀏覽器支持。 |
timeout | Number | 設置請求超時時間(毫秒)。此設置將覆蓋全局設置。 |
async | Boolean | (默認: true) 默認設置下,全部請求均爲異步請求。若是須要發送同步請求,請將此選項設置爲 false。注意,同步請求將鎖住瀏覽器,用戶其它操做必須等待請求完成才能夠執行。 |
beforeSend | Function | 發送請求前可修改 XMLHttpRequest 對象的函數,如添加自定義 HTTP 頭。XMLHttpRequest 對象是惟一的參數。function (XMLHttpRequest) { this; // the options for this ajax request} |
cache | Boolean | (默認: true) jQuery 1.2 新功能,設置爲 false 將不會從瀏覽器緩存中加載請求信息。 |
complete | Function | 請求完成後回調函數 (請求成功或失敗時均調用)。參數: XMLHttpRequest 對象,成功信息字符串。function (XMLHttpRequest, textStatus) { this; // the options for this ajax request} |
contentType | String | (默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。 |
data | Object, String |
發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格式。若是爲數組,jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。 |
dataType | String | 預期服務器返回的數據類型。若是不指定,jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText,並做爲回調函數參數傳遞,可用值:ajax "xml": 返回 XML 文檔,可用 jQuery 處理。json "html": 返回純文本 HTML 信息;包含 script 元素。後端 "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。跨域 "json": 返回 JSON 數據 。數組 "jsonp": JSONP 格式。使用 JSONP 形式調用函數時,如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名,以執行回調函數。瀏覽器
|
error | Function | (默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。這個方法有三個參數:XMLHttpRequest 對象,錯誤信息,(可能)捕獲的錯誤對象。function (XMLHttpRequest, textStatus, errorThrown) { // 一般狀況下textStatus和errorThown只有其中一個有值 this; // the options for this ajax request} |
global | Boolean | (默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用於控制不一樣的Ajax事件 |
ifModified | Boolean | (默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。 |
processData | Boolean | (默認: true) 默認狀況下,發送的數據將被轉換爲對象(技術上講並不是字符串) 以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM 樹信息或其它不但願轉換的信息,請設置爲 false。 |
success | Function | 請求成功後回調函數。這個方法有兩個參數:服務器返回數據,返回狀態function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
//1.$.ajax帶json數據的異步請求
var aj = $.ajax( {
url:'productManager_reverseUpdate',// 跳轉到 action
data:{
selRollBack : selRollBack,
selOperatorsCode : selOperatorsCode,
PROVINCECODE : PROVINCECODE,
pass2 : pass2
},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
if(data.msg =="true" ){
// view("修改爲功!");
alert("修改爲功!");
window.location.reload();
}else{
view(data.msg);
}
},
error : function() {
// view("異常!");
alert("異常!");
}
});
//2.$.ajax序列化表格內容爲字符串的異步請求
function noTips(){
var formParam = $("#form1").serialize();//序列化表格內容爲字符串
$.ajax({
type:'post',
url:'Notice_noTipsNotice',
data:formParam,
cache:false,
dataType:'json',
success:function(data){
}
});
}
//3.$.ajax拼接url的異步請求
var yz=$.ajax({
type:'post',
url:'validatePwd2_checkPwd2?password2='+password2,
data:{},
cache:false,
dataType:'json',
success:function(data){
if( data.msg =="false" ) //服務器返回false,就將validatePassword2的值改成pwd2Error,這是異步,須要考慮返回時間
{
textPassword2.html("<
font
color='red'>業務密碼不正確!</
font
>");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},
error:function(){}
});
//4.$.ajax拼接data的異步請求
$.ajax({
url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',
type:'post',
data:'merName='+values,
async : false, //默認爲true 異步
error:function(){
alert('error');
},
success:function(data){
$("#"+divs).html(data);
}
});
|
1.data主要方式有三種,html拼接的,json數組,form表單經serialize()序列化的;經過dataType指定,不指定智能判斷。
2.$.ajax只提交form以文本方式,若是異步提交包含<file>上傳是傳過不過去,須要使用jquery.form.js的$.ajaxSubmit
默認狀況下,ajax只能給本身的域名發送ajax請求。
跨域請求是指經過ajax去訪問非本網站域名,與其餘網站進行數據交互。這種請求受到瀏覽器「同源策略」的限制,會被瀏覽器自己攔截(在收到迴應數據的時候被瀏覽器攔截,實際請求已經發送出去)。
jsonp 和 跨域資源共享就是解決ajax跨域請求的兩種方式。具體案例,能夠查看連接:Ajax大保健全套