【js筆記】AJAX——三種方法解決跨域問題（Access-Control-Allow-Origin）

最近項目中用到眾多ajax請求，隨之而來的就是要解決ajax的跨域問題。就像醬紫↓

 

然后好一頓百度，百到的基本就是三種解決方法，一種就是使用代理，這個我沒太明白是怎么個意思，只知道好像不是前端的事情；另一種是，扔給后台解決，

只需要在服務器端頭部加上下面兩句代碼：

　　header( "Access-Control-Allow-Origin:*" );

　　header( "Access-Control-Allow-Methods:POST,GET" );

然鵝第三方並不理會我的要求，不給我加，好吧/(ㄒoㄒ)/~~

然后又一頓百度，百到可以用jsonp解決，具體方法步驟如下：

(function($){
$.ajax({
        type: "post",
        url: "http://localhost:8022/test.json",
        data: $.toJSON(userData),
        dataType: 'jsonp',
        jsonpCallback:'callback',
        success: function(result) {
            alert(result);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        }
    });
})(jQuery)

這里的error處理函數中用了這么多alert也是為了更精確的定位問題出在哪里，XMLHttpRequest, textStatus, errorThrown三個參數的含義參考以下：

屬性	說明
readyState	表示XMLHttpRequest對象的狀態：0：未初始化。對象已創建，未調用open； 1：open方法成功調用，但Sendf方法未調用； 2：send方法已經調用，尚未開始接受數據； 3：正在接受數據。Http響應頭信息已經接受，但尚未接收完成； 4：完成，即響應數據接受完成。
Onreadystatechange	請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上注冊的javascript函數）。
responseText	服務器響應的文本內容
responseXML	服務器響應的XML內容對應的DOM對象
Status	服務器返回的http狀態碼。200表示“成功”，404表示“未找到”，500表示“服務器內部錯誤”等。
statusText	服務器返回狀態的文本信息。

 

 

 

 

方法	說明
Open(string method,string url,boolean asynch, String username,string password)	指定和服務器端交互的HTTP方法，URL地址，即其他請求信息； Method:表示http請求方法，一般使用"GET","POST". url：表示請求的服務器的地址； asynch：表示是否采用異步方法，true為異步，false為同步； 后邊兩個可以不指定，username和password分別表示用戶名和密碼，提供http認證機制需要的用戶名和密碼。
Send(content)	向服務器發出請求，如果采用異步方式，該方法會立即返回。 content可以指定為null表示不發送數據，其內容可以是DOM對象，輸入流或字符串。
SetRequestHeader(String header,String Value)	設置HTTP請求中的指定頭部header的值為value. 此方法需在open方法以后調用，一般在post方式中使用。
getAllResponseHeaders()	返回包含Http的所有響應頭信息，其中相應頭包括Content-length,date,uri等內容。 返回值是一個字符串，包含所有頭信息，其中每個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！
getResponseHeader(String header)	返回HTTP響應頭中指定的鍵名header對應的值
Abort()	停止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。

 

 

這個時候你應該是會得到三個結果，200,4，parsererror。200和4表示正常，沒毛病，parsererror是個什么，又是一頓百度。

然后發現，json格式和jsonp格式是有區別的，區別如下：

 

json

{
        "id": "1",
        "title": "【GXZB-2003009】第三采油廠2017年注水系統儲水罐隔氧裝置修理修繕技術服務",
        "date": "2016-05-06",
        "state": "1"
    }

jsonp

callback({
        "id": "1",
        "title": "【GXZB-2003009】第三采油廠2017年注水系統儲水罐隔氧裝置修理修繕技術服務",
        "date": "2016-05-06",
        "state": "1"
    });

是的，jsonp比json多包了一層callback();並且，分號不能少！！！

然后，這個問題就這么解決啦~撒花~