久久久日韩精品一区二区三区,看全色黄大色黄大片视频,久久人人爽人人爽人人片av麻烦

腳本之家服務器常用軟件

快捷導航

借助node實戰(zhàn)JSONP跨域?qū)嵗?/h1>

更新時間：2017年03月30日 11:04:47 作者：猴子猿

本篇文章主要介紹了借助node實戰(zhàn)JSONP跨域?qū)嵗?，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、前言：

瀏覽器安全是基于同源策略的。所謂同源策略就是三相同：

1、協(xié)議相同；

2、域名相同；

3、端口相同。

但，凡事都是有利弊，同源策略也導致了我們想用AJAX跨域請求，但NO?。榱艘?guī)避這種限制，其中有一方法就是JSONP。

JSONP的基本思想：就是通過<script>的src，向服務器請求數(shù)據(jù)，且這不受同源策略限制（img和iframe的src也是如此）；然后服務器將相應的數(shù)據(jù)放入指定的函數(shù)回調(diào)名中，返回給前端。

這，就實現(xiàn)了跨域請求信息。

如下圖所示：

了解了JSONP的大體思路，接下來，我們借助node來搭建一個簡單的服務器，與前端一步步實現(xiàn)JSONP帶來的跨域請求之旅吧。

二、搭建node server：

因為前端要實現(xiàn)跨域請求，需要與后臺配合。在這里，我們使用是node來模擬后臺服務器。

So，你得對node有一定認識以及開發(fā)環(huán)境。

接下來，我們就編寫一個簡單的node服務器吧。

首先，我們需要引入http模塊，因為是基于http請求的嘛。然后就是用其創(chuàng)建一個http服務器，如監(jiān)聽的是8080端口。

如下：

'use strict';
//通過require將http庫包含到程序中
var http = require('http');
//創(chuàng)建新的HTTP服務器
var server = http.createServer();
//通過request事件來響應request請求
server.on('request',function(req, res){
  res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
  res.end('Hell World\n');  
});
//監(jiān)聽8080端口
server.listen('8080');
//用于提示我們服務器啟動成功
console.log('Server running!');

接著，因為我們要對使用JSONP的請求與正常請求區(qū)分，所以，后臺得判斷處理—通過解析url字符串，假設這里我們是通過帶有'/jsonp'的路徑名來判斷。

如下：

'use strict';
//通過require將http庫包含到程序中
var http = require('http');
//引入url模塊解析url字符串
var url = require('url');
//創(chuàng)建新的HTTP服務器
var server = http.createServer();
//通過request事件來響應request請求
server.on('request',function(req, res){
  var urlPath = url.parse(req.url).pathname;
  //如果urlPath為'jsonp'，就認定該請求為攜帶jsonp方法的http請求
  if(urlPath === '/jsonp'){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
    var data = {
      "name": "Monkey"
    };
    data = JSON.stringify(data);
    //假設我們定義的回調(diào)函數(shù)名為test
    var callback = 'test'+'('+data+');';
    res.end(callback);
  }
  else{
    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
    res.end('Hell World\n');  
  }  
});
//監(jiān)聽8080端口
server.listen('8080');
//用于提示我們服務器啟動成功
console.log('Server running!');

在上面的代碼中19行，有個缺點就是，我們將回調(diào)函數(shù)的名字規(guī)定死了，當我們判斷請求為JSONP時，只能往前端傳入test，這樣顯然不合理。

所以，我們得借助于querystring 這個模塊，來處理query字符串。

如下：

'use strict';
//通過require將http庫包含到程序中
var http = require('http');
//引入url模塊解析url字符串
var url = require('url');
//引入querystring模塊處理query字符串
var querystring = require('querystring');
//創(chuàng)建新的HTTP服務器
var server = http.createServer();
//通過request事件來響應request請求
server.on('request',function(req, res){
  var urlPath = url.parse(req.url).pathname;
  var qs = querystring.parse(req.url.split('?')[1]);
  if(urlPath === '/jsonp' && qs.callback){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
    var data = {
      "name": "Monkey"
    };
    data = JSON.stringify(data);
    var callback = qs.callback+'('+data+');';
    res.end(callback);
  }
  else{
    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
    res.end('Hell World\n');  
  }  
});
//監(jiān)聽8080端口
server.listen('8080');
//用于提示我們服務器啟動成功
console.log('Server running!');

這樣，我們就將一個我們需要的服務器搭建好了。

服務器有了，接下來，就是前端跨域請求了。

三、JSONP跨域請求之旅:

因為我們是借助于<script>標簽中的src來實現(xiàn)請求的，在服務器中已經(jīng)約定，在請求后加入'/jsonp?callback'，就將其認定為JSONP請求，且callback后帶入一個js中已有的全局方法。

所以，代碼可以如下：

<!DOCTYPE html>
  <head>
    <title>jsonp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      function test(data){
        alert(data.name);
      };
    </script>
    <script src="http://127.0.0.1:8080/jsonp?callback=test"></script>
  </body>
</html>

好了，前后端都編碼完畢，接下來，我們就看看效果吧。

首先啟動node服務器，如下：

注：我將我們搭建的服務器server.js放在D:/JSONP中

接下來，運行上面所寫的html代碼，可以發(fā)現(xiàn)請求成功，并執(zhí)行test方法。

但，我們一進來，就得跨域請求，是否有點不妥，所以可以動態(tài)創(chuàng)建script元素，并指定相應請求，任由我們所為。

如下：

//動態(tài)創(chuàng)建script標簽，并請求
function addScriptTag(src){
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.src = src;
  document.body.appendChild(script);
};
//如：在onload后，跨域請求
window.onload = function(){
  addScriptTag('http://127.0.0.1:8080/jsonp?callback=monkey');
};
//回調(diào)的方法,且必須為全局方法，不然會報錯
function monkey(data){
  alert(data);
};

JSONP還需要注意的就是，回調(diào)函數(shù)的方法必須是全局的，不然會報錯的，因為是通過script的src請求的嘛，請求成功后立即執(zhí)行。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: