AJAX參數詳細列表
| 參數名 | 類型 | 描述 |
| url | String | (默認: 當前頁地址) 發送請求的地址。 |
| type | String | (默認: "GET") 請求方式 ("POST" 、 "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，并作為回調函數參數傳遞，可用值: ? ? "xml": 返回 XML 文檔，可用 jQuery 處理。 ? ? "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 } |
error 的一些事項
一、error：function (XMLHttpRequest, textStatus, errorThrown
(默認: 自動判斷 (xml 或 html)) 請求失敗時調用時間。參數有以下三個：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的錯誤對象。如果發生了錯誤，錯誤信息（第二個參數）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。
二、error事件返回的第一個參數XMLHttpRequest有一些有用的信息：
XMLHttpRequest.readyState 狀態碼 ：
- 0 － （未初始化）還沒有調用send()方法?
- 1 － （載入）已調用send()方法，正在發送請求?
- 2 － （載入完成）send()方法執行完成，已經接收到全部響應內容?
- 3 － （交互）正在解析響應內容?
- 4 － （完成）響應內容解析完成，可以在客戶端調用了
XMLHttpRequest.status 返回值狀態碼
AJAX準備知識：JSON
什么是 JSON ？
- JSON 指的是 JavaScript 對象表示法（JavaScript?Object?Notation）
- JSON 是輕量級的文本數據交換格式
- JSON 獨立于語言
- JSON 具有自我描述性，更易理解
JSON 使用 JavaScript 語法來描述數據對象，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。
?
合格的json對象：
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]不合格的json對象：
{ name: "張三", 'age': 32 } // 屬性名必須使用雙引號
[32, 64, 128, 0xFFF] // 不能使用十六進制值
{ "name": "張三", "age": undefined } // 不能使用undefined
{ "name": "張三","birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),"getName": function() {return this.name;} // 不能使用函數和日期對象
}stringify與parse方法
JavaScript中關于JSON對象和字符串轉換的兩個方法：
- JSON.parse(): 用于將一個 JSON 字符串轉換為 JavaScript 對象
JSON.parse('{"name":"Q1mi"}');
JSON.parse('{name:"Q1mi"}') ; // 錯誤
JSON.parse('[18,undefined]') ; // 錯誤- JSON.stringify(): 用于將 JavaScript 值轉換為 JSON 字符串。
JSON.stringify({"name":"Q1mi"})和XML的比較
JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。
JSON 格式有兩個顯著的優點：書寫簡單，一目了然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外添加解析代碼。所以，JSON迅速被接受，已經成為各大網站交換數據的標準格式，并被寫入ECMAScript 5，成為標準的一部分。
XML和JSON都使用結構化方法來標記數據，下面來做一個簡單的比較。
用XML表示中國部分省市數據如下：
<?xml version="1.0" encoding="utf-8"?>
<country><name>中國</name><province><name>黑龍江</name><cities><city>哈爾濱</city><city>大慶</city></cities></province><province><name>廣東</name><cities><city>廣州</city><city>深圳</city><city>珠海</city></cities></province>
</country>用JSON表示如下：
{"name": "中國","province": [{"name": "黑龍江","cities": {"city": ["哈爾濱", "大慶"]}}, {"name": "廣東","cities": {"city": ["廣州", "深圳", "珠海"]}}]
}由上面的兩端代碼可以看出，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，并且在數據交換方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得節約傳輸數據所占用得帶寬。
AJAX簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據并更新部分網頁內容。（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。
- 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
- 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。
AJAX常見應用情景
搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。還有一個很重要的應用場景就是注冊時候的用戶名的查重。當文件框發生了輸入變化時，使用AJAX技術向服務器發送一個請求，然后服務器會把查詢到的結果響應給瀏覽器，最后再把后端返回的結果展示出來。
- 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
- 當請求發出后，瀏覽器還可以進行其他操作，無需等待服務器的響應！
AJAX的優缺點
優點：
- AJAX使用JavaScript技術向服務器發送異步請求；
- AJAX請求無須刷新整個頁面；
- 因為服務器響應內容不再是整個頁面，而是頁面中的部分內容，所以AJAX性能高；
jQuery實現的AJAX
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>
<button class="send_Ajax">send_Ajax</button>
<script>//$.ajax的兩種使用方式://$.ajax(settings);//$.ajax(url,[settings]);$(".send_Ajax").click(function(){$.ajax({url:"/handle_Ajax/",type:"POST",data:{username:"Yuan",password:123},success:function(data){alert(data)},//=================== error============error: function (jqXHR, textStatus, err) {// jqXHR: jQuery增強的xhr// textStatus: 請求完成狀態// err: 底層通過throw拋出的異常對象，值與錯誤類型有關console.log(arguments);},//=================== complete============complete: function (jqXHR, textStatus) {// jqXHR: jQuery增強的xhr// textStatus: 請求完成狀態 success | errorconsole.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);console.log('textStatus: %s', textStatus);},//=================== statusCode============statusCode: {'403': function (jqXHR, textStatus, err) {console.log(arguments); //注意：后端模擬errror方式：HttpResponse.status_code=500},'400': function () {}}})})
</script>
</body>
</html>views.py：
def ajax_test(request):user_name = request.POST.get("username")password = request.POST.get("password")print(user_name, password)return HttpResponse("OK")$.ajax參數
請求參數
###################### data ################
當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式
(urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。
$.ajax("/test",{ //此時的data是一個json形式的對象data:{a:1,b:2}) //?a=1&b=2
###################### processData ################
聲明當前的data數據是否進行轉碼或預處理，默認為true，即預處理；
if為false，那么對data：{a:1,b:2}會調用json對象的toString()方法，即{a:1,b:2}.toString()
,最后得到一個［object，Object］形式的結果。###################### contentType ################
默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。
用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交數據，
比如contentType:"application/json"，即向服務器發送一個json字符串：
$.ajax("/ajax_get",{data:JSON.stringify({a:22,b:33}),contentType:"application/json",type:"POST",
}); //{a: 22, b: 33}
注意：contentType:"application/json"一旦設定，data必須是json字符串，不能是json對象
views.py: json.loads(request.body.decode("utf8"))###################### traditional ################
一般是我們的data數據有數組時會用到 ：data:{a:22,b:33,c:["x","y"]},
traditional為false會對數據進行深層次迭代；響應參數
dataType： 預期服務器返回的數據類型,服務器端返回的數據會根據這個值解析后，傳遞給回調函數。默認不需要顯性指定這個屬性，ajax會根據服務器返回的content Type來進行轉換；比如我們的服務器響應的content Type為json格式，這時ajax方法就會對響應的內容進行一個json格式的轉換，if轉換成功，我們在success的回調函數里就會得到一個json格式的對象；轉換失敗就會觸發error這個回調函數。如果我們明確地指定目標類型，就可以使用data Type。dataType的可用值：html｜xml｜json｜text｜script見下dataType實例Django 實現AJAX
from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.
import jsondef login(request):return render(request,'Ajax.html')def ajax_get(request):l=['alex','little alex']dic={"name":"alex","pwd":123}#return HttpResponse(l) #元素直接轉成字符串alexlittle alex#return HttpResponse(dic) #字典的鍵直接轉成字符串namepwdreturn HttpResponse(json.dumps(l))return HttpResponse(json.dumps(dic))# 傳到前端的是json字符串,要想使用,需要JSON.parse(data)
//---------------------------------------------------function testData() {$.ajax('ajax_get', {success: function (data) {console.log(data);console.log(typeof(data)); //dataType:"json",//console.log(data.name);//JSON.parse(data);//console.log(data.name);},})}注解:Response Headers的content Type為text/html,所以返回的是String;但如果我們想要一個json對象設定dataType:"json"即可,相當于告訴ajax方法把服務器返回的數據轉成json對象發送到前端.結果為object當然，return HttpResponse(json.dumps(a),content_type="application/json")這樣就不需要設定dataType:"json"了。content_type="application/json"和content_type="json"是一樣的！AJAX請求如何設置csrf_token
方式1
通過獲取隱藏的input標簽中的csrfmiddlewaretoken值，放置在data中發送。
$.ajax({data: {"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() //使用jQuery取出csrfmiddlewaretoken的值，拼接到data中},
})方式2
通過獲取返回的cookie中的字符串 放置在請求頭中發送。注意：需要引入一個jquery.cookie.js插件。
$.ajax({headers: {"X-CSRFToken": $.cookie('csrftoken')}, //從Cookie取csrftoken，并設置到請求頭中
})或者用自己寫一個getCookie方法：
function getCookie(name) {var cookieValue = null;if (document.cookie && document.cookie !== '') {var cookies = document.cookie.split(';');for (var i = 0; i < cookies.length; i++) {var cookie = jQuery.trim(cookies[i]);// Does this cookie string begin with the name we want?if (cookie.substring(0, name.length + 1) === (name + '=')) {cookieValue = decodeURIComponent(cookie.substring(name.length + 1));break;}}}return cookieValue;
}
var csrftoken = getCookie('csrftoken');每一次都這么寫太麻煩了，可以使用$.ajaxSetup()方法為ajax請求統一設置。
function csrfSafeMethod(method) {// these HTTP methods do not require CSRF protectionreturn (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}$.ajaxSetup({beforeSend: function (xhr, settings) {if (!csrfSafeMethod(settings.type) && !this.crossDomain) {xhr.setRequestHeader("X-CSRFToken", csrftoken);}}
});注意：
如果使用從cookie中取csrftoken的方式，需要確保cookie存在csrftoken值。
如果你的視圖渲染的HTML文件中沒有包含 {% csrf_token %}，Django可能不會設置CSRFtoken的cookie。這個時候需要使用ensure_csrf_cookie()裝飾器強制設置Cookie。
django.views.decorators.csrf import ensure_csrf_cookie@ensure_csrf_cookie
def login(request):pass更多細節詳見：Djagno官方文檔中關于CSRF的內容上傳文件
form表單上傳文件
html
<h3>form表單上傳文件</h3>
<form action="/upload_file/" method="post" enctype="multipart/form-data"><p><input type="file" name="upload_file_form"></p><input type="submit">
</form>view
def upload_file(request):print("FILES:",request.FILES)print("POST:",request.POST)return HttpResponse("上傳成功!")Ajax(FormData)
FormData是什么呢？XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
html
<h3>Ajax上傳文件</h3><p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>
<button id="upload_button">提交</button>
{#注意button標簽不要用在form表單中使用#}<script>$("#upload_button").click(function(){var username=$("#username").val();var upload_file=$("#upload_file_ajax")[0].files[0];var formData=new FormData();formData.append("username",username);formData.append("upload_file_ajax",upload_file);$.ajax({url:"/upload_file/",type:"POST",data:formData,contentType:false,processData:false,success:function(){alert("上傳成功!")}});})
</script>views同上
偽造Ajax上傳文件
iframe標簽
<iframe> 標簽規定一個內聯框架。一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。
示例：<iframe?src="http://www.baidu.com" width="1000px" height="600px"></iframe>
iframe+form
<h3>偽造Ajax上傳文件</h3>
<form action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data"><p><iframe name="ifr" id="ifr"></iframe></p><p><input type="file" name="upload_file"></p><p><input type="text" name="user"></p><input type="button" value="提交" id="submitBtn">
</form>
<script>$("#submitBtn").click(function(){$("#ifr").load(iframeLoaded);$("#form2").submit();});function iframeLoaded(){alert(123)}
</script>序列化
serialize()函數用于序列化一組表單元素，將表單內容編碼為用于提交的字符串。
serialize()函數常用于將表單內容序列化，以便用于AJAX提交。
該函數主要根據用于提交的有效表單控件的name和value，將它們拼接為一個可直接用于表單提交的文本字符串，該字符串已經過標準的URL編碼處理(字符集編碼為UTF-8)。
該函數不會序列化不需要提交的表單控件，這和常規的表單提交行為是一致的。例如：不在<form>標簽內的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。
與常規表單提交不一樣的是：常規表單一般會提交帶有name的按鈕控件，而serialize()函數不會序列化帶有name的按鈕控件
語法
jQuery?1.0 新增該函數。
語法：jQueryObject.serialize( )
返回值
serialize()函數的返回值為String類型，返回將表單元素編碼后的可用于表單提交的文本字符串。
<form name="myForm" action="http://www.365mini.com" method="post"><input name="uid" type="hidden" value="1" /><input name="username" type="text" value="張三" /><input name="password" type="text" value="123456" /><select name="grade" id="grade"><option value="1">一年級</option><option value="2">二年級</option><option value="3" selected="selected">三年級</option><option value="4">四年級</option><option value="5">五年級</option><option value="6">六年級</option></select><input name="sex" type="radio" checked="checked" value="1" />男<input name="sex" type="radio" value="0" />女<input name="hobby" type="checkbox" checked="checked" value="1" />游泳<input name="hobby" type="checkbox" checked="checked" value="2" />跑步<input name="hobby" type="checkbox" value="3" />羽毛球<input name="btn" id="btn" type="button" value="點擊" />對<form>元素進行序列化可以直接序列化其內部的所有表單元素。
// 序列化<form>內的所有表單元素
// 序列化后的結果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );我們也可以直接對部分表單元素進行序列化。
// 序列化所有的text、select、checkbox表單元素
// 序列化后的結果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );serialize()函數通常用于將表單內容序列化，以便通過AJAX方式提交。
$("#btn").click( function(){// 將當前表單內容以POST請求的AJAX方式提交到"http://www.365mini.com"$.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){alert( "AJAX提交成功!" ); } );
} );?
)
