AJAX簡介
什麼是AJAX
AJAX（Asynchronous Javascript And XML）翻譯成中文就是「異步Javascript和XML」。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML）。javascript
AJAX的交互方式
- 同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；
- 異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。
AJAX除了異步的特色外，還有一個就是：瀏覽器頁面局部刷新；（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程）html
AJAX優勢
- AJAX使用JavaScript技術向服務器發送異步請求；
- AJAX請求無須刷新整個頁面；
- 由於服務器響應內容再也不是整個頁面，而是頁面中的部份內容，因此AJAX性能高；
AJAX實際應用場景
搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。java
還有一個很重要的應用場景就是註冊時候的用戶名的查重。python
其實這兩個例子就使用了AJAX技術！當文件框發生了輸入變化時，使用AJAX技術向服務器發送一個請求，而後服務器會把查詢到的結果響應給瀏覽器，最後再把後端返回的結果展現出來。jquery
- 整個過程當中頁面沒有刷新，只是刷新頁面中的局部位置而已！
- 當請求發出後，瀏覽器還能夠進行其餘操做，無需等待服務器的響應！
簡單的AJAX示例
下面的例子是作一個簡陋的加法計算器，用戶輸入兩個數字，而後點計算後，將值顯示出來，而且頁面不刷新。ajax
HTML頁面代碼以下：django
<!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>
頁面效果以下：json
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的內容