JSONP原理及使用

前端之家收集整理的这篇文章主要介绍了JSONP原理及使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。首先抛出浏览器同源策略这个概念,为了保证用户访问的安全,现代浏览器使用了同源策略,即不允许访问非同源的页面.

JSONP就是用来解决跨域请求问题的,那么具体是怎么实现的呢?

ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。

JSONP具体实现

1.首先看下ajax中如果进行跨域请求会如何。
前端代码在域www.newton.com下面,使用ajax发送了一个跨域的get请求

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
<!DOCTYPE html> <html> head> title>GoJSONP</title> head> body> script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } script> "text/javascript" src="jquery-1.8.3.min.js"> "text/javascript"> $(document).ready(function(){ $.ajax({ type : "get",async: false,url : "http://www.newton_xt.com/student.PHP?id=1",type: "json",success : (data) { jsonhandle(data); } }); }); html>

后端PHP代码放在域www.newton_xt.com下,简单的输出一段json格式的数据

  
  
  • 1
  • 2
  • 3
  • 4
    • 1
    • 2
    • 3
    • 4
    jsonhandle({ "age" : 15,"name": "John",})

    当访问前端代码http://www.newton.com/gojsonp/index.html时 chrome报以下错误

    提示了不同源的URL禁止访问

    2.下面使用JSONP,将前端代码中的ajax请求去掉,添加了一个script标签标签的src指向了另一个域www.newton_xt.com下的remote.js脚本

      
      
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    "http://www.newton_xt.com/remote.js"> 这里调用了跨域的remote.js脚本,remote.js代码如下:

     也就是这段远程的js代码执行了上面定义的函数,弹出了提示

    3.将前端代码再进行修改代码如下:

      
      
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    (){ var url = "http://www.newton_xt.com/student.PHP?id=1&callback=jsonhandle"; var obj = $('<script><\/script>'); obj.attr("src",url); $("body").append(obj); }); 这里动态的添加了一个script标签,src指向跨域的一个PHP脚本,并且将上面的js函数名作为callback参数传入,那么我们看下PHP代码怎么写的:

      
      
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    <?PHP $data = array( 'age' => 20,0); Box-sizing: border-Box;">'name' => '张三',); $callback = $_GET['callback']; echo $callback."(".json_encode($data).")"; return;

    PHP代码返回了一段JS语句,即

    "张三",85); font-family:'microsoft yahei'; font-size:14px; line-height:35px"> 此时访问页面时,动态添加了一个script标签,src指向PHP脚本,执行返回的JS代码,成功弹出提示框。
    所以JSONP将访问跨域请求变成了执行远程JS代码,服务端不再返回JSON格式的数据,而是返回了一段将JSON数据作为传入参数的函数执行代码

    4.最后jQuery提供了方便使用JSONP的方式,代码如下:

    "jsonp",jsonp:"callback",//请求PHP的参数名 jsonpCallback: "jsonhandle",0); Box-sizing: border-Box;">//要执行的回调函数 success : (data) { alert("name:" + data.name); } }); }); html>
    原文链接:https://www.f2er.com/json/289006.html

    猜你在找的Json相关文章