Ajax 的學習

（一）基礎知識和新的概念

     1，AJAX 就是瀏覽器提供的一套 API，能夠經過 JavaScript 調用，從而實現經過代碼控制請求與響應。實現

網絡編程。

  2，AJAX（Asynchronous JavaScript and XML表示的是異步的js和xml，因此就是說它仍是寫在script標籤中的。），最先出如今 2005 年的 Google Suggest，是在瀏覽器端進行網絡編程（發送請求、接收響應）的技術方案，它使咱們能夠經過 JavaScript 直接獲取服務端最新的內容而沒必要從新加載頁面。

  3，計算機的組成部分：CPU（運算器和控制器）、存儲器、輸入設備、輸出設備

             內存：程序一開始是在磁盤上的，要想運行必須首先加載在內存

 

（二）計算機的通訊協議

   1，協議：就是多個計算機進行通訊時定義的規則。（就是交流的雙方事先約定好的規則）

  2，計算機編程語言兩種類型

     1》解釋型  JavaScript、java、php

     2》編譯型  c、c++

  3，HTTP服務器

 

       即網站服務器，主要提供文檔(文本、圖片、視頻、音頻)瀏覽服務。

    客戶端

          具備向服務器索取服務能力的終端

        好比 手機、電腦，客戶端軟件，瀏覽器、QQ、迅雷、Foxmail等

 

    前端開發

       以瀏覽器爲宿主環境，結合 HTML、CSS、Javascript等技術，而進行的一系列開發，一般稱之爲前端開發。

 

              注：這裏會涉及到 B/S、C/S 結構(瞭解)

                                         B/S結構：B：brower    S:server 表示的是客戶端瀏覽器服務模式，這個數據的修改徹底是在服務端。

                                         C/S結構：C：client     S:server  這個僅僅是當全部的客戶端都更新了以後，服務端就不能在該數據了。

 

4，網絡之間的計算機如何找到彼此？答案是IP地址，ip地址又是什麼呢，那就讓咱們接着往下看

5.HTTP響應碼

     響應碼分爲五種：

          （1）  1xx：信息，請求收到，繼續處理 

                                          100 Continue    繼續。客戶端應繼續其請求

                                         101 Switching Protocols 切換協議。服務器根據客戶端的請求切換協議。只能切換到更高級的協議，例如，切換到HTTP的新版本協議

        （2）    2xx：成功，行爲被成功地接受、理解和採納 

                                       200 OK  請求成功。通常用於GET與POST請求

                                       201 Created 已建立。成功請求並建立了新的資源

                                       202 Accepted    已接受。已經接受請求，但未處理完成

                                       203 Non-Authoritative Information   非受權信息。請求成功。但返回的meta信息不在原始的服務器，而是一個副本

                                      204 No Content  無內容。服務器成功處理，但未返回內容。在未更新網頁的狀況下，可確保瀏覽器繼續顯示當前文檔

                                      205 Reset Content   重置內容。服務器處理成功，用戶終端（例如：瀏覽器）應重置文檔視圖。可經過此返回碼清除瀏覽器的表單域

                                       206 Partial Content 部份內容。服務器成功處理了部分GET請求

 

          （3）  3xx：重定向，爲了完成請求，必須進一步執行的動做 

                     

                                       300 Multiple Choices    多種選擇。請求的資源可包括多個位置，相應可返回一個資源特徵與地址的列表用於用戶終端（例如：瀏覽器）選擇。

                                       301 Moved Permanently   永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。從此任何新的請求都應使用新的URI代替。

                                        302 Found   臨時移動。與301相似。但資源只是臨時被移動。客戶端應繼續使用原有URI

                                         303 See Other   查看其它地址。與301相似。使用GET和POST請求查看。

                                         304 Not Modified    未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端一般會緩存訪問過的資源，經過提供一個頭信息指出客戶端但願只返回在指定日期以後修改的資源。

                                         305 Use Proxy   使用代理。所請求的資源必須經過代理訪問。

                                          306 Unused  已經被廢棄的HTTP狀態碼

                                          307 Temporary Redirect  臨時重定向。與302相似。使用GET請求重定向

                          
          （4）  4xx：客戶端錯誤，請求包含語法錯誤或者請求沒法實現 

                                          400 Bad Request 客戶端請求的語法錯誤，服務器沒法理解。

                                          401 Unauthorized    請求要求用戶的身份認證。

                                          402 Payment Required    保留，未來使用。

                                         403 Forbidden   服務器理解請求客戶端的請求，可是拒絕執行此請求。

                                          404 Not Found   服務器沒法根據客戶端的請求找到資源（網頁）。經過此代碼，網站設計人員可設置"您所請求的資源沒法找到"的個性頁面。

                                          405 Method Not Allowed  客戶端請求中的方法被禁止。

                                          406 Not Acceptable  服務器沒法根據客戶端請求的內容特性完成請求。

                                        407 Proxy Authentication Required   請求要求代理的身份認證，與401相似，但請求者應當使用代理進行受權

                                        408 Request Time-out    服務器等待客戶端發送的請求時間過長，超時

                                         409 Conflict    服務器完成客戶端的PUT請求是可能返回此代碼，服務器處理請求時發生了衝突

                                           410 Gone    客戶端請求的資源已經不存在。410不一樣於404，若是資源之前有如今被永久刪除了可以使用410代碼，網站設計人員可經過301代碼指定資源的新位置。

                                            411 Length Required 服務器沒法處理客戶端發送的不帶Content-Length的請求信息

                                            412 Precondition Failed 客戶端請求信息的先決條件錯誤

                                        413 Request Entity Too Large    因爲請求的實體過大，服務器沒法處理，所以拒絕請求。爲防止客戶端的連續請求，服務器可能會關閉鏈接。若是隻是服務器暫時沒法處理，則會包含一個Retry-After的響應信息。

                                          414 Request-URI Too Large   請求的URI過長（URI一般爲網址），服務器沒法處理

                                           415 Unsupported Media Type  服務器沒法處理請求附帶的媒體格式

                                         416 Requested range not satisfiable 客戶端請求的範圍無效

                                           417 Expectation Failed  服務器沒法知足Expect的請求頭信息

         （5）   5xx：服務器錯誤，服務器不能實現一種明顯無效的請求 

                               

                                       500 Internal Server Error   服務器內部錯誤，沒法完成請求。

                                       501 Not Implemented 服務器不支持請求的功能，沒法完成請求。

                                        502 Bad Gateway 充當網關或代理的服務器，從遠端服務器接收到了一個無效的請求。

                                          503 Service Unavailable 因爲超載或系統維護，服務器暫時的沒法處理客戶端的請求。延時的長度可包含在服務器的Retry-After頭信息中

                                           504 Gateway Time-out    充當網關或代理的服務器，未及時從遠端服務器獲取請求。

                                        505 HTTP Version not supported  服務器不支持請求的HTTP協議的版本，沒法完成處理。

 

  （三）json數據的兩種轉換的方式

(1)JSON.stringify() 轉爲json字符串，
 (2)JSON.parse() 轉爲json數組

              

 

（四）網絡基礎

   1，IP地址

 

                 所謂IP地址就是給每一個鏈接在互聯網上的主機分配的一個32位地址。(就像每部手機能正常通話須要一個號碼同樣)

 

         查看本機IP地址 ipconfig、ifconfig（使用cmd命令，打開黑窗口，輸入這兩個命令，能夠查看本身本機的ip地址）

 

  2，域名

                   域名是一個IP地址的「面具」，因爲IP地址基於數字，不方便記憶，因而便用域名來代替IP地址。

         查看域名對應的IP地址 ping、tracert

 

     域名和IP地址 ： 對應關係不必定是一一對應的（有多是多個域名對應一個ip地址）

 3.端口

 

              端口號是計算機與外界通信交流的出口，每一個端口對應不一樣的服務（用來區分電腦上特定應用網絡應用程序）

             常見端口號 80（http的端口）、8080、3306（Mysql的默認的端口）、21、22

4，DNS

              DNS記錄了 IP 地址和域名的映射（對應）關係；

      查找優先級 本機hosts文件、DNS服務器

   若是訪問http://www.baidu.com/地址的時候計算機所進行的內部的操做。

 

              一、 域名解析（DNS）

 

              二、 經過解析道德IP地址找到對應的計算機

（五）認識什麼是異步和同步

  1，先來一波類比

  當咱們瀏覽網頁的時候兩種狀況：

           一、 白屏 （這就是咱們所說的「同步」）

            二、 頁面不刷新  （異步）  局部更新頁面不會全屏刷新

（六）AJAX的詳解

  1，原生的ajax的實現（以下面的代碼）

         （1）兼容的處理

      XMLHttpRequest 在老版本瀏覽器（IE5/6）中有兼容問題，能夠經過另一種方式代替封裝

              var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')；

 

 

//第一步就是：建立xhr對象
              var xhr=null; 
//下面的要處理一下兼容
      if (window.XMLHttpRequest){
           //標準的瀏覽器下面
            xhr=new XMLHttpRequest();
          }else{
          //早期的瀏覽器下
           xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }
//對於處理的兼容,咱們也能夠採用下面的異常處理的方式
（

var xhr = null;
	try{
	xhr = new XMLHttpRequest();
	}catch(e){
	xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}

）
//第二步：準備發送請求---就是配置發送的一些行爲
//對於的這個open的方法中有三個參數，第一個參數是以什麼方式發送請求，第二個參數就是所要發送請求的地址，第三個參數就是是異步操做仍是同步操做，通常默認下是異步的操做（true）
             xhr.open(type.url,true)；
//第三步：執行發送的動做
//這裏面的param表示的是咱們發送請求的時候，所傳遞的參數。（對於若是是以get，這裏面的參數是null，通常的若是以get的形式進行請求的話，咱們的傳遞的參數會放在url加？的後面進行傳遞，若是是以post的方式進行傳遞的話，就會把所要傳遞的參數放在這個變量中。
             xhr.send(param);
//第四步：指定一些回調函數
        xhr.onreadystatechange=function(){
                  if(xhr.statusState==4){
                             if(xhr.status==200){
                                         console.log(xhr.responseText);
                                }
                      }

 

2，xhr對象中有一個readyState的屬性。這個屬性是因爲 readystatechange 事件是在 xhr 對象狀態變化時觸發（不單是在獲得響應時），也就意味着這個事件會被觸發屢次，因此咱們有必要了解每個狀態值表明的含義：

readyState	狀態描述	說明
0	UNSENT	代理（XHR）被建立，但還沒有調用 open() 方法。
1	OPENED	open() 方法已經被調用，創建了鏈接。
2	HEADERS_RECEIVED	send() 方法已經被調用，而且已經能夠獲取狀態行和響應頭。
3	LOADING	響應體下載中， responseText 屬性可能已經包含部分數據。
4	DONE	響應體下載完成，能夠直接使用 responseText 。

3，以get的方式進行傳遞的代碼

var xhr = new XMLHttpRequest()
// GET 請求傳遞參數一般使用的是問號傳參
// 這裏能夠在請求地址後面加上參數，從而傳遞數據到服務端
xhr.open('GET', './delete.php?id=1')
// 通常在 GET 請求時無需設置響應體，能夠傳 null 或者乾脆不傳
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState ！=== 4) return；
       console.log(this.responseText)

}
注意：
1，若是要是以get的類型進行的傳參數，若是是亂碼的的話，咱們可使用下面的這個方法 encodeURIComponet（你所傳遞的參數的值）,
案例：var url = '05open.php?username='+ encodeURIComponet(username)+'&password='+password;
2，解決get瀏覽器緩存的問題，通常的咱們都會在咱們的傳遞的url地址的後面加上一個毫秒數，這樣的話，能夠刷新每一次新的數據，"url?data&_t="+new Date().g
etTime() 這樣的話就能夠解決問題啦。

4，以post方式請求的代碼，若是要是以post的方式來發送請求的話，這個時候咱們傳遞的參數是在send方法中進行傳遞的。這個參數傳遞的時候，咱們必定要按照咱們傳遞的格式進行，設置咱們請求體中的向服務器中發送的格式，不然的話，就有可能會出現亂碼的狀況。

var xhr = new XMLHttpRequest()
// open 方法的第一個參數的做用就是設置請求的 method
//請求行
xhr.open('POST', './add.php')
// 設置請求頭中的 Content‐Type 爲 application/x‐www‐form‐urlencoded
// 標識這次請求的請求體格式爲 urlencoded 以便於服務端接收數據
//請求頭
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 須要提交到服務端的數據能夠經過 send 方法的參數傳遞
// 格式：key1=value1&key2=value2
//請求體
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

   注意：咱們設置post中這個請求頭的意思（這個表示的就是咱們的客戶端向咱們的服務端發送的數據的格式的類型）

            這個類型通常包括下面幾個格式。

                       1，發送json格式數據,

                        xhr.setRequestHeader("Content-type","application/json; charset=utf-8");

                      2，發送表單數據

                      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

                     3，發送純文本

        不指定Content-type時，此是默認值值

                    xhr.setRequestHeader("Content-type", "text/plain; charset=utf-8");

                    4，發送html文本

               xhr.setRequestHeader("Content-type", "text/html; charset=utf-8");

5，原生ajax的封裝的兩種形式

（1）傳入的是多個參數

// 封裝者 
// ============================= 

function ajax (method, url, params, done) { 
method = method.toUpperCase() 
var xhr = new XMLHttpRequest() 

if (typeof params === 'object') { 
var tempArr = [] 
for (var key in params) { 
var value = params[key] 
tempArr.push(key + '=' + value) 
} 
params = tempArr.join('&') 
} 

if (method === 'GET') { 
url += '?' + params 
} 

xhr.open(method, url, false) 

var data = null 
if (method === 'POST') { 

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
data = params 
} 

xhr.onreadystatechange = function () { 
if (this.readyState !== 4) return 
// 不該該在封裝的函數中主觀的處理響應結果 
// console.log(this.responseText) 
// 你說我太主觀，那麼你告訴我應該作什麼 
done(this.responseText) 
} 

xhr.send(data) 
} 

// 調用者 
// ============================ 

var onDone = function (res) { 
console.log('hahahahaha') 
console.log('hohohohoho') 
console.log(res) 
console.log('作完了') 
} 

ajax('get', 'time.php', {}, onDone) 

（2）傳入的是一個對象參數

<script type="text/javascript">

function ajax(data){
    //data={data:"",dataType:"xml/json",type:"get/post"，url:"",asyn:"true/false",success:function(){},failure:function(){}}

    //data:{username:123,password:456}
    //data = 'username=123&password=456';
    //第一步：建立xhr對象
    var xhr = null;
    if(window.XMLHttpRequest){//標準的瀏覽器
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //第二步：準備發送前的一些配置參數
    var type = data.type == 'get'?'get':'post';
    var url = '';
    if(data.url){
        url = data.url;
        if(type == 'get'){
            url += "?" + data.data + "&_t="+new Date().getTime();
        }
    }
    var flag = data.asyn == 'true'?'true':'false';
    xhr.open(type,url,flag);

    //第三步：執行發送的動做
    if(type == 'get'){
       xhr.send(null);
    }else if(type == 'post'){
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xhr.send(data.data);
    }

    //第四步：指定回調函數
    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            if(this.status == 200){
                if(typeof data.success == 'function'){
                    var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
                    data.success(d);
                }
            }else{
                if(typeof data.failure == 'function'){
                    data.failure();
                }
            }
        }
    }

}





    window.onload = function(){
        //註冊按鈕單擊事件
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var param = {
                url:'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=weather&code=101010100',
                type:'get',
                dataType:'json',
                success:function(data){
                    alert(data);
                }
            };
            ajax(param);
        }
    }

（七）服務響應的兩種的數據格式

      1. XML

                 如今大都不使用這種格式啦，都已經被淘汰了。

        2，json

                也是一種數據描述手段，相似於 JavaScript 字面量方式。         

          注意：    這兩種數據的格式，無論是 JSON 也好，仍是 XML，只是在 AJAX 請求過程當中用到，並不表明它們之間有必然的聯繫，它們只是數據協議罷了。

（八）對於服務傳回來的數據，咱們經過模板引擎進行渲染。

          通常咱們使用的模板引擎主要是  artTemplate模板。（使用模板引擎的好處是，簡單，方便，快捷）

          咱們也能夠不使用模板引擎，咱們也可使用，咱們的js代碼動態的渲染咱們從服務端渲染的數據。

（九）jQuery中的ajax的請求方法

   1，準備工做

    首先引入jquery文件

  2，jquery中的幾種使用的方法

    （1）$.ajax();

        

$.ajax({
url: './get.php',               //url：請求地址
type: 'get',                    //type：請求方法，默認爲 get
dataType: 'json',               //dataType：服務端響應數據類型(一旦設置的 dataType 選項，就再也不關心 服務端 響應的 Content-Type 了,

                                  客戶端會主觀認爲服務端返回的就是 JSON 格式的字符串) 

  data: { id: 1 }, //data：須要傳遞到服務端的數據，若是 GET 則經過 URL 傳遞，若是 POST 則經過請求體傳遞

beforeSend: function (xhr) {      //請求發起以前觸發
console.log('before send')
},
success: function (data) {         //：請求成功以後觸發（響應狀態碼 200）
console.log(data)
},
error: function (err) {            //請求失敗觸發
console.log(err)
},
complete: function () {                請求完成觸發（無論成功與否）
console.log('request completed')
}
})

       下面是jquery中ajax中type分別爲get和post的兩種方式的對比。

     

      (2)   $.get()

$.get('json.php', { id: 1 }, function (res) {
      console.log(res) ；
}

 

      (3)    $.post()

$.post('json.php', { id: 1 }, function (res) {
      console.log(res) ；
}

      (4)$.getJSON()

$.getJSON('json.php', { id: 1 }, function (res) {
      console.log(res) ；
}
//對於後面的這三個方法中的回調函數，都是成功返回數據時的回調函數。

（十）同源策略

     1，概念：同源策略是瀏覽器的一種安全策略，所謂同源是指域名，協議，端口徹底相同，只有同源的地址才能夠相互經過AJAX 的方式請求。

     2，跨域  ：同源或者不一樣源說的是兩個地址之間的關係，不一樣源地址之間請求咱們稱之爲跨域請求。

（十一）實現跨域的方式

            （1）iframe

   

             （2）jsonp

                             

$(function(){

    $.ajax({
        type : "get",
        async: false,
        url : "./jsonp.php",
        dataType : "jsonp",
        //jsonp: "qwe",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(默認爲:callback)
        //jsonpCallback:"liudehua",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名(相似：jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);)
        success : function(data){
            console.log(data);
        },
        error:function(){
            console.log('fail');
        }
    });

});

             （3）CORS

                        CORS ：Cross Origin Resource Share，跨域資源共享

                             

/ /容許遠端訪問
header('Access‐Control‐Allow‐Origin: *');

    這種方案無需客戶端做出任何變化（客戶端不用改代碼），只是在被請求的服務端響應的時候添加一個 Access-Control-Allow-Origin 的響應頭，表示這個資源是否容許指定域請求

(4)也可使用jacascript標籤實現咱們跨域資源的共享

    原理：就是先添加一個script標籤到頁面中，而後引入咱們引於的ip地址，在咱們引入的ip地址中有一個回調函數的名字，這個時候咱們須要在當前的頁面中，在建立一個函數，在這個函數中實施對數據的渲染。

 

 （十二）補充知識點

      1，函數

               （1）函數的定義方式

                           第一種方式：  function 函數名(參數列表。。。){

                                           //函數功能代碼
                                  }

                          第二種方式：函數表達式

                                     var fn1 = function(){

                                             console.log(1111);
                                     };

    

           2，函數的幾種方式

                       1》能夠做爲參數(表示的是回調函數）

                       2》能夠做爲返回值（這樣就構成了閉包）

           3，javascript 代碼運行分連個階段：

                一、預解析 --- 把全部的函數定義提早，全部的變量聲明提早，變量的賦值不提早
                二、執行 --- 從上到下執行 （setTimeout，setInterval,ajax中的回調函數，事件中的函數須要觸發執行）

                 對於上面的兩種的函數定義的方式來講，若是沒有函數定義以前，第一種會有預編譯的行爲，也會調用函數，可是第二種，是會報錯的。

 

 

 

 

 

 

 

 

 

最後，發表一下本身的小小的感想，忽然發現總結本身學過的知識仍是挺好的，這樣能夠作到鞏固加提升，先寫這麼多，本身寫的很差，還請評論補充，後續我還會再加的。加油每一天，後面繼續加油。