深刻淺出篇 — ajax的誕生 & 跨域

網絡-深刻淺出篇文章：

• 初識網絡
• Http協議和Ip地址
• 域名與DNS解析
• Jsonp原理

一. AJAX

ajax的誕生：

1. 發送網絡請求的方式：

• 在瀏覽器中直接輸入網址 (其沒法用代碼控制)
• 在控制檯輸入location.href="url" ,能夠發送網絡請求，可是頁面會發生跳轉(頁面會跳轉)
• 帶有src屬性的標籤 —— 例如img ，請求是能夠發出的，服務端是能夠處理的而且也是能夠返回的，可是返回後，可否被應用，還要看瀏覽器(頁面沒法處理返回結果)
• 帶有href屬性的標籤 —— 例如link ，請求是能夠發出的，服務端是能夠處理的也是能夠返回的，可是返回後，可否被應用，還要看瀏覽器(頁面沒法處理返回結果)
• 帶有action屬性的標籤 例如form表單，也能夠向後端發出請求，但form表單發送請求後也會頁面跳轉(頁面會跳轉)

2. ajax誕生：

• 就是由於但願有一種方式，既能夠用代碼控制，並且頁面不會跳轉，而且服務端返回的結果咱們能夠用JS繼續處理，因此就有了ajax

ajax的應用：

1. ajax 全名： async javascript and xml

2. ajax 的請求要素：

• 請求方式： Get/Post
• url
• 但ajax受到瀏覽器同源策略的限制，同源策略是瀏覽器提出的一種安全機制

3. 發送請求-兼容寫法：

例：

var xhr = null
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()                      //經常使用瀏覽器自帶
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHttp")    //IE6自帶
    }
    xhr.open("get", "http://www.baidu.com", true)       // 第三個參數 true 表明異步
    xhr.send()  //這就能夠發送了 但有可能有跨域問題，把xhr.send放在xhr.onreadystatechange後比較好
複製代碼

3. 原生js發送ajax

例：

var xhr = null
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()                      //經常使用瀏覽器自帶
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHttp")    //IE6自帶
    }
    console.log(xhr.readystate)                         //  0
    xhr.open("get", "http://www.baidu.com", true)       // 第三個參數 true 表明異步
    console.log(xhr.readystate)                         // 1
    
    // 這部分是該部份內容新增
    xhr.onreadystatechange = function () {
    
        console.log(xhr.readystate)  
        
        //readystate 爲xhr的一個屬性，其會隨着ajax發送的進度變化而變化，剛開始建立xhr時是0，open以後是1，如示例
        
        // readystate == 4時 表示請求完成 已經接收到數據
        
        // status == 200 網絡請求 ，請求到的結果會有一個狀態碼，來表示這個請求是否正常
        // 200表示請求成功
        // http狀態碼
        // 2**表示成功 
        // 3**表示重定向 
        // 4**表示客戶端錯誤，404頁面沒有找到
        // 5**表示服務端錯誤
        if (xhr.readyState == 4 && xhr.status == 200) {
        
            console.log(xhr.responseText)
            //若是有返回的結果，返回的結果存在xhr.responseText這個屬性裏
            
            var data = JSON.parse(xhr.responseText)
            // 將jsonz數據轉換爲js對象
            
            //擴展知識：將js對象轉換爲json數據
            //JSON.stringify(data)
            
        }
    }
    xhr.send() 
    //至此就完成了這種方式，既能夠用代碼控制，並且頁面不會跳轉，而且服務端返回的結果咱們能夠用JS繼續處理
複製代碼

二. 跨域：

什麼是跨域：

• 頁面自己與要請求數據的網址 —— 協議 域名 端口號 有任意一個不同的 就算跨域

跨域訪問資源：

1. 哪些東西屬於資源

• js文件，可是js文件是容許被跨域請求的
• css文件 ，jpg，png 等（src屬性的資源都是能夠被跨域請求的，href 資源大部分都是能夠被跨域請求的）

例 —— img請求：

<img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=4b1e0ff44da98226accc2375ebebd264/faf2b2119313b07e6a5add8902d7912396dd8c48.jpg" alt="">
// 雖然也是跨域的可是是能夠被跨域請求的
複製代碼

2. 哪些資源算跨域請求的資源

• 後端接口的數據
• 其餘域的cookie
• 其餘域的緩存

解決跨域的方法 —— 雖然跨域了，可是咱們依然須要這個數據：

1. 後端(這裏的後端，是指的別人的後端)配合咱們進行跨域：

• JSONP(正常狀況下，返回的數據都是JSON格式，JSONP是一種特殊的格式)
• 後端設置Access-Control-Allow-Origin屬性以支持跨域

2. 後端不配合咱們進行跨域

• iframe進行跨域 (只能顯示不能控制)

例：

<iframe src="https://www.baidu.com" frameborder="0" width="600" height="600"></iframe>
//雖然跨域，可是能夠跨域請求到
複製代碼

• 經過後端代理(指本身的後端)的

JSONP的使用:

1. JSONP的特殊格式

• 發送的時候，會帶上一個參數callback
• 返回的結果不是Json 而是 callback（json數據）

2. 使用JQ發送jsonp請求

• $.ajax({
        url:"https://www.baidu.com",
        type:"get",
        dataType:"jsonp" //返回類型
        success : function(data){  //成功後返回的數據
        console.log(data);
        }
    })
  
    //JSonp跨域，只能使用get方法， 若是咱們設置的是post方法，JQuery會自動轉換爲get方法
    //但不是在JSONP裏面只能使用get方法
    //首先JQuery會先判斷是否同源，若同源，那麼設置的是什麼就是什麼   
    //若不是同源，不管設置的是什麼，都改成get
  複製代碼

封裝ajax：

//封裝
        function ajax(mode, url, callback, data, flag) {
        // 兼容
        var xhr = null
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest() //經常使用瀏覽器自帶
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHttp") //IE6自帶
        }

        //事件
        xhr.onreadystatechange = function () {

            if (xhr.readystate == 4) {
                if (xhr.status == 200) {
                    callback(xhr.responseText)
                } else {
                    console.log('error')
                }

            }
        }
        
        //格式要求
        mode = mode.toUpperCase();      // 將請求方式變爲大寫的
        if (mode == 'GET') {
            // get請求要把請求參數拼接到地址裏面
            xhr.open(mode, url + '?' + data, flag) // 第三個參數 true 表明異步
            xhr.send()
        } else if (mode == 'POST') {
            xhr.open(mode, url, flag)
            
            // 設置Content-type 請求頭  ，設置成相應的數據格式， 此處爲數據傳送的編碼格式
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            
            //post請求必須把請求參數放到請求體裏面
            xhr.sed(data)
        }
    }複製代碼