初識Ajax

時間 2019-12-10

標籤 ajax 欄目 Ajax 简体版

原文原文鏈接

　　初步認識Ajaxhtml

　　Ajax是如今作前端的來講是一項不得不掌握的技術，其實更準確的來講是一種方法，在剛學完html和js的同窗來講已經可以很好的完成一個頁面的設計，以及頁面與頁面，頁面與後臺之間的交互，在信息傳遞的過程當中咱們有不少種實現的方法：表單的實現，頁面的跳轉以及重定向，servlet等等，然而在咱們實際生活中碰到的有着不少信息的交互，難道咱們每一次交互就要將整個頁面都加載一遍？所須要的數據每次都要從雲端或者數據庫中從新加載？別吧，數據很少的時候還能這樣，一多的話，光是加載都能讓你等半天，要是同時訪問的人數一旦增長，那你怕不是得去買一個容量更大的服務器了。
前端

　　因此！！Ajax技術就如今而言是前端工程師一項所必備的技能了，爲的就是能在頁面交互信息的同時儘量少的對頁面的其餘部分做出改動，從而達到可以更快速的運行該頁面。固然啦，這個繁雜的解釋是我這個鳥兒本身說的白話文，來一段W3C的簡單解釋吧。node

　　AJAX 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。web

　　沒錯！！就是這樣，就一個簡單的例子而言，微博，每一個人多多少少確定都有玩的吧，咱們會點擊裏面一些咱們感興趣的內容從而進行瀏覽，但頁面大體的框架是不會改變的，也就是說是有一個區域是專門來顯示全部的內容，而咱們點擊進去以後也是在那一塊區域顯示咱們點擊的內容，其他的位置與內容一律不變。ajax

　　什麼是 AJAX ？

　　AJAX = 異步 JavaScript 和 XML。數據庫

　　AJAX 是一種用於建立快速動態網頁的技術。瀏覽器

　　經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。緩存

　　傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。安全

　　在不一樣版本的瀏覽器下建立XMLhttpRqueest是不同的，下面的這一串代碼是從之前比較古老版本的瀏覽器建立到如今的規格等瀏覽器建立的不一樣方法，雖然如今通常都是在谷歌的環境下運行的，不過爲了學習咱們仍是整理一下服務器

 1 //這裏是判斷在不一樣瀏覽器版本的狀況下建立httpRequest應該用什麼樣的建立方法
 3             try {        
 4             //微軟第二代瀏覽器出建立    xmlHttpRequest實例對象的方式
 5             httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
 6         } catch (e) {
 7             try {        
 8             //2 微軟第一代瀏覽器出建立    xmlHttpRequest實例對象的方式
 9                 httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
10             } catch (e) {
11                 try {
12                 // 3 谷歌 火狐 或者 蘋果瀏覽器 建立    xmlHttpRequest實例對象的方式        
13                     httpRequest = new XMLHttpRequest();
14                     if (httpRequest.overrideMimeType) {
15                         httpRequest.overrideMimeType("text/xml");
16                     }
17                 } catch (e) {
18                 }
19             }
20         }

　　通常在這一套下來是能夠建立成功的，但排除有其餘錯誤，因此爲了方便檢驗以及安全起見咱們仍是彈出一個窗口以檢驗是否建立成功，XMLhttpRequest在建立失敗下的狀態是Null

1 //返回的若是HttpRequest爲空就證實以上建立的方法都無效
2     if (httpRequest == null) {
3         alert("瀏覽器不支持ajax特效");
4         return;
5     }

　　XMLhttpReuest與服務器交換數據有兩種方式，一種是Get一種是Post，來，接下來看一下權威

Get:

Post:

　　其實在html中咱們也有用到表單提交的方式，也是這兩種方法，那麼這二者到底有什麼區別呢

　　與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

　　然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

　　總的的來講，仍是得視狀況而定，若是咱們傳遞的數據僅僅只是登陸或者顯示固定內容的一些小數據傳輸，那咱們就得使用Get會方便一點，但若是咱們使用的狀況是在視頻或直播中的彈幕，這種隨時有着大量數據傳輸以及存在未知字符的可能性時，咱們就要用Post方法會相對來講保險一點了。

　　但要注意的是，Get請求與Post請求在實現上有一點略微的不一樣　　

　　Get請求能夠在請求發送信息時，可在URL中添加信息：

1 xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
2 xmlhttp.send();

　　若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定您但願發送的數據：

1 xmlhttp.open("POST","ajax_test.asp",true);
2 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3 xmlhttp.send("fname=Bill&lname=Gates");

異步 - True 或 False？

AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 對象若是要用於 AJAX 的話，其 open() 方法的 async 參數必須設置爲 true：

xmlhttp.open("GET","ajax_test.asp",true);

對於 web 開發人員來講，發送異步請求是一個巨大的進步。不少在服務器執行的任務都至關費時。AJAX 出現以前，這可能會引發應用程序掛起或中止。

經過 AJAX，JavaScript 無需等待服務器的響應，而是：

在等待服務器響應時執行其餘腳本
當響應就緒後對響應進行處理

　　固然了，咱們在作的時候或者在瀏覽的時候，讀到的數據不少都是來自於服務器的數據，那麼咱們爲了可以得到來自服務器的響應，就得使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

若是咱們獲取來自服務器的響應並不是XML，請使用responseText 屬性，該屬性返回的是字符串形式的響應

1   if(httpRequest.responseText==1){
2        //已存在
3        document.getElementById("mylab").innerHTML="<font color='red'>×用戶已存在 ,不可註冊</font>";
4        }else if(httpRequest.responseText==0){
5        //不存在
6        document.getElementById("mylab").innerHTML="<font color='green'>√用戶不存在 ,能夠註冊</font>";
7        }

判斷從服務器返回的數據以此來決定決定在<label>中顯示的是什麼內容

但若是來自服務器的響應是XML，就須要對XML對象進行解析，那麼就得使用responseXML

請求 books.xml 文件，並解析響應：

1 xmlDoc=xmlhttp.responseXML;
2 txt="";
3 x=xmlDoc.getElementsByTagName("ARTIST");
4 for (i=0;i<x.length;i++)
5   {
6   txt=txt + x[i].childNodes[0].nodeValue + "<br />";
7   }
8 document.getElementById("myDiv").innerHTML=txt;