AJAX簡介
什么是AJAX
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
AJAX的交互方式
- 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
- 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。
AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
AJAX優點
- AJAX使用JavaScript技術向服務器發送異步請求；
- AJAX請求無須刷新整個頁面；
- 因為服務器響應內容不再是整個頁面，而是頁面中的部分內容，所以AJAX性能高；
AJAX實際應用場景
搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。
還有一個很重要的應用場景就是注冊時候的用戶名的查重。
其實這兩個例子就使用了AJAX技術！當文件框發生了輸入變化時，使用AJAX技術向服務器發送一個請求，然后服務器會把查詢到的結果響應給瀏覽器，最后再把后端返回的結果展示出來。
- 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
- 當請求發出后，瀏覽器還可以進行其他操作，無需等待服務器的響應！
簡單的AJAX示例
下面的例子是做一個簡陋的加法計算器，用戶輸入兩個數字，然后點計算后，將值顯示出來，並且頁面不刷新。
HTML頁面代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax小示例</title>
</head>
<body>
<input id="n1" type="text">
+
<input id="n2" type="text">
=
<input id="he" type="text">
<input id='b1' type="button" value="計算">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
$('#b1').on('click',function () {
var n1 = $('#n1').val();
var n2 = $('#n2').val();
$.ajax({
url:'/add',
type:'GET',
data:{'n1':n1,'n2':n2},
success:function (arg) {
$('#he').val(arg)
}
})
});
</script>
</body>
</html>
頁面效果如下：
urls.py代碼如下：
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^add',views.add)
views.py代碼如下：
from django.shortcuts import render,HttpResponse
def index(request):
return render(request,'index.html')
def add(request):
n1 = int(request.GET.get('n1',0))
n2 = int(request.GET.get('n2',0))
he = n1 + n2
return HttpResponse(he)
$.ajax()參數
$.ajax()方法是jQuery最底層的Ajax實現。它的結構為：$.ajax(options)
該方法只有一個參數，但是這個對象里包含了$.ajax()方法所需要的請求設置以及回調函數等信息，參數以key/value的形式存在，所有的參數都是可選的。常用參數如下：
1.url
要求為String類型的參數，（默認為當前地址）發送請求的頁面。
2.type
要求為String類型的參數，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。
3.timeout
要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。
4.async
要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。
5.cache
要求為Boolean類型的參數，默認為true（當dataType為Script時，默認為false），設置false將不會從瀏覽器緩存中加載請求信息。
6.data
要求為Object或String類型的參數，發送到服務器的數據。如果不是字符串，將自動轉換為字符串格式。get請求中將附加在URL后。防止這種自動轉換，
可以查看processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如：
{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
7.dataType
要求為String類型的參數，預期服務器返回的數據類型。如果不指定，jQuery將自動根據HTTP包的mine信息返回responseXML或responseText，並作為回調函數參數傳遞。可用的類型如下：
xml：返回XML文檔，可用jQuery處理。 html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。 script：返回純文本javascript代碼。不會自動緩存結果，除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。 json：返回JSON數據。 jsonp:JSON格式。使用JSONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。 text：返回純文本字符串。
8.beforeSend
要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是唯一的參數。
function(XMLHttpRequest){
this;//調用本次ajax請求時傳遞的options參數
}
9.complete
要求為Function類型的參數，請求完成后調用的回調函數（請求成功或失敗均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
function(XMLHttpRequest,textStatus){
this; //調用本次ajax請求時傳遞的options參數
}
10.success
要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。
（1）由服務器返回，並根據dataType參數進行處理后的數據。
（2）描述狀態的字符串。
function(data,textStatus){
//data可能是xmlDoc、jsonObj、html、text等
this; //調用本次ajax請求時傳遞的options參數
}
11.error
要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象（可選）。ajax事件函數如下：
function(XMLHttpRequest,textStatus,errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含信息
this; //調用本次ajax請求時傳遞的options參數
}
12.contentType
要求為String類型的參數，當發送信息至服務器時。內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。
13.dataFilter
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataTYpe參數。函數返回的值將由jQuery進一步處理。
function(data,type){
//返回處理后的數據
return data;
}
14.global
要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart和ajaxStop可用於控制各種ajax事件。
15.ifModified
要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。
16.jsonp
要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。
17.username
要求為String類型的參數，用於響應HTTP訪問認證請求的用戶。
18.password
要求為String類型的參數，用於響應HTTP訪問認證請求的密碼。
19.processData
要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講而非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。
20.scriptCharset
要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。
AJAX請求如何設置csrf_token
方式1
通過獲取隱藏的input標簽中的csrfmiddlewaretoken值，放置在data中發送。
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "fuyong",
"password": 123456,
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中
},
success: function (data) {
console.log(data);
}
})
方式2
通過獲取返回的cookie中的字符串 放置在請求頭中發送。
注意：需要引入一個jquery.cookie.js插件。（插件下載）
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 從Cookie取csrf_token，並設置ajax請求頭
data: {"username": "fuyong", "password": 123456},
success: function (data) {
console.log(data);
}
})
或者用自己寫一個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 protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
更多細節詳見：Djagno官方文檔中關於CSRF的內容