JSONP的跨域

2017-11-14 本文已影响0人 Farewell_V587

基础

大家都知道form表单有两种方式，post和get。

1.get不安全，会在链接处显示用户输入的信息数据，Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接
2.Get传输的数据量小，这主要是因为受URL长度限制
因为这样的特性，我们通常用get方式获取数据，用post方式传递数据

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

get

我将通过一个查验快递包裹的小例子说明
当我们苦等快递的时候，就会输入快递单号，然后查验出快递的状态和位置，今天就做一个简单版的查快递，效果如下：

image.png

首先开始完成服务端的代码，创建一个check.php文件；
先将用户的数据写入数组。

/**
* 快递包裹查询API
* 传送方式：get
* 参数：kuaidi_id 需要查询的快递单号
* 参数：callback 回调函数名
*/

<?php
    $kuaidi['1000'] = array(
    'info' => '王小三的快递',
    'status' => '配送中',
);
$kuaidi['1001'] = array(
    'info' => '王三的快递',
    'status' => '配送中',
);
$kuaidi['1002'] = array(
    'info' => '张三的快递',
    'status' => '已配送',
);
    
    //如果前台传送了快递单号就执行查询
if(!empty($_GET['kuaidi_id'])){
    //如果没传回调函数名
    if(empty($_GET['callback'])){
        //直接输出json串
        echo "var jsonstr=\"".json_encode($kuaidi[$_GET['kuaidi_id']])."\"";
    }else {
        //如果有回调函数，输出JSONP
        echo $_GET['callback']."(".json_encode($kuaidi[$_GET['kuaidi_id']]).")";
    }
}
?>

写完服务端代码，开始写前台代码,构建好界面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="" method="get">
        <input type="text" name="thing_id" id="thing_id"/>
        <input type="button" name="btn" value="提交" id="btn"/>
    </form>
    <div id="div"></div>
</body>
</html>

然后写入js,写在body标签后面,首先要获取我们需要的变量

    var btn = document.getElementById("btn");
    var thing_id = document.getElementById("thing_id");

之后写入btn的点击事件，通过点击btn触发，动态生成script标签，同时通过src链接通过get的特性从服务端获取我们需要的数据

    btn.onclick =function(){
        var script = document.createElement("script");
        script.src="快递物流.php?kuaidi_id="+thing_id.value+"&callback=myFunc";
        document.body.append(script);
    }

因为使用了回调函数，最后通过函数得到从服务端获得的参数，将服务端的信息输出到页面上

    function myFunc(jsonstr){
        var div =document.getElementById("div");
        div.innerHTML = jsonstr.info+" "+jsonstr.status;
    }

这样一个简化版的查快递就完成了！

JSONP的跨域

基础

猜你喜欢

热点阅读