JSONP初学

JSONP初学

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


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>

    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.服务器端代码


    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" => "注册失败")).")";
    }
 
?>

你可能感兴趣的:(js,ajax,js,jsonp,ajax,javascript)