Python全棧Web（Ajax概述建立）

巴黎香榭發表於2018-10-08
Python全棧Web
什麼是AJAX
Asynchronous JavaScript And Xml
非同步的  JS  和 Xml
通過js非同步的向伺服器傳送請求並接受響應資料
同步訪問：
當客戶端向伺服器傳送請求時 伺服器在處理的過程中瀏覽器只能等待
非同步訪問：
當客戶端向伺服器傳送請求時 伺服器在處理的過程中 客戶端可以做其他操作
不需要一直等待
AJAX優點：
非同步訪問
區域性重新整理
使用場合：
搜尋建議
表單驗證
前後端完全分離
AJAX核心物件  非同步核心物件（XMLHttprequest）：
什麼是XMLHTTPRequest
代替瀏覽器向伺服器傳送非同步請求並接受響應的 “非同步物件”
是由js來提供的
建立非同步物件
主流的非同步物件是XMLHTTPRequest型別的 
並且主流瀏覽器（IE+ Chrome  Firefox Safari Opera）都支援
低版本瀏覽器中（IE6以下）就不支援XMLHTTPRequest  
需要使用ActiveXObject() 來建立非同步物件
1.AJAX
1.建立 xhr
/**
 * common.js
 */
function createXhr(){
    if(window.XMLHttpRequest)
        return new XMLHttpRequest();
    else
        return new ActiveXObject(`Microsoft.XMLHTTP`);
}
@app.route(`/02-get`)
def get_views():
    return render_template(`02-get.html`)

2.xhr 的成員
1.方法 – open()
作用：建立請求
語法：open(method,url,asyn)
method:請求方式，取值`get` 或 `post`
url:請求地址，字串
asyn:是否採用非同步的方式
true:非同步
false:同步
ex:
xhr.open(`get`,`/server`,true);
2.屬性 – readyState
作用：請求狀態，通過不同的請求狀態來表示xhr與伺服器的互動情況
由0-4共5個值來表示5個不同的狀態
0 ：請求尚未初始化
1 ：已經與伺服器建立連線
2 ：伺服器端已接收請求
3 ：請求正在處理中
4 ：響應已經完成
3.屬性 – status
作用：伺服器端的響應狀態碼
200 ：表示伺服器正確處理所有的請求以及給出響應
404 ：請求資源不存在
500 ：伺服器內部錯誤
… …
4.事件 – onreadystatechange
作用：每當xhr的readyState發生改變的時候都要觸發的操作 – 回撥函式
只有當readyState的值為4並且status的值為200的時候，才可以正常的去接收響應資料
5.屬性 – responseText
作用：響應資料
6.方法 – send()
作用：通知xhr向伺服器端傳送請求
語法：send(body)
get請求：body的值為null
send(null)
post請求：此處為要提交的資料
send(“請求資料”)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="send_ajax()">傳送AJAX請求</button>
    <p id="show"></p>
    <script src="/static/js/common.js"></script>
    <script>
        function send_ajax(){
            //1.建立xhr
            var xhr = createXhr();
            //2.建立請求
            // xhr.open(method,url,asyn)
            xhr.open(`get`,`/02-server`,true);
            //3.設定回撥函式(判斷狀態接收響應資料)
            //xhr.onreadystatechange = function(){}
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    //xhr的自身狀態是4並且伺服器的狀態是200就可以接收響應資料
                    document.getElementById(`show`).innerHTML = xhr.responseText;
                }
            }
            //4.傳送請求
            xhr.send(null);
        }
    </script>
</body>
</html>
3.AJAX的操作步驟
1.GET請求
1.建立 xhr 物件
2.建立請求 – open()
3.設定回撥函式 – onreadystatechange    判斷狀態並接收響應資料
4.傳送請求 – send()
請求引數：
推薦：請求地址後拼QueryString
xhr.open(`get`,`/02-server?key=value&key=value`,true)
               2.POST請求
1.建立 xhr 物件
2.建立請求 – open()
3.設定回撥函式 – onreadystatechange    判斷狀態並接收響應資料
4.設定請求訊息頭  – Content-Type
5.傳送請求 – send()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/js/common.js"></script>
  <script src="/static/js/jquery-1.11.3.js"></script>
</head>
<body>
  姓名：<input type="text" id="uname">
  <button id="btnSend">傳送AJAX請求</button>
  <p id="show"></p>
  <script>
    $(function(){
      $("#btnSend").click(function(){
        //1.建立xhr
        var xhr = createXhr();
        //2.建立請求
        var url = "/03-server?uname="+$("#uname").val();
        xhr.open(`get`,url,true);
        //3.設定回撥函式
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4&&xhr.status==200){
            $("#show").html(xhr.responseText);
          }
        }
        //4.傳送請求
        xhr.send(null);
      });
    });
  </script>
</body>
</html>


相關文章