码迷,mamicode.com
首页 > Web开发 > 详细

原生js实现简单JSONP

时间:2018-02-05 20:04:28      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:目的   java   bsp   节点   属性   type   call   字符串   ica   

JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输。

用原生JS实现JSONP非常简单,无非几点:

1)定义一个函数,用于处理接收到的跨域数据。

2)生成一个dom节点(script节点),然后src属性上面记入发送的目的URL以及参数。

3)在跨域服务器端接收GET请求,返回数据(返回之前定义函数的调用的字符串)。

4)删除之前生成的script节点。

演示如下:

1)首先需要一个是同源服务器,一个跨域访问的服务器。

最简单的方式就是使用apache配置两个虚拟主机。

//浏览器器端
<script type="text/javascript">
    //定义一个发送Jsonp请求的函数
    function jsonp(obj) {
        //定义一个处理Jsonp返回数据的回调函数
	window["callback"] = function(object) {
            obj.success(JSON.parse(object));
        }
        var script = document.createElement("script");
        //组合请求URL
        script.src = obj.url + "?fn=callback";
        for(key in obj.data){
            script.src +="&" + key + "=" + obj.data[key];
        }
        //将创建的新节点添加到BOM树上
        document.getElementsByTagName("body")[0].appendChild(script);	
    }
</script>

<script type="text/javascript">
    //调用Jsonp函数发送jsonp请求
    jsonp({
        url:"http://localhost/index.php",
        data:{
            name:"小明",
        },
        success:function(obj) {
            alert("性别" + obj.sex);
        }
    });
</script>

  

 

//服务器端
<?php
header(‘Content-Type: application/json; charset=UTF-8‘);

$fn = $_GET["fn"];

$name = $_GET["name"];
$result = array();
if($name == "小明"){
$result["sex"] = "男";
} else if($name == "小红"){
$result["sex"] = "女";
}else {
$result["sex"] = "未知";
}

echo $fn . "(‘" . json_encode($result) ."‘)";

  

 

原生js实现简单JSONP

标签:目的   java   bsp   节点   属性   type   call   字符串   ica   

原文地址:https://www.cnblogs.com/cryRoom/p/8418961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!