Ajax前后台數據交互

Ajax全稱為“Asynchronous Javascript and XML”（異步JavaScript和XML），它並不是指一種單一的技術，而是有機地利用了一系列交互式網頁應用相關的技術所形成的結合體。他的出現揭開了無刷新頁面的新時代。

Ajax的優勢與不足

優勢：

1. 不需要任何瀏覽器插件支持，就可以被絕大多數瀏覽器支持。
2. 優秀的用戶體驗，能在不刷新整個頁面的前提下更新數據，是web應用程序能迅速回應用戶操作。
3. 提高web應用性能，傳統模式數據提交是通過表單（from）來實現的，而數據獲取是靠全頁面刷新來重新獲取整夜的內容。Ajax模式只是通過XMLHTTPRequest對象向服務器提交希望提交的數據，即按需發送數據。
4. 減輕服務器和寬帶的負擔。

不足：

1. 不同版本的瀏覽器對XMLHTTPRequest對象支持度不足，需要考慮兼容性問題。
2. Ajax只是局部刷新,所以頁面的后退按鈕是沒有用的。
3. 對搜索引擎的支持的不足，因為搜索引擎爬蟲還不能理解那些奇怪的js代碼和因此引起的頁面內容的變化。
4. 開發和調試工具缺乏。

總結：ajax還是很好用的，優勢更勝於不足。

Ajax原生寫法

Ajax的核心是XMLHttpRequest對象，它是實現Ajax的關鍵----發送異步請求、接收響應及執行回調都是通過他實現的。

function getXMLHttpRequest() { //這個函數做兼容進行處理，獲取XMLHttpRequest對象
        var xmlhttp; 
        if(window.ActiveXObject) { //IE5 IE6 是以ActiveXObject 的方式引入XMLHttpRequest對象的
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); 
        }else if (window.XMLHttpRequest) { //XMLHttpRequest是window子對象
                xmlhttp= new XMLHttpRequest(); //實例化一個XMLHttpRequest對象
        }else { 
                xmlhttp= null; 
        } 
        return xmlhttp; 
} 
    
function getData() { 
        var xmlhttp = getXMLHttpRequest(); 
        xmlhttp.open("get","http://localhost:3333/info",true);
　　　　 //調用open方法並采用異步方式  true 異步  false同步
        xmlhttp.send();//因為采用get，所以可以不指定參數或使用null參數
        //xmlhttp.setRequestHeader("Content-Type", "application/json");  
        //使用contentType: “application/json”則data只能是json字符串
        //xmlhttp.send(JSON.stringify({"name":"John", "age":"24"}));//post請求傳入string
        xmlhttp.onreadystatechange= function() { //當請求狀態readystate變化會觸發該函數
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                //在處理相應之前，處理器會先檢查readyState的值和HTTP狀態，當請求完成加載（readyState值為4）並且響應成功（HTTP狀態值為200）就可以響應數據 了
                console.log(xmlhttp.responseText); //這邊接收的是字符串也可以是responseXML
            } 
        }; 
}             

 jQuery寫法

function imgList(){
    $.ajax({
            type:"get",  //請求方式   get查詢  post增加  put修改   delete刪除
            url:"http://localhost:3333/home",//請求路徑
            async:true,  //異步
           // data:data, //發送到服務器的數據
            dataType:'json',  //返回值類型為json對象
            success:function(res){   //成功時  res 響應數據
                console.log(res);
                if(res.status == '1'){
                    if(res.result.length>0){
                        $.each(res.result,function(index,item){
                            $(".index-main ul").append('<li class="lists">'+'
　　　　　　　　<img src="'+item.product_img_url+'" width="150" height="150">'+'
　　　　　　　　<label>'+'<b class="discount">'+item.product_uprice+'</b>'+'
　　　　　　　　<span class="price-text">'+item.product_price+'</span>'+'
　　　　　　　　</label>'+'
　　　　　　　　</li>')；
                        })；
                    }else {
                        alert("沒有數據了")
                    }
                    
                }
            },
            error:function(error){ //失敗時打印錯誤信息
                console.log(error)
            }
        })
}