Django-3
知識預覽
- Ajax前戲：json
- Ajax簡介
- jquery實現的ajax
- JS實現的ajax
Ajax前戲：json
什麽是json？
定義：
JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。
它基於 ECMAScript (w3c制定的js規範)的一個子集，采用完全獨立於編程語言的文本格式來存儲和表示數據。
簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網絡傳輸效率。
講json對象，不得不提到JS對象：
合格的json對象：
View Code
不合格的json對象：
View Code
stringify與parse方法
JSON.parse(): 用於將一個 JSON 字符串轉換為 JavaScript 對象
eg:
console.log(JSON.parse(‘{"name":"Yuan"}‘));
console.log(JSON.parse(‘{name:"Yuan"}‘)) ; // 錯誤
console.log(JSON.parse(‘[12,undefined]‘)) ; // 錯誤
JSON.stringify(): 用於將 JavaScript 值轉換為 JSON 字符串。
eg: console.log(JSON.stringify({‘name‘:"egon"})) ;
和XML的比較
JSON 格式於2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。
JSON 格式有兩個顯著的優點：書寫簡單，一目了然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外添加解析代碼。所以，JSON迅速被接受，已經成為各大網站交換數據的標準格式，並被寫入ECMAScript 5，成為標準的一部分。
XML和JSON都使用結構化方法來標記數據，下面來做一個簡單的比較。
用XML表示中國部分省市數據如下：
| 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 |
<?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>
<province>
<name>臺灣</name>
<cities>
<city>臺北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>烏魯木齊</city>
</cities>
</province>
</country>
|
用JSON表示如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{
"name": "中國",
"province": [{
"name": "黑龍江",
"cities": {
"city": ["哈爾濱", "大慶"]
}
}, {
"name": "廣東",
"cities": {
"city": ["廣州", "深圳", "珠海"]
}
}, {
"name": "臺灣",
"cities": {
"city": ["臺北", "高雄"]
}
}, {
"name": "新疆",
"cities": {
"city": ["烏魯木齊"]
}
}]
}
|
可以看到，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，並且在數據交換方面，由於 JSON 所使用的字符要比 XML 少得多，可以大大得節約傳輸數據所占用得帶寬。
註意：
JSON格式取代了xml給網絡傳輸帶來了很大的便利,但是卻沒有了xml的一目了然,尤其是json數據很長的時候,我們會陷入繁瑣復雜的數據節點查找中。 但是國人的一款在線工具 BeJson 、SoJson在線工具讓眾多程序員、新接觸JSON格式的程序員更快的了解JSON的結構，更快的精確定位JSON格式錯誤。數據交換
def login(request):
obj={‘name‘:"alex111"}
return render(request,‘index.html‘,{"objs":json.dumps(obj)})
#----------------------------------
<script>
var temp={{ objs|safe }}
alert(temp.name);
alert(temp[‘name‘])
</script>
如果要通過js或者jquery給後端發送數據，那麽就要用到我們下面的Ajax啦
回到頂部Ajax簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
- 同步交互：客戶端發出一個請求後，需要等待服務器響應結束後，才能發出第二個請求；
- 異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就可以發出第二個請求。
AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
js實現的局部刷新:
View Code
AJAX常見應用情景
當我們在百度中輸入一個“老”字後，會馬上出現一個下拉列表！列表中顯示的是包含“傳”字的4個關鍵字。
其實這裏就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含“傳”字的前10個關鍵字，然後服務器會把查詢到的結果響應給瀏覽器，最後瀏覽器把這4個關鍵字顯示在下拉列表中。
- 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
- 當請求發出後，瀏覽器還可以進行其他操作，無需等待服務器的響應！
當輸入用戶名後，把光標移動到其他表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名為zhangSan的用戶是否存在，最終服務器返回true表示名為lemontree7777777的用戶已經存在了，瀏覽器在得到結果後顯示“用戶名已被註冊！”。
- 整個過程中頁面沒有刷新，只是局部刷新了；
- 在請求發出後，瀏覽器不用等待服務器響應結果就可以進行其他操作；
AJAX的優缺點
優點：
- AJAX使用Javascript技術向服務器發送異步請求；
- AJAX無須刷新整個頁面；
- 因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以AJAX性能高；
缺點：
- AJAX並不適合所有場景，很多時候還是要使用同步交互；
- AJAX雖然提高了用戶體驗，但無形中向服務器發送的請求次數增多了，導致服務器壓力增大；
- 因為AJAX是在瀏覽器中使用Javascript技術完成的，所以還需要處理瀏覽器兼容性問題；
一言以蔽之：不會Ajax，搞什麽web，玩什麽爬蟲！
回到頂部jquery實現的ajax
{% load staticfiles %}
<!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 | error
console.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
$.ajax參數
請求參數
######################------------data---------################
data: 當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式
(urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。
function testData() {
$.ajax("/test",{ //此時的data是一個json形式的對象
data:{
a:1,
b:2
}
}); //?a=1&b=2
######################------------processData---------################
processData：聲明當前的data數據是否進行轉碼或預處理，默認為true，即預處理；if為false，
那麽對data：{a:1,b:2}會調用json對象的toString()方法，即{a:1,b:2}.toString()
,最後得到一個［object，Object］形式的結果。
######################------------contentType---------################
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對象
######################------------traditional---------################
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實例
*/
示例：
View Code
csrf跨站請求偽造
| 1 2 3 |
$.ajaxSetup({
data: {csrfmiddlewaretoken: ‘{{ csrf_token }}‘ },
});
|
JS實現的ajax
AJAX核心（XMLHttpRequest）
其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。所有的異步交互都是使用XMLHttpServlet對象完成的。也就是說，我們只需要學習一個Javascript的新對象即可。
| 1 |
var xmlHttp = new XMLHttpRequest()；（大多數瀏覽器都支持DOM2規範）
|
註意，各個瀏覽器對XMLHttpRequest的支持也是不同的！為了處理瀏覽器兼容問題，給出下面方法來創建XMLHttpRequest對象：
View Code
使用流程
步驟1: 打開與服務器的連接（open方法）
當得到XMLHttpRequest對象後，就可以調用該對象的open()方法打開與服務器的連接了。open()方法的參數如下：
open(method, url, async)：
- method：請求方式，通常為GET或POST；
- url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若為GET請求，還可以在URL後追加參數；
- async：這個參數可以不給，默認值為true，表示異步請求；
| 1 2 |
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/", true);
|
步驟2: 發送請求
當使用open打開連接後，就可以調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數為POST請求參數，即對應HTTP協議的請求體內容，若是GET請求，需要在URL後連接參數。
註意：若沒有參數，需要給出null為參數！若不給出null為參數，可能會導致FireFox瀏覽器不能正常發送請求！
| 1 |
xmlHttp.send(null);
|
步驟3: 接收服務器響應
當請求發送出去後，服務器端Servlet就開始執行了，但服務器端的響應還沒有接收到。接下來我們來接收服務器的響應。
XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：
- 0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法；
- 1：請求已開始，open()方法已調用，但還沒調用send()方法；
- 2：請求發送完成狀態，send()方法已調用；
- 3：開始讀取服務器響應；
- 4：讀取服務器響應結束。
onreadystatechange事件會在狀態為1、2、3、4時引發。
下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！
xmlHttp.onreadystatechange = function() {
alert(‘hello‘);
};
但通常我們只關心最後一種狀態，即讀取服務器響應結束時，客戶端才會做出改變。我們可以通過XMLHttpRequest對象的readyState屬性來得到XMLHttpRequest對象的狀態。
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
alert(‘hello‘);
}
};
其實我們還要關心服務器響應的狀態碼是否為200，其服務器響應為404，或500，那麽就表示請求失敗了。我們可以通過XMLHttpRequest對象的status屬性得到服務器的狀態碼。
最後，我們還需要獲取到服務器響應的內容，可以通過XMLHttpRequest對象的responseText得到服務器響應內容。
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
};
if 發送POST請求
<1>需要設置請求頭：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；
註意 :form表單會默認這個鍵值對;不設定，Web服務器會忽略請求體的內容。
<2>在發送時可以指定請求體了：xmlHttp.send(“username=yuan&password=123”)
JS實現ajax小結
/*
創建XMLHttpRequest對象；
調用open()方法打開與服務器的連接；
調用send()方法發送請求；
為XMLHttpRequest對象指定onreadystatechange事件函數，這個函數會在
XMLHttpRequest的1、2、3、4，四種狀態時被調用；
XMLHttpRequest對象的5種狀態，通常我們只關心4狀態。
XMLHttpRequest對象的status屬性表示服務器狀態碼，它只有在readyState為4時才能獲取到。
XMLHttpRequest對象的responseText屬性表示服務器響應內容，它只有在
readyState為4時才能獲取到！
*/
測試代碼：
View Code
實例（用戶名是否已被註冊）
7.1 功能介紹
在註冊表單中，當用戶填寫了用戶名後，把光標移開後，會自動向服務器發送異步請求。服務器返回true或false，返回true表示這個用戶名已經被註冊過，返回false表示沒有註冊過。
客戶端得到服務器返回的結果後，確定是否在用戶名文本框後顯示“用戶名已被註冊”的錯誤信息！
7.2 案例分析
- 頁面中給出註冊表單；
- 在username表單字段中添加onblur事件，調用send()方法；
- send()方法獲取username表單字段的內容，向服務器發送異步請求，參數為username；
- django 的視圖函數：獲取username參數，判斷是否為“yuan”，如果是響應true，否則響應false
參考代碼：
View Code
Django-3