JSONP初学

最新推荐文章于 2020-09-16 20:31:01 发布

江呱呱

最新推荐文章于 2020-09-16 20:31:01 发布

阅读量157

点赞数

分类专栏： js ajax 文章标签： js jsonp ajax javascript

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108621130

版权

js 同时被 2 个专栏收录

76 篇文章 2 订阅

订阅专栏

ajax

10 篇文章 0 订阅

订阅专栏

JSONP初学

// 原理：利用script标签发送请求时无视同源策略并且请求回来之后还可以执行代码的特点来请求其它服务器上的数据
1.index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
    <script src="QF.js"></script>
    <script>

       
        // 同源策略：浏览器的一个安全策略 只要协议、域名、端口有任何一个不一致 那么认为不同源
        // 静态资源不受同源策略的限制
        // AJAX受同源策略的限制

        // QF.get("http://localhost/get.php", {username: 'wanlaowu', password: 1234567}, function() {
        //     console.log(1)
        // })

        // 1 JSONP
        // JSONP是一种跨域方式
        // 原理： 利用script标签 发送请求时无视同源策略 并且请求回来之后还可以执行代码的特点 来请求其它服务器上的数据
        // function a(data) {
        //     console.log(data)
        // }

        // 使用封装好的JSONP发送函数
        QF.jsonp("http://localhost/regist_jsonp.php", {username:'wanglaoda', password: 1234567, callbackName: "shuaige"}, function(data) {
            console.log(data)
        })
        // 2 CORS 跨域资源共享 主要是后端在做
           

    </script>

    <!-- <script src="http://localhost/regist_jsonp.php?username=wanglaosan&password=1234567"></script> -->
    <!-- 因为使用script标签发送请求 请求回来的内容 会被当做JS来执行 JSON格式的字符串就被当作JS代码了 -->
    <script>

    </script>
  
</body>

</html>

2.jsonp函数的封装

  jsonp(url, data, callback) {
        // 将data格式化为querystring
        var querystring = '';
        for (var i in data) {
            querystring += i + "=" + data[i] + "&";
        }
        querystring = querystring.slice(0, -1);
        // 1 创建script标签
        var script = document.createElement('script');

        // 2 设置script的src
        script.src = url + "?" + querystring;

        // 3 script只有在树上的时候才会发送请求 
        document.body.appendChild(script);

        // 4 将callback作为回调函数 注册到全局   全局要有一个函数来执行服务器返回的函数
        window[data.callbackName] = callback;
    }

3.服务器端代码

<?php
    header("content-type: text/html;charset=utf-8");
    // 1 接收前端传递过来的数据 
    $username = $_GET["username"];
    $password = $_GET["password"];
    $callbackName = $_GET["callbackName"];


    // 2 连接数据库
    mysql_connect("localhost", "root", "root");

    // 3 选择数据库
    mysql_select_db("gz2006");

    // 4 定义sql语句
    $sql = "INSERT INTO user VALUES('$username', '$password')";


    // 5 执行sql语句
    $result = mysql_query($sql);

    // 6 获取执行结果 
    if ($result) {
        echo  $callbackName."(".json_encode(array("error" => 0, "msg" => "注册成功")).")";
    } else {
        echo $callbackName.'('.json_encode(array("error" => 1, "msg" => "注册失败")).")";
    }
 
?>

江呱呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP初学

JSONP初学// 原理：利用script标签发送请求时无视同源策略并且请求回来之后还可以执行代码的特点来请求其它服务器上的数据1.index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录