Ajax基礎詳解1

         Ajax也是前端必備技能了，學習任何語言，都須要以理論爲基礎的大量實踐才能真正學會，以前學了Ajax不少遍，由於缺少大量實踐，老是會忘。因此不實踐是失敗之母。。。固然理論基礎也很重要啦，今天談談我對Ajax的基礎認知。

定義：全稱：Asynchronous JavaScript and XML（用異步的形式的JavaScript去操做XML)  用來傳輸進行數據交互 其實就是拿數據發數據。

做用：  傳統的數據提交，大可能是經過表單的形式，填寫數據，點擊提交，數據就會被提交到後端，這種提交每每會跳轉頁面，存在不少問題，好比咱們填完信息點了提交，就會跳到後端頁面，後端頁面進行驗證，發現用戶已經註冊了，這個時候又會跳轉到表單填寫頁面，讓咱們回去從新填，那以前填的全沒了，確定體驗很很差。而Ajax就是能作到私底下去請求頁面傳遞數據，而後返回給咱們請求的結果，咱們前端接收到這個結果，根據結果能夠作一些操做，好比提示錯誤信息，整個頁面是一直處在表單填寫界面，從未跳轉。想一想咱們日常註冊賬號的時候，是否是沒跳轉界面就知道本身哪填的不對了，就是ajax在起做用。

下面咱們先不解析具體的原理，先來看一個大體的實現過程。

首先，你得知道是把代碼放在服務器下運行的，打開的時候不能用本地的地址，要用localhost/。。這種形式纔是在服務下訪問的。要是這不瞭解的話，能夠先自行百度下。我日常都是用的xampp第三方集成的服務器，比較輕便。

需求：新建一個文字1.txt,隨便輸入什麼內容，新建HTML頁面，點擊HTML頁面裏的按鈕發生請求獲取1.txt裏面的內容。這裏只看js代碼。

var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var xhr = new XMLHttpRequest();  //建立Ajax對象 xhr.open('get','1.txt',true);    //設置請求信息 xhr.send(); //提交請求

        //等待服務器返回內容
         xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { //判斷當前的請求狀態，4表明後端已經處理完成 alert( xhr.responseText ); //彈出內容 } } } 

當點擊按鈕的時候，你就會發現彈出了1.txt裏面的內容。

咱們來具體解析一下這個步驟

 var xhr = new XMLHttpRequest(); //建立Ajax對象

咱們要用Ajax獲取數據，首先呢，要建立一個Ajax對象，就跟你想獲取系統時間要建立一個時間對象是一個道理。對象的名稱就是 XMLHttpRequest()，建立好以後咱們就能夠用對象下的方法屬性進行數據交互了。

須要說明的是，這個對象實際是存在兼容問題的，IE6如下沒有這個對象的，因此是獲取不到數據的，IE6如下用的實際是一個插件的方式：

 ActiveXObject(‘Microsoft.XMLHTTP’) //ActiveXObject: IE6下插件的總稱，包含不少插件 //Microsoft.XMLHTTP：具體某個插件的名字

因此咱們須要對上面作一個兼容性的處理：

var xhr = null; if(window.XMLHttpRequest){ //加window是由於若是直接判斷IE下不存在的東西會報錯，加了window，就是在判斷一個屬性是否存在，這樣就不會報錯了（固然咱們都知道全部的東西都在window對象下，因此這樣判斷是有效的）
    xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject(‘Microsoft.XMLHTTP’); }

接着看

xhr.open('get','1.txt',true); //設置請求信息
Open方法：有三個參數 一、提交方式 Form-method(get/post) 二、提交地址 Form-action 三、是否異步，是爲(true)

首先講提交方式：get/post 這兩種的區別。

這裏咱們不用ajax的方式，先直接經過傳統的表單提交數據來分析。

傳統的表單提交就是在表單裏面設置提交的一些參數，用戶的輸入信息點擊提交，會跳到指定的後臺頁面。

表單form標籤的屬性：
action：提交到哪裏 默認是當前頁面
method：提交方式 默認是Get
enctype: 提交的數據格式，默認是application/x-www-form-urlencoded

咱們來具體看個get方式請求的栗子，而且瞭解先後端究竟是怎麼交互的。

栗子需求：創建HTML頁面，PHP頁面，填入數據，點擊提交，而後輸出咱們輸入的內容。

HTML頁面：

<form action="1.get.php">
    <input type="text" name="username">
    <input type="text" name="age">
    <input type="submit" value="按鈕" />
</form>

1.get.php（若是不瞭解PHP語言，大概看下面的註釋簡單知道幹啥就好了）

<?php header('content-type:text/html;charset="utf-8"'); //設置編碼格式，以及文檔類型 error_reporting(0); $username = $_GET['username'];//獲取get請求的方式獲得填寫的數據 這裏$_GET裏的參數是要和前端標籤中的name屬性是保持一致的
$age = $_GET['age']; echo "你的名字：{$username}，年齡：{$age}"; //輸出內容

觀察實驗結果，當點擊按鈕，頁面會跳到1.get.php頁面，把內容輸出。而且觀察上面的地址欄，會發現咱們輸入的信息被放在了地址欄上。

    這裏就要講一下網絡請求方面的知識，當咱們輸入網址獲取內容，整個過程是怎麼發生的呢？瀏覽器又作了什麼？

    首先要講一下HTTP協議，雖然表面上咱們經過代碼來實現了交互，實際上在網絡請求的時候內部是經過各類協議達到了想要的結果，這個協議呢就是一種規範，由於網絡上存在太多不一樣類型的東西，要想互相能交流傳遞就須要一種共同遵照的約定，才能理解。而咱們這裏就用到了HTTP協議，但願有機會的人已經要去學習一下計算機網絡方面的東西，這裏推薦一本書《圖解HTTP》，是我看過最清晰易懂的書了，其實有一個系列，均可以看看。

   因此當咱們輸入網址的時候，瀏覽器根據HTTP協議生成一個請求報文發送給服務端，而後服務端收到這個報文就會進行處理而後迴應給咱們一個響應報文。這兩個報文裏面含有請求和迴應的各類信息。其實從代碼角度來看，請求報文是經過前端代碼能夠設置的，好比什麼時候發送發送給誰，響應報文就是後端代碼處理後返回的一個結果。

請求報文裏通常包括請求的方法（GRT/POST），請求的URL或傳遞的數據等。

響應報文裏有請求狀態碼，好比200表示請求成功，還有返回的一些數據等。

具體咱們不說太多，能夠本身私下多瞭解，，主要來講的是GET請求方式和POST的不一樣在請求報文上的體現。

其實整個GET請求過程以下，假設後臺語言是PHP。

1 輸入用戶信息，點擊提交，跳到指定的後臺的頁面.

2 GET方式會把用戶輸入的數據名稱和對應的值以這樣的格式(username=value&age=value )串連起來，放在指定的後臺頁面的地址欄的問號（？）後面。而且把請求數據放到了請求報文裏。

3 後臺的代碼 ，能夠經過PHP語言中的$_GET方法，獲取到請求報文的用戶信息，用$_GET['username']; $_GET['age']方法獲取到值;而後就能夠進行一系列邏輯處理。

由此，咱們能夠知道GET方式：

1 把數據名稱和對應的值串連(username=value&age=value ),而後把數據放到指定頁面的url地址？後面，而後數據會被加入到請求報文中發送給後端。因此咱們徹底能夠在後臺頁面的地址欄上手動更改信息，相應的請求報文就會發生變化，GET方式請求的信息在請求報文裏也看獲得，因此get方式是不安全的，通常不用來提交比較敏感數據，大部分是獲取數據的時候用。

2 url有長度限制，因此GET請求的方式有數據量限制，每一個瀏覽器都不一樣，因此不要用這種方式傳遞過長的數據。否則會被截取，致使傳遞數據不完整。

3 只能傳遞字符串類型 

 

由於是用戶名是中文的時候，會默認編碼了，因此username後面是亂碼。

下面來看看POST方式，一樣是這樣的需求

HTML頁面：

<form action="1.get.php" method="post">
    <input type="text" name="username">
    <input type="text" name="age">
    <input type="submit" value="按鈕" />
</form>

1.get.php

<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $username = $_POST['username'];//不一樣的請求方式方法不一樣，$_POST方法專門用來獲取POST方式請求的數據
 $age = $_POST['age'];
 echo "你的名字：{$username}，年齡：{$age}";

咱們看到輸出信息頁面，地址欄上沒有用戶信息了，咱們打開開發者工具，找到網絡就能夠看到咱們的請求報文，點進去就是具體內容，看上面的第二個圖，能夠看到一些請求信息，有請求的編碼格式，還有請求地址等，POST請求的數據實際是在請求報文的實體裏進行傳遞的，因此更安全些，可是咱們發現咱們經過控制檯仍是能夠看到提交的信息，因此其實它也沒有很安全，通常仍是要對輸入的信息進行加密。

咱們看第三張圖，能夠看到請求的數據，上面的實際上是瀏覽器已經按照某種格式輸入的信息，下面的源代碼纔是實際傳遞的信息，能夠看到串連的格式和GET請求是同樣的，用戶名後面的亂碼是編碼了，當傳遞的是中文的時候，纔會進行這樣的編碼。

由此咱們能夠知道

Post請求
1 數據的串連格式和Get請求是同樣的。
2 經過請求報文的信息，經過瀏覽器內部傳輸，不會表如今網址上。

3 傳輸數據量 Post理論上無限

4 能夠傳遞多種數據類型（文本類型，二進制）。

關於Open方法的第一個參數提交方式就講到這裏，第二個地址先簡單瞭解，下面來看第三個參數關於異步和同步。

同步：就是一種阻塞模式，好比代碼var a =1 ; alert(a);這就是一種同步，必須執行了第一種var a =1，你纔會彈出a的值。

缺點：通常當你後面的代碼須要用到前面的東西的時候 適合用同步，若是兩句代碼徹底無關，那用同步就沒有必要了。

異步：就是一種非阻塞模式，最明顯的例子，就是定時器，當咱們寫了一個30s後執行的定時器的時候，在30S內定時器後面的代碼是能夠執行的，而不是過了30s後面代碼才能執行，這就是一種異步。

缺點：當你後面的代碼須要用到前面的東西的時候 若是用異步，那麼後面的代碼會在前面還沒加載好就出來，可能會有問題。
解決：當你後面的代碼須要用到前面的東西的時候，能夠用條件判斷來決定這些代碼的執行，若是條件達成了就能夠執行。

還拿上面的舉個栗子

var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject(‘Microsoft.XMLHTTP’); } xhr.open('get','1.txt',true); //設置請求信息 
 xhr.send();//提交請求
 //等待服務器返回內容 這裏後面會具體講，大概就是監聽服務器的狀態，先簡單瞭解便可
  xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { //若是內容響應成功，並解析完成 alert( xhr.responseText ); //彈出內容 
 } } } 

在上面的代碼中xhr.send()提交請求是須要時間的，因此必需要等到必定時間提交成功後，咱們後面的才能正確獲取到內容，因此這就是後面的代碼正確執行，依賴於前面，

可是若是用同步的話，咱們後面那些不依賴這些前面代碼的代碼也沒辦法執行，體驗就很差了，因此咱們選擇用異步，而對於這些依賴前面代碼執行的代碼，咱們就進行判斷

if ( xhr.readyState == 4 )就是判斷若是數據響應到了，收到了，再彈出內容。（若是咱們不判斷，按照異步的原理，就會立馬彈出來，獲取數據須要時間，由於實際還沒獲取到數據，因此會彈出空，怕誤解，因此這裏我再強調下）.

因爲Ajax內容比較多，因此會分開來說，咱們下節博客繼續分析，我是沐晴，不見不散