跨域Ajax方法

VioletJack 發(fā)布于2019-07-01 11:13 / 3517人閱讀

摘要：原文來自跨域方法小博客經(jīng)典示例原生方式做有意義的事發(fā)生錯誤做有意義的事發(fā)生錯誤跨域方案方案前端請求頁面做有意義的事發(fā)生錯誤后端響應(yīng)頁面注意后端響應(yīng)是方案服務(wù)端添加響應(yīng)頭信息以下不支持允許所有來源訪問允許訪問的方式終極方案后端代理

原文來自 -- 跨域Ajax方法 – Eson小博客 uninote

經(jīng)典Ajax示例：

XMLHttpRequest原生方式

var request = new XMLHttpRequest();
request.open("POST", "index.php");
var data = "parameter1" + encodeURIComponent(parameter_one) + "¶meter2" + encodeURIComponent(parameter_two);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
    if (request.readyState===4) {
        if (request.status===200) {
            var ret = request.responseText;
            //做有意義的事

        } else {
            alert("發(fā)生錯誤：" + request.status);
        }
    }
}

jQuery

$.ajax({
    type:"POST",
    url:"index.php",
    dataType:"json",
    data:{
        "parameter1":parameter_one,
        "parameter2":parameter_two
    },
    success:function(ret){
        //做有意義的事

    },
    error:function(jqXHR){
        if (jqXHR.status!=200) {
            alert("發(fā)生錯誤：" + jqXHR.status);
        }
    }
});

跨域Ajax方案： 方案A：JSONP

前端請求頁面：

$.ajax({
    type:"POST",
    url:"http://127.0.0.1/test/Ajax_jsonp/service.php",
    dataType:"jsonp",
    jsonp:"jsonp",
    data:{
        "parameter1":parameter_one,
        "parameter2":parameter_two
    },
    success:function(ret){
        //做有意義的事
        alert(JSON.stringify(ret));
        console.log(ret);
    },
    error:function(jqXHR){
        if (jqXHR.status!=200) {
            alert("發(fā)生錯誤：" + jqXHR.status);
        }
    }
});

后端響應(yīng)頁面：

注意后端響應(yīng)是GET


方案B：XHR2服務(wù)端添加響應(yīng)頭信息（IE10以下不支持）
header("Access-Control-Allow-Origin:*");//允許所有來源訪問
header("Access-Control-Allow-Method:POST,GET");//允許訪問的方式
終極方案：后端代理
curl

GPU云服務(wù)器云服務(wù)器 ajax跨域 jquery ajax 跨域 ajax跨域訪問 php 跨域ajax

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/29985.html

相關(guān)文章

ajax跨域，這應(yīng)該是最全的解決方案了

摘要：關(guān)于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現(xiàn)原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過N個跨域相關(guān)的問題了，16年時也整理過一篇相關(guān)文章，但是感覺還是差了點什么，于是現(xiàn)在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0
20K前端大佬面試(關(guān)于如何回答ajax跨域問題)

摘要：在接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在我們學(xué)習工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問題，這里我把它總結(jié)記錄一下。在接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在我們學(xué)習工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問題，這里我把它總結(jié)記錄一下。關(guān)于跨域，有N種類型，現(xiàn)在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內(nèi)容...

Yangyang 2019-08-02 16:09 評論0 收藏0
Ajax跨域

摘要：發(fā)布自的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處。另外，該文章收納在的個人的知識整理倉庫，歡迎投稿跨域簡介常用跨域方法跨域簡介所謂跨域指的是請求從其他的域獲取數(shù)據(jù)或者傳輸數(shù)據(jù)所謂域同源，指的是兩個服務(wù)器資源的根的域名端口協(xié)議三者完全相同，只要發(fā)布自Kindem的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處。另外，該文章收納在Kindem的個人的 IT 知識整理倉庫，歡迎 Star、Fork、...

xiaotianyi 2019-08-23 11:36 評論0 收藏0
再也不學(xué)AJAX了?。ㄈ?em>跨域獲取資源 ② - JSONP & CORS

摘要：瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當我們需要使用跨域請求資源時，同源策略又會成為開發(fā)者的阻礙。我們之前提到過，如果想要繞過瀏覽器同源策略，實現(xiàn)使用技術(shù)跨域獲取資源，需要服務(wù)端和客戶端的協(xié)同合作。瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當我們需要使用AJAX跨域請求資源時，同源策略又會成為開發(fā)者的阻礙。在本文中，我們會簡單介紹需...

enda 2019-08-21 17:55 評論0 收藏0
慕課網(wǎng)_《Ajax跨域完全講解》學(xué)習總結(jié)

摘要：時間年月日星期三說明本文部分內(nèi)容均來自慕課網(wǎng)。當預(yù)檢請求通過的時候，才發(fā)送真正的請求。時間：2018年04月18日星期三說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：https://www.imooc.com教學(xué)源碼：https://github.com/zccodere/s...學(xué)習源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...

fredshare 2019-08-15 15:34 評論0 收藏0