跨域Ajax方法

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

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

原文來(lái)自 -- 跨域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ā)生錯(cuò)誤：" + 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ā)生錯(cuò)誤：" + jqXHR.status);
        }
    }
});

跨域Ajax方案： 方案A：JSONP

前端請(qǐng)求頁(yè)面：

$.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ā)生錯(cuò)誤：" + jqXHR.status);
        }
    }
});

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

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


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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/29985.html

相關(guān)文章

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

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

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

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

Yangyang 2019-08-02 16:09 評(píng)論0 收藏0
Ajax跨域

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

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

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

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

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

fredshare 2019-08-15 15:34 評(píng)論0 收藏0