ajax的基本概念

瞭解這個概念，首先得先知道同步互動與非同步互動

• 同步互動：客戶端瀏覽器給伺服器傳送一個請求，伺服器返回一個頁面，返回的頁面會把之前的頁面覆蓋掉，我們把這種互動方式稱為同步互動
• 非同步互動：就是可會斷瀏覽器給伺服器傳送一個請求，伺服器返回資料，返回的資料不會把之前的頁面覆蓋掉，我們把這種互動方式稱之為非同步互動

ajax主要的應用場景：頁面不重新整理，就可以與伺服器進行動態的資料互動

互動的原理

• 同步互動原理：我們在瀏覽器，怎麼給伺服器傳送請求呢？可以點選超連結，提交表單，瀏覽器位址列輸入地址，都是給伺服器傳送請求，實際上是瀏覽器幫助我們給伺服器去傳送請求

• 非同步互動的原理：JavaScript給我們提供了一個新的API介面，幫我們去傳送http請求，由XMLHttpRequest 物件來幫助我們傳送請求

我們所有的互動操作都可以通過這個物件來完成，傳送請求，接受伺服器的資料

ajax的具體應用場景

• 前臺可以通過XMLHttpRequest 給伺服器傳送請求，然後再通過XMLHttpRequest 物件來接受伺服器返回的資料，最後通過dom操作把資料寫到頁面上
• ajax：可以用來表單輸入規範驗證
• ajax：也可以用來做效能優化，比如一個頁面非常龐大，這個頁面不可能一次載入完畢，實現一個滾動載入

XMLHttpRequest 互動的四個步驟

1，例項化XMLHttpRequest 物件
2，想和伺服器進行互動，必須和伺服器開啟一個連線
3，給伺服器傳送資料，傳送引數資料到伺服器
4，接受伺服器返回的資料，伺服器在返回給客戶端的時候會返回一些狀態，可以通過監聽伺服器狀態的改變，來更好的操控整個互動流程

ajax跨域

跨域：假設我訪問 a 站點，後臺返回給我一個頁面，然後我又想在 a 站點的這個頁面去訪問 b 站點的資源，這就是一個跨域的效果，跨域瀏覽器是有安全限制的

解決·跨域的方式：jsonp方式，

jsonp解決跨域的本質原理：由於瀏覽器有同源限制，不同站點之間不能相互訪問，但是有時候我們就是想要獲取其他站點的資料，比如加入我們想要獲取一下急速資料的天氣預報資料，這肯定跨域了，那麼我們該怎麼辦呢？

原理：就是動態建立

<script type="text/javascript">
    function handleResponse(response){
            console.log(response);
    }
</script>

<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {     

        var script = document.createElement("script");
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>