Ajax 的學習

本文轉載自查看原文 2019-04-23 18:45 366

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

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/地址的時候計算機所進行的內部的操作。

1、域名解析（DNS）

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

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

1，先來一波類比

當我們瀏覽網頁的時候兩種情況：

1、白屏（這就是我們所說的“同步”）

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

（六）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 代碼運行分連個階段：

1、預解析 --- 把所有的函數定義提前，所有的變量聲明提前，變量的賦值不提前
2、執行 --- 從上到下執行（setTimeout，setInterval,ajax中的回調函數，事件中的函數需要觸發執行）

對於上面的兩種的函數定義的方式來說，如果沒有函數定義之前，第一種會有預編譯的行為，也會調用函數，但是第二種，是會報錯的。

最后，發表一下自己的小小的感想，突然發現總結自己學過的知識還是挺好的，這樣可以做到鞏固加提高，先寫這么多，自己寫的不好，還請評論補充，后續我還會再加的。加油每一天，后面繼續加油。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AJAX的學習 Ajax學習心得 AJAX學習筆記從 AJAX 到 JSONP的基礎學習 vue學習之ajax請求 Ajax 學習總結 Ajax學習筆記 JavaWeb學習之Ajax Python爬蟲學習筆記（七）——Ajax AJAX學習必備三本書