ajax基礎知識

AJAX基礎知識及核心原理解讀

AJAX基礎知識

什麼是AJAX？
async javascript and xml，異步的JS和XML

xml：可擴展的標記語言

做用是用來存儲數據的（經過本身擴展的標記名稱清晰的展現出數據結構）

ajax之因此稱爲異步的js和xml，主要緣由是：當初最開始用ajax實現客戶端和服務器端數據通訊的時候，傳輸的數據格式通常都是xml格式的數據，咱們咱們把它稱之爲異步js和xml（如今通常都是基於JSON格式來進行數據傳輸的）

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <student>
        <name>張三</name>
        <age>25</age>
        <score>
            <english>90</english>
            <math>100</math>
            <chinese>98</chinese>
        </score>
    </student>
    <student>
        <name>李四</name>
        <age>24</age>
        <score>
            <english>80</english>
            <math>90</math>
            <chinese>100</chinese>
        </score>
    </student>
</root>

異步的JS

這裏的異步不是說ajax只能基於異步進行請求（雖然建議都是使用異步編程），這裏的異步特指的是 「局部刷新」

局部刷新 VS 全局刷新

在非徹底先後端分離項目中，前端開發只須要完成頁面的製做，而且把一些基礎的人機交互效果使用js完成便可，頁面中須要動態呈現內容的部分，都是交給後臺開發工程師作數據綁定和基於服務器進行渲染的（服務器端渲染）

[優點]
一、動態展現的數據在頁面的原代碼中能夠看見，有利於SEO優化推廣（有利於搜索引擎的收錄和抓取）
二、從服務器端獲取的結果就已是最後要呈現的結果了，不須要客戶端作額外的事情，因此頁面加載速度快（前提是服務器端處理的速度夠快，可以處理過來），因此相似於京東、淘寶這些網站，首屏數據通常都是經由服務器端渲染的

[弊端]
一、若是頁面中存在須要實時更新的數據，每一次想要展現最新的數據，頁面都要從新的刷新一次，這樣確定不行
二、都交給服務器端作數據渲染，服務器端的壓力太大，若是服務器處理不過來，頁面呈現的速度更慢（因此京東淘寶這類網站，除了首屏是服務器端渲染的，其它屏通常都是客戶端作數據渲染綁定）
三、這種模式不利於開發（開發效率低）

目前大部分公司都是先後端徹底分離的項目（也有非徹底先後端分離的）

先後端徹底分離的項目，頁面中須要動態綁定的數據是交給客戶端完成渲染的
一、向服務器端發送AJAX請求
二、把從服務器端獲取的數據解析處理，拼接成爲咱們須要展現的HTML字符串
三、把拼接好的字符串替換頁面中某一部分的內容（局部刷新），頁面總體不須要從新加載，局部渲染便可

[優點]
一、咱們能夠根據需求，任意修改頁面中某一部分的內容（例如實時刷新），總體頁面不刷新，性能好，體驗好（全部表單驗證、須要實時刷新的等需求都要基於AJAX實現）

二、有利於開發，提升開發的效率
1）先後端的徹底分離，後臺不須要考慮前端如何實現，前端也不須要考慮後臺用什麼技術，真正意義上實現了技術的劃分
2）能夠同時進行開發：項目開發開始，首先制定先後端數據交互的接口文檔（文檔中包含了，調取哪一個接口或者哪些數據等協議規範），後臺把接口先寫好（目前不少公司也須要前端本身拿NODE來模擬這些接口），客戶端按照接口調取便可，後臺再次去實現接口功能便可

[弊端]
一、不利於SEO優化：第一次從服務器端獲取的內容不包含須要動態綁定的數據，因此頁面的源代碼中沒有這些內容，不利於SEO收錄，後期經過JS添加到頁面中的內容，並不會寫在頁面的源代碼中（是源代碼不是頁面結構）
二、交由客戶端渲染，首先須要把頁面呈現，而後再經過JS的異步AJAX請求獲取數據，而後數據綁定，瀏覽器在把動態增長的部分從新渲染，無形中浪費了一些時間，沒有服務器端渲染頁面呈現速度快

基於原生JS實現AJAX

//=>建立一個AJAX對象
let xhr=new XMLHttpRequest();//=>不兼容IE6及更低版本瀏覽器(IE6：ActiveXObject)

//=>打開請求地址(能夠理解爲一些基礎配置，可是並無發送請求)
xhr.open([method],[url],[async],[user name],[user password]);

//=>監聽AJAX狀態改變，獲取響應信息(獲取響應頭信息、獲取響應主體信息)
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4 && xhr.status===200){
        let result=xhr.responseText;//=>獲取響應主體中的內容
    }
};

//=>發送AJAX請求（括號中傳遞的內容就是請求主體的內容）
xhr.send(null);

分析第二步中的細節點

xhr.open([method],[url],[async],[user name],[user password])

---

[AJAX請求方式]
一、GET系列的請求（獲取）

• get
• delete：從服務器上刪除某些資源文件
• head：只想獲取服務器返回的響應頭信息（響應主體內容不須要獲取）
• ...

二、POST系列請求（推送）

• post
• put：向服務器中增長指定的資源文件
• ...

無論哪種請求方式，客戶端均可以把信息傳遞給服務器，服務器也能夠把信息返回給客戶端，只是GET系列通常以獲取爲主（給的少，拿回來的多），而POST系列通常以推送爲主（給的多，拿回來的少）
1）咱們想獲取一些動態展現的信息，通常使用GET請求，由於只須要向服務器端發送請求，告訴服務器端咱們想要什麼，服務器端就會把須要的數據返回
2）在實現註冊功能的時候，咱們須要把客戶輸入的信息發送給服務器進行存儲，服務器通常返回成功仍是失敗等狀態，此時咱們通常都是基於POST請求完成
...

GET系列請求和POST系列請求，在項目實戰中存在不少的區別
一、GET請求傳遞給服務器的內容通常沒有POST請求傳遞給服務器的內容多
緣由：GET請求傳遞給服務器內容通常都是基於url地址問號傳遞參數來實現的，而POST請求通常都是基於設置請求主體來實現的。
各瀏覽器都有本身的關於URL最大長度的限制（谷歌：8KB、火狐：7KB、IE：2KB...）超過限制長度的部分，瀏覽器會自動截取掉，致使傳遞給服務器的數據缺失。
理論上POST請求經過請求主體傳遞是沒有大小限制的，真實項目中爲了保證傳輸的速率，咱們也會限制大小（例如：上傳的資料或者圖片咱們會作大小的限制）

二、GET請求很容易出現緩存（這個緩存不可控：通常咱們都不須要），而POST不會出現緩存（除非本身作特殊處理）；
緣由：GET是經過URL問號傳參傳遞給服務器信息，而POST是設置請求主體；
設置請求主體不會出現緩存，可是URL傳遞參數就會了。

//=>每一個一分鐘重新請求服務器端最新的數據，而後展現在頁面中（頁面中某些數據實時刷新）
setTimeout(()=>{
    $.ajax({
        url:'getList?lx=news',
        ...
        success:result=>{
            //=>第一次請求數據回來，間隔一分鐘後，瀏覽器又發送一次請求，可是新發送的請求，不論是地址仍是傳遞的參數都和第一次同樣，瀏覽器頗有可能會把上一次數據獲取，而不是獲取最新的數據
        }
    });
},60000);

//=>解決方案：每一次從新請求的時候，在URL的末尾追加一個隨機數，保證每一次請求的地址不徹底一致，就能夠避免是從緩存中讀取的數據
setTimeout(()=>{
    $.ajax({
        url:'getList?lx=news&_='+Math.random(),
        ...
        success:result=>{}
    });
},60000);

三、GET請求沒有POST請求安全（POST也並非十分安全，只是相對安全）
緣由：仍是由於GET是URL傳參給服務器
有一種比較簡單的黑客技術：URL劫持，也就是能夠把客戶端傳遞給服務器的數據劫持掉，致使信息泄露

---

URL：請求數據的地址（API地址），真實項目中，後臺開發工程師會編寫一個API文檔，在API文檔中彙總了獲取哪些數據須要使用哪些地址，咱們按照文檔操做便可

ASYNC：異步（SYNC同步），設置當前AJAX請求是異步的仍是同步的，不寫默認是異步（TRUE），若是設置爲FALSE，則表明當前請求是同步的

用戶名和密碼：這兩個參數通常不用，若是你請求的URL地址所在的服務器設定了訪問權限，則須要咱們提供可通行的用戶名和密碼才能夠（通常服務器都是能夠容許匿名訪問的）

第三部分細節研究

//=>監聽AJAX狀態改變，獲取響應信息(獲取響應頭信息、獲取響應主體信息)
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4 && xhr.status===200){
        let result=xhr.responseText;//=>獲取響應主體中的內容
    }
};

AJAX狀態碼：描述當前AJAX操做的狀態的
xhr.readyState

0：UNSENT 未發送，只要建立一個AJAX對象，默認值就是零
1：OPENED 咱們已經執行了xhr.open這個操做
2：HEADERS_RECEIVED 當前AJAX的請求已經發送，而且已經接收到服務器端返回的響應頭信息了
3：LOADING 響應主體內容正在返回的路上
4：DONE 響應主體內容已經返回到客戶端

---

HTTP網絡狀態碼：記錄了當前服務器返回信息的狀態 xhr.status
200：成功，一個完整的HTTP事務完成（以2開頭的狀態碼通常都是成功）

以3開頭通常也是成功，只不過服務器端作了不少特殊的處理

• 301：Moved Permanently 永久轉移（永久重定向）通常應用於域名遷移
• 302：Move temporarily 臨時轉移（臨時重定向，新的HTTP版本中任務307是臨時重定向）通常用於服務器的負載均衡：當前服務器處理不了，我把當前請求臨時交給其餘的服務器處理（通常圖片請求常常出現302，不少公司都有單獨的圖片服務器）
• 304：Not Modified 從瀏覽器緩存中獲取數據 把一些不常常更新的文件或者內容緩存到瀏覽器中，下一次從緩存中獲取，減輕服務器壓力，也提升頁面加載速度

以4開頭的，通常都是失敗，並且客戶端的問題偏大

• 400：請求參數錯誤
• 401：無權限訪問
• 404：訪問地址不存在

  以5開頭的，通常都是失敗，並且服務器的問題偏大

• 500：Internal Server Error 未知的服務器錯誤
• 503：Service Unavailable 服務器超負載