Ajax和跨域問題

什麼是ajax

• Ajax(Asynchronous JavaScript and XML),是一種能夠向服務器請求額外的數據而且無需刷新頁面的技術,ajax的出現帶來了更好的用戶體驗.
• Ajax的核心就是XMLHttpRequest(XHR)對象.XHR爲向服務器發送請求和解析服務器響應提供了流暢的接口.可使用XHR對象獲取新數據,經過DOM將新數據插入到頁面.雖然名字中包含XML,可是ajax通訊和數據格式無關;這種技術就是能夠不用刷新就從服務器獲取數據,可是不必定是XML數據,也能夠是json.

XMLHttpRequest對象

XHR的用法

1.建立一個XMLHttpRequest對象

2.發送請求

• 1.設置請求行 xhr.open()
• 2.POST請求須要設置請求頭 xhr.setRequestHeader() POST請求頭Content-Type的值: application/x-www-form-urlencoded
• 3.設置請求體 xhr.send() get請求傳null,post根據狀況

3.處理服務器響應

• 先判斷響應狀態碼和異步對象是否解析完畢.
• 服務器返回的狀態碼 status

1xx:消息
    2xx:成功
    3xx:重定向
    4xx:請求錯誤
    5xx:服務器錯誤

• 異步對象的狀態碼 readystate

0:異步對象已經建立
    1:異步對象初始化完成,發送請求
    2:接收服務器返回的原始數據
    3:數據正在解析,解析須要時間
    4:數據解析完成,數據可使用了

XML

XML的特色，出身名門，W3C制定，微軟和IBM曾經共同大力推薦過的數據格式.XML 指可擴展標記語言（Extensible Markup Language）,被設計用來傳輸和存儲數據,HTML 是設計用來表示頁面的.

• 語法規則:和HTML差很少,都是經過標記來表示的
• 特殊符號:好比<>要使用實體-轉移字符
• xml的解析須要先後臺配合:
  1.後臺在返回的時候,在響應頭中設置Content-Type的值爲 application/xml
  2.前臺異步對象在接收後臺數據時,記得按照xml的方式來接收,xhr.responseXML,而且它返回的是一個object對象,內容是#document

JSON

JSON(JavaScript Object Notation),出身草根，是 Javascript 的子集，專門負責描述數據格式.JSON自己是一個特殊格式的字符串,能夠轉換成js對象,是網絡上用來傳輸數據使用最普遍的數據格式，沒有之一.

• 語法規則:數據以 key/value 值對錶示,數據由逗號分隔,大括號保存對象,中括號保存數組,名稱和值都須要使用雙引號包含(這個是和js的一點小區別).
• js中解析/操做JSON:
  1.JSON.parse(json字符串); 將一個json格式的字符串解析成js對象
  2.JSON.stringify(js對象); 將一個js對象轉成一個json格式的字符串

本身封裝一個ajax

function pinjieData(obj) {
    //obj 就至關於 {key:value,key:value}
    //最終拼接成鍵值對的字符串  "key:value,key:value"
    var finalData = "";
    for(key in obj){
        finalData+=key+"="+obj[key]+"&";  //key:value,key:value&
    }
    return finalData.slice(0,-1);//key:value,key:value
}

function  ajax(obj) {
    var url = obj.url;
    var method = obj.method.toLowerCase();
    var success = obj.success;
    var finalData = pinjieData(obj.data);
    //finalData最終的效果key:value,key:value

    //1.建立xhr對象
    var xhr = new XMLHttpRequest();
    //get方法拼接地址,xhr.send(null)
    if (method=='get'){
        url = url + "?"+finalData;
        finalData = null;
    }

    //2.設置請求行
    xhr.open(method,url);

    // 若是是post請求,要設置請求頭
    if (method=='post'){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    }

    //3.發送
    xhr.send(finalData);

    //4.監聽服務器返回的數據
    xhr.onreadystatechange = function () {
        if (xhr.status==200 && xhr.readyState==4){
            var result = null;
            //獲取返回的數據類型
            var rType = xhr.getResponseHeader("Content-Type");
            if (rType.indexOf('xml')!=-1){
                result = xhr.responseXML;
            }else if(rType.indexOf('json')!=-1){
                // JSON.parse 的意思是 將 json格式的字符串
                //好比 [{ "src":"./images/nav0.png","content":"商品分類1"}]
                //轉成js對象
                result = JSON.parse(xhr.responseText);
            }else{//當成普通的字符串去處理
                result = xhr.responseText;
            }

            //將這裏解析好的數據交給頁面去渲染
            success(result);
        }
    }
}

jQuery中使用ajax API jQuery ajax

jQuery爲咱們提供了更便利的ajax封裝使用.

• $.ajax({}) 能夠配置方式發起ajax請求
• $.get() 以get方式發起ajax請求
• $.post() 以post方式發起ajax請求
• $('form').serialize() 序列化表單(格式化key=val$key=val)
• 參數說明

url :接口地址
    type :請求方式(get/post)
    timeout : 要求爲Number類型的參數，設置請求超時時間（毫秒）
    dataType: 應該是客戶端傳遞給服務器一個值，告訴服務器如何進行處理:
    data: 發送請求數據
    beforeSend: 要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求.
    success: 成功響應後調用
    error: 錯誤響應時調用
    complete: 響應完成時調用（包括成功和失敗）

//ajax===get
     $.ajax({
         url:'',
         data:'key=value&key=value',
         type:'get',
         success:function (result) {
             console.log(result);
         }
     });

    //ajax===post
    $.ajax({
         url:'',
         data:'key=value&key=value',
         type:'post',
         success:function (result) {
             console.log(result);
         }
     });

    //$.get
    $.get({
         url:'',
         data:'key=value&key=value',
         success:function (result) {
            console.log(result);
         }
    });

    //$.post
    $.post({
         url:'',
         data:'key=value&key=value',
         success:function (result) {
            console.log(result);
         }
    });
    //在使用jQuery中ajax發送請求的時候,只須要在 dataType中寫上jsonp便可實現ajax的跨域請求
     dataType:'jsonp'

跨域

• 經過XHR實現ajax通訊的一個主要限制(相同域,相同端口,相同協議),來源於跨服安全策略,默認狀況下,XHR只能請求同一域的資源,這是爲了防止某些惡意的行爲.

  CORS跨域

• CORS(cross-origin resource sharing,跨域源資源共享)定義了在跨域時,瀏覽器和服務器應該如何溝通.CORS容許一個域上的網絡應用向另外一個域提交跨域 AJAX 請求。實現此功能很是簡單，只需由服務器發送一個響應標頭便可。
• CORS支持全部類型的HTTP請求.

• 服務器端對於CORS的支持，主要就是經過設置Access-Control-Allow-Origin來進行的。

  JSONP

• JSONP由回調函數和數據組成.JSONP只支持GET請求.JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據.
• JSONP經過動態<script>元素來使用,src屬性知道一個跨域URL,JSONP是有效的JavaScript代碼,瀏覽器能夠跨域請求JS文件.
• 優勢:簡單易用,能夠直接訪問響應文本,支持在瀏覽器和服務器之間雙向通訊.

• 缺點:1.JSONP是從其餘域加載代碼執行,存在不安全風險.2.很差肯定JSONP請求是否成敗.

  經過修改document.domain來跨子域

  反向代理

  使用window.name來進行跨域

  HTML5中新引進 window.postMessage方法來跨域傳送數據

  flash

  iframe

  服務器設置代理頁面

  圖像Ping

• 經過使用標籤,利用網頁能夠從任何網頁加載圖像原理.
• 圖像Ping經常使用於跟蹤用戶點擊頁面或動態廣告曝光次數.
• 2個缺點:1.只支持GET請求.2.沒法訪問服務器的響應文本.只能用於瀏覽器與服務器間的單項通訊.

var img = new Image();
img.onload = img.onerror = function (){
    alert("Done!");
};
img.src = "";

comet

• 一種更高級的ajax技術.ajax是頁面向服務器請求數據的技術.comet是服務器向頁面推送數據的技術.

SSE (Server-Sent Events) 服務器發送事件

Web Sockets

• Web Sockets的目標是在一個單獨的持久連接上提供全雙工,雙向通訊.