Ajax 應用

Ajax的工做原理

Ajax不是新技術，而是一種技巧。是以JavaScript、xhtml、css、dom、xml、xstl、XMLHttpRequest綜合而造成的開發平臺。傳統的Web工做模式很是簡單，就是瀏覽器發送http請求，服務器接收請求處理返回一個html/xhtml頁面到客戶端，這種方式不免會出現用戶等待的狀況。而Ajax就是是瀏覽器和Web服務器之間新增的一層引擎，這是一種異步通訊方式。

技術元素	做用
HTML/XHTML CSS	用於Web瀏覽器中呈現頁面顯示效果和頁面佈局
XMLHttpRequest	能夠直接傳輸數據到服務器 或從服務器獲取數據
JavaScript腳本語言	編寫Ajax應用的實現，在瀏覽器中實現相關處理邏輯
XML	客戶端和服務器的數據傳輸的格式
XSLT	將Web服務器傳回的XML數據轉換爲html輸出到瀏覽器
DOM	處理XML的API，html的表述結構，並能夠利用它來改變html的內容， javascript經過DOM才能夠和頁面交互； 文件的屬性、方法、 事件都以對象來展現，如document表示頁面對象自己

 

 

 

 

 

 

 

 

 

 

Ajax優缺點：

優勢：

一、數據和呈現分離。也就是先後端分離，有利於分工合做。

二、減輕服務器壓力。

三、減小帶寬消耗。

四、用戶體驗提高。

五、市場承認。當年谷歌地圖採用ajax技術吸引了大量的目光，如今幾乎全部網站都採用ajax技術，已經變的很是廣泛。

缺點：

一、用戶習慣改變。一個最爲明顯的是瀏覽器後退鍵失效，雖然經過一些方法能夠解決，但也給開發人員帶來更大的工做量。

二、瀏覽器兼容問題。若是是用原生的js編寫就要考慮這個問題了，固然最好用jquery。

三、安全問題。跨域腳本攻擊、sql注入等問題。

四、對搜索引擎不友好。

相信隨着ajax的發展這些問題都會獲得很好的解決。

 

Ajax簡單實例

原生JS

核心：XMLHttpRequest

過程：建立XMLHttpRequest對象，鏈接服務器，發起請求，接受響應數據

全部現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 對象。

經過一行簡單的 JavaScript 代碼，咱們就能夠建立 XMLHttpRequest 對象。

建立XMLHttpRequest對象

 var xmlhttp=new XMLHttpRequest();

老版本IE（IE6）使用ActiveX對象

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

//完整代碼
<script type="text/javascript">
    var xhr;
    if (window.XMLHttpRequest) {//全部現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera)
        xhr = new XMLHttpRequest();
    } else {//IE6如下
        xhr = new new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange=function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //...
        }
    }
    xhr.open("GET", "/test/test", true);
    xhr.send();
</script>

 

Jquery

參考地址：http://www.w3school.com.cn/jquery/ajax_ajax.asp

 $.ajax({
        url: "http://api.b.com/getapi",
        dataType: "JSON",
        type: "GET",
        async: true,
        data: {},
        success: function (data) {  },
        error: function () { }
    });