成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

JSONP跨域請(qǐng)求學(xué)習(xí)

LittleLiByte / 3083人閱讀

摘要：對(duì)于一直是知半解，今天利用周末整理了一下維基百科的解釋我的理解是前端編寫(xiě)自己的函數(shù)，用標(biāo)簽發(fā)送請(qǐng)求把函數(shù)名字帶上服務(wù)器端接送到請(qǐng)求后獲取前端發(fā)送請(qǐng)求時(shí)的，添加上自己的數(shù)據(jù)返回后。

對(duì)于JSONP一直是知半解，今天利用周末整理了一下
維基百科的解釋?zhuān)?/p> 

JSONP (JSON with Padding or JSON-P[1]) is a javascript pattern to request data by loading a

后端代碼

//用node編寫(xiě)一個(gè)簡(jiǎn)單的服務(wù)器
const http = require("http");
const urlModule = require("url");
const server = http.createServer();
server.on("request", function (req, res) {
    //urlModule.parse(req.url.url)的請(qǐng)求 就是這個(gè)對(duì)象
    // {
    //   protocol: null,
    //   slashes: null,
    //   auth: null,
    //   host: null,
    //   port: null,
    //   hostname: null,
    //   hash: null,
    //   search: "?callback=getremotedata",
    //   query: "callback=getremotedata",
    //   pathname: "/",
    //   path: "/?callback=getremotedata",
    //   href: "/?callback=getremotedata" }
    // 對(duì)象結(jié)構(gòu)賦值得到query是一個(gè)對(duì)象
    const {pathname: url, query} = urlModule.parse(req.url, true)
    if (url === "/") {
        var data = {
            name: "大毛",
            age: 18,
            gender: "未知"
        };
        // 解析query的請(qǐng)求得到前端發(fā)送的函數(shù)名稱(chēng)，加上括號(hào)調(diào)用此函數(shù)，函數(shù)里加實(shí)參servedata返回
        var scripteStr = `${query.callback}(${JSON.stringify(data)})`
        console.log(scripteStr)
        res.end(scripteStr)
    } else {
        res.end("404")
    }
});
server.listen("3999", function () {
    console.log("server is running 3999")
})

這樣前端發(fā)送請(qǐng)求，無(wú)論回調(diào)是什么，后端都會(huì)返回回調(diào)加data數(shù)據(jù)，就實(shí)現(xiàn)了跨域請(qǐng)求啦。

第一寫(xiě)感覺(jué)有點(diǎn)語(yǔ)言不清，大家把代碼自己敲一遍就懂了

自學(xué)前端3個(gè)月，想找一個(gè)基礎(chǔ)的前端工作

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/99344.html

相關(guān)文章

  • AJAX的學(xué)習(xí)筆記

    摘要：的學(xué)習(xí)筆記是異步和的縮寫(xiě)，它的作用是執(zhí)行異步的網(wǎng)絡(luò)請(qǐng)求。這就是一個(gè)格式的，向這個(gè)地址請(qǐng)求，將得到一個(gè)回調(diào)函數(shù)，執(zhí)行就得到數(shù)據(jù)。 AJAX的學(xué)習(xí)筆記 AJAX是異步JavaScript和XML的縮寫(xiě)，它的作用是執(zhí)行異步的網(wǎng)絡(luò)請(qǐng)求。因?yàn)镴S是線性同步，如果需要用戶向?yàn)g覽器發(fā)送一個(gè)請(qǐng)求，那么就需要等瀏覽器接收到了結(jié)果才能繼續(xù)運(yùn)行，如果發(fā)送到接受的時(shí)間太長(zhǎng)，瀏覽器就會(huì)很長(zhǎng)時(shí)間處于假死狀態(tài)，這樣...

    RobinTang 評(píng)論0 收藏0

  • AJAX學(xué)習(xí)筆記2：XHR實(shí)現(xiàn)跨域資源共享（CORS）以及和JSONP的對(duì)比

    摘要：補(bǔ)充同源策略還應(yīng)該對(duì)一些特殊情況做處理，比如限制協(xié)議下腳本的訪問(wèn)權(quán)限。注意，該請(qǐng)求的查詢字符串有一個(gè)參數(shù)，用來(lái)指定回調(diào)函數(shù)的名字，這對(duì)于是必需的。 1 前言： 首先對(duì)參考文章作者表示感謝，你們的經(jīng)驗(yàn)總結(jié)給我們這些新手提供了太多資源。本文致力于解決AJAX的CORS問(wèn)題，我在邏輯上進(jìn)行了梳理：首先，系統(tǒng)的總結(jié)了CORS問(wèn)題的起源---同源策略；其次，介紹JSONP這種僅能支持GET請(qǐng)求的...

    QiuyueZhong 評(píng)論0 收藏0

  • AJAX學(xué)習(xí)筆記2：XHR實(shí)現(xiàn)跨域資源共享（CORS）以及和JSONP的對(duì)比

    摘要：補(bǔ)充同源策略還應(yīng)該對(duì)一些特殊情況做處理，比如限制協(xié)議下腳本的訪問(wèn)權(quán)限。注意，該請(qǐng)求的查詢字符串有一個(gè)參數(shù)，用來(lái)指定回調(diào)函數(shù)的名字，這對(duì)于是必需的。 1 前言： 首先對(duì)參考文章作者表示感謝，你們的經(jīng)驗(yàn)總結(jié)給我們這些新手提供了太多資源。本文致力于解決AJAX的CORS問(wèn)題，我在邏輯上進(jìn)行了梳理：首先，系統(tǒng)的總結(jié)了CORS問(wèn)題的起源---同源策略；其次，介紹JSONP這種僅能支持GET請(qǐng)求的...

    makeFoxPlay 評(píng)論0 收藏0

  • jsonp跨域獲取數(shù)據(jù)實(shí)現(xiàn)百度搜索

    摘要：同源策略做了很?chē)?yán)格的限制，但是在實(shí)際的場(chǎng)景中，又確實(shí)有很多地方需要突破同源策略的限制，也就是我們常說(shuō)的跨域。使用跨域由于同源策略，一般來(lái)說(shuō)位于的網(wǎng)頁(yè)無(wú)法與不是的服務(wù)器溝通，而的元素是一個(gè)例外。 本菜雞最近在寫(xiě)某個(gè)頁(yè)面請(qǐng)求數(shù)據(jù)時(shí)，報(bào)了如下的錯(cuò)誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    Tikitoo 評(píng)論0 收藏0

  • jsonp跨域獲取數(shù)據(jù)實(shí)現(xiàn)百度搜索

    摘要：同源策略做了很?chē)?yán)格的限制，但是在實(shí)際的場(chǎng)景中，又確實(shí)有很多地方需要突破同源策略的限制，也就是我們常說(shuō)的跨域。使用跨域由于同源策略，一般來(lái)說(shuō)位于的網(wǎng)頁(yè)無(wú)法與不是的服務(wù)器溝通，而的元素是一個(gè)例外。 本菜雞最近在寫(xiě)某個(gè)頁(yè)面請(qǐng)求數(shù)據(jù)時(shí)，報(bào)了如下的錯(cuò)誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    gggggggbong 評(píng)論0 收藏0

  • jsonp跨域獲取數(shù)據(jù)實(shí)現(xiàn)百度搜索

    摘要：同源策略做了很?chē)?yán)格的限制，但是在實(shí)際的場(chǎng)景中，又確實(shí)有很多地方需要突破同源策略的限制，也就是我們常說(shuō)的跨域。使用跨域由于同源策略，一般來(lái)說(shuō)位于的網(wǎng)頁(yè)無(wú)法與不是的服務(wù)器溝通，而的元素是一個(gè)例外。 本菜雞最近在寫(xiě)某個(gè)頁(yè)面請(qǐng)求數(shù)據(jù)時(shí)，報(bào)了如下的錯(cuò)誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    lemanli 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<