跨域訪問

跨域訪問
　　服務器收到請求是, 會檢查該請求來源, 如果來源的客戶端頁面自己無法識別,
　　則會根據需求做出限制或者拒絕訪問(例如: 黑客對服務器的攻擊)

　　對於客戶端, 瀏覽器的同源策略可限制對跨域資源的訪問,
　　若其余服務器的域不相同, 則瀏覽器可能進行限制甚至拒絕訪問.

　　但部分請求不受到同源策略的限制
　　<script>, <img>, <iframe>, <link> 這些包含 src 屬性的標簽可以加載跨域資源
　　基於這點可以實現跨域訪問

Demo: 使用 js 實現跨域訪問

$(function(){
    $("head").append("<script src = 'http://suggest.taobao.com/sug?code=utf-8&q=衣服&callback=showData'></script>")
})
//定義回調函數
function showData(data){
    //將js對象轉換成json格式的字符串
    var json = JSON.stringify(data);
    //將字符串轉換成 json 對象
    var objs = JSON.parse(json);
    for(var i=0;i<objs.result.length;i++){
        $("table").append("<tr>" + 
            "<td>"+objs.result[i][0]+"</td>" +
            "<td>"+objs.result[i][1]+"</td>" +
            " </tr>"    
        );
    }
}

Demo: 使用AJAX 實現跨域訪問(jsonp 方式)
　　jsonp 實現跨域的訪問只支持 get 請求

$(function(){
    //綁定事件
    $("a").click(emp_list_fun);
})
function emp_list_fun(){
    $.ajax({ //發送一個請求
        type:"post",
        url:"http://suggest.taobao.com/sug?code=utf-8&q=衣服&callback=showData",
        data:{"kw":"A","cp":1,"ls":10}, //傳遞的數據
        dataType:"jsonp", //實現跨域訪問
        async:false, //實現請求沒有完全處理之前鎖定瀏覽器, 不做后面的操作
        success:function(data){
            for(var i=0;i<objs.result.length;i++){
                $("table").append("<tr>" + 
                    "<td>"+objs.result[i][0]+"</td>" +
                    "<td>"+objs.result[i][1]+"</td>" +
                    " </tr>"    
                );
            }
        }
    });
}