目錄

AJAX - 啊賈克斯

1.什麼是AJAX

    AJAX - Asynchronous Javascript And Xml              非同步的        JS      和  Xml         同步訪問：             當客戶端向伺服器傳送請求時，伺服器在處理過程中，瀏覽器只能等待             缺點：整個網頁會重新整理         非同步訪問：             當客戶端向伺服器傳送請求時，伺服器在處理操作的同時，客戶端可以做其他的事情，不需要一直等待，效率較高             優點：區域性重新整理

    使用場合：         1.搜尋建議         2.表單驗證         3.前後端完全分離

2.AJAX核心物件 非同步物件 - XMLHttpRequest

    1.什麼是XMLHttpRequest         主要稱為"非同步物件"，代替瀏覽器向伺服器傳送請求並接收響應         該物件主要由JS來提供     2.建立非同步物件         主流的非同步物件是 XMLHttpRequest 型別的，         並且主流瀏覽器(IE7+,Chrome,Firefox,Safari,Oper)已經全部支援該物件         低版本瀏覽器中(IE7,6)是無法使用XMLHttpRequest，需要使用ActiveXObject來建立非同步物件

        判斷瀏覽器是否支援XMLHttpRequest         if(window.XMLHttpRequest){             //如果瀏覽器支援XMLHttpRequest的話，window.XMLHttpRequest則是一個非undefined的值，             如果瀏覽器不支援的話，此處就是一個undefined

            var xhr = new XMLHttpRequest();         }else{             // 瀏覽器不支援XMLHttpRequest

            var xhr = new ActiveXObject("Microsoft.XMLHTTP");         }

    練習：         1.建立專案 - ajax         2.建立應用 - index (配置)         3.定義訪問路徑 /01_xmlhttp/             通過檢視，顯示 01_xmlhttp.html模板         4.定義一個按鈕，點選按鈕時，根據不同的瀏覽器建立不同的非同步物件，並輸出在控制檯

    3.xhr的成員

        1.方法 - open()             作用：建立/開啟請求             語法：xhr.open(method,url,asyn)                 method:指定請求的方式，取值'get'或'post'                 url:請求地址，字串                 asyn:指定是否使用非同步的方式傳送請求                     true:使用非同步                     false:使用同步                 ex:                     //1.獲取xhr物件(createXhr在common.js中是函式名，建立非同步物件)                     var xhr=createXhr()                     //2.建立請求                     xhr.open('get','/01_server/',true)         2.屬性 - readyState             作用：請求狀態，通過不同的請求狀態來表示xhr與伺服器的互動情況0-4共5個不同的狀態                 0：請求尚未初始化                 1：已經與伺服器建立連線                 2：服務端已經接收請求                 3：請求正在處理中                 4：響應已完成         3.屬性 - status             作用：表示的是伺服器端的響應狀態碼                 200：表示伺服器正確處理所有的請求並給出響應                 403：請求被拒絕                 404：請求資源未找到                 500：伺服器內部錯誤         4.屬性 - responseText             作用：伺服器端響應回來的文字         5.事件 - onreadystatechange             作用：每當readyState的值發生改變時就要出發的操作 - 回撥函式

            在此函式中，要判斷 當readyState的值為4並且status的值為200的時候，才可以正常的接收響應資料(responseText)         6.方法 - send()             作用：傳送請求             語法：xhr.send(body)                 body:表示請求主體                     get請求的話，此處為 null                     post請求的話，此處為要提交的資料

    4.使用AJAX傳送get請求

        1.步驟             1.建立 xhr 物件             2.建立請求 - open()             3.設定回撥函式 - onreadystatechange             4.傳送請求 - send()         2.傳送帶引數的get請求             在請求地址中追加引數即可             xhr.open('get','/02_server/?uname=sf.zh',true);

    5.使用AJAX傳送post請求

            1.步驟             1.建立 / 獲取 xhr             2.建立請求 - open()             3.設定回撥函式 - onreadystatechange             4.傳送請求 - send()                 xhr.send("uname=sf.zh&upwd=123456");         2.csrf 驗證             必須手動提交 csrfmiddlewaretoken 的值到伺服器             否則無法通過csrf的驗證,伺服器會返回403             解決方案1:                 1.在模板中,通過JS獲取cookies中csrftoken的值                 2.將獲取出來的值,拼成引數,再發送給伺服器             解決方案2:                 保留...         3.必須設定一個請求訊息頭 - Content-Type             xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");             注意:該操作,要在 xhr.send() 之前增加