學習ajax 總結

1、服務器客戶端基礎知識

通訊是指不一樣計算機程序的通訊，單單經過ip地址就能知道你找的是哪一臺計算機，可是不知道是計算機上的哪一個應用程序，要想知道是哪一個程序就必須經過端口。這時候就能夠問端口究竟是什麼了，簡單點說端口就是計算機對外鏈接的出口，不一樣的應用程序的出口不一樣，因此咱們能夠用端口來判斷是哪一個應用程序，一般所說的80端口就是最www上網服務端口

在平常生活中咱們記住的都是網站的域名，由於域名有意義方便記住，而ip地址很差記住好比www.baidu.com。那咱們經過域名來訪問網站時實際上是分爲幾步的

一、在本地的hosts文件中先查詢有沒有本地的服務器返回文件

二、若是沒有就進行域名解析就是DNS，由於服務器廠商會將IP地址對應的域名都保存到抓嗎的電腦上，這臺電腦保存着域名和IP地址的映射關係

三、經過解析獲得的IP地址，瀏覽器將發送http請求給服務器

四、服務器再返回數據給瀏覽器解析顯示頁面

2、ajax可以作什麼

我認爲ajax其實最重要的核心就是更好的交互。異步的javascript and XML。這個是ajax的解釋，其實所謂的異步比起同步來講ajax的優勢就表如今：不用每一次頁面的部分須要服務端數據時都去服務器端獲取數據，而是部分去獲取數據，這樣就不會出現白屏和當前頁面不可用的現象，也可以減小請求服務器而耗費資源佔用帶寬。那麼在咱們平時的上網過程當中有哪些是用到了ajax技術呢？好比

一、百度搜索提示 二、快遞單號查詢 三、評論加載等

你能夠發現它們在更新數據的時候頁面並無徹底刷新，只是須要數據的地方刷新了。

3、ajax原理

能夠說是瀏覽器爲須要更新數據的元素建立了一個請求對象，這個請求對象去替瀏覽器完成向服務器請求數據的工做。這樣瀏覽器就能夠接着幹別的事情了。具體的步驟以下

一、建立請求對象，可是須要注意的是考慮到瀏覽器的兼容性，爲了代碼複用我將兼容的代碼放進一個createRequest的函數中

 

function createRequest(){
    try {
         request = new XMLHttpRequest();
    } catch(tryMS) {
        try{
            request = new ActiveXObject("Msxm12.XMLHTTP");
        }catch(otherMS){
            try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(failed){
                request = null;
            }
        }
    }
    return request;
    
}

二、建立了請求對象以後，能夠說如今的請求對象只是一個啥都不會的孩子，由於它如今不知道本身是以什麼方式與服務器通訊，也不知道去服務器要請求什麼數據，因此咱們須要爲它設置這些屬性，就像教導 小孩子同樣。

三、設置好請求對象以後，就能夠與服務器創建鏈接了，創建鏈接是用open方法

request.open('GET/POST','url','true/false');

四、創建好鏈接以後，就能夠發送了用到的是

request.send(null);

五、接下來就要用onreadystate來調用回調函數了

request.onreadystate = function(){}

　咱們須要知道的是在發送請求到服務器端後服務器並非在數據徹底解析好以後才與瀏覽器通訊的，而會在不一樣階段返回readystate的對應的狀態碼，當readystate=2時表示服務器正在處理請求。readystate=3時表示數據下載到請求對象，可是響應數據尚未準備好，只有當readystate=4時才表示服務器處理完成請求數據可使用，因此咱們須要限制回調函數執行的時間爲當readystate = 4且status=200時執行

if(request.readystate == 4){
  if(request.status == 200){
      //將返回的數據進行處理，經常會用到json.parse將字符串轉爲json數據
    }      
}

4、跨域解決方案

因爲安全方面的緣由ajax不能實現跨域，因此就有了jsonp的方式，可是jsonp其實並不複雜。原理就是經過script標籤的src屬性來找到不一樣服務器下的資源文件，而後獲得的數據進行解析，其實只要有src屬性的標籤都有跨域能力。解析的時候因爲拼接字符串很麻煩，能夠採用一些模板技術如artTemplate模板引擎。

5、GET與POST的區別

從使用的方面

一、絕大多數的請求都是get請求，get方式的ajax會有瀏覽器緩存。

二、當傳遞加密數據和數據量很大的時候用post

從監視請求方面

一、post發送的數據在請求體中，用戶是看不到的

二、get發送的數據在地址欄中

6、ajax同步請求當設置request("GET",url,false)最後一個參數爲false時就表示爲同步請求，同步請求會形成在請求返回以前線程會一直阻塞，若是請求是在主線程中發起的，那就會形成整個瀏覽器阻塞。

瀏覽器就會報錯：

　　Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

那麼什麼是主線程呢？這是在html5中提出來的，由於在html5以前js是徹底的單線程方式，主線程以外不存在其餘線程，但在html5中增長了worke對象，每一個worker運行在一個獨立的線程中，worker線程被阻塞是不會影響主線程和瀏覽器的。