zoukankan      html  css  js  c++  java
  • jsonp原理

    借助script标签发送跨域请求,只支持get方法

    客户端:client.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>JSONP 客户端</title>
    </head>
    <body>
      <script>
        function jsonp (url, params, callback) {
          var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)
    
          if (typeof params === 'object') {
            var tempArr = []
            for (var key in params) {
              var value = params[key]
              tempArr.push(key + '=' + value)
            }
            params = tempArr.join('&')
          }
    
          var script = document.createElement('script')
          script.src = url + '?' + params + '&callback=' + funcName
          document.body.appendChild(script)
    
          window[funcName] = function (data) {
            callback(data)
    
            delete window[funcName]
            document.body.removeChild(script)
          }
        }
        jsonp('http://localhost/jsonp/server.php', { id: 1 }, function (res) {
          console.log(res)
        })
    
        jsonp('http://localhost/jsonp/server.php', { id: 1 }, function (res) {
          console.log(res)
        })
      </script>
    </body>
    </html>

    服务器:server.php

    <?php
    $data = array(
        'id' => 1,
        'name' => 'zs'
    );
    if (empty($_GET['callback'])) {
      header('Content-Type: application/json');
      echo json_encode($data);
      exit();
    }
    // 如果客户端采用的是 script 标记对我发送的请求
    // 一定要返回一段 JavaScript
    header('Content-Type: application/javascript');
    $result = json_encode($data);
    $callback_name = $_GET['callback'];
    echo "typeof {$callback_name} === 'function' && {$callback_name}({$result})";
  • 相关阅读:
    exec系列函数和system函数
    fork函数相关总结
    文件的内核结构file和dup实现重定向
    进程基本概述
    fcntl 函数与文件锁
    文件的属性
    目录的操作
    文件的读取写入
    文件的打开关闭
    浅谈原始套接字 SOCK_RAW 的内幕及其应用(port scan, packet sniffer, syn flood, icmp flood)
  • 原文地址:https://www.cnblogs.com/chuanzi/p/10516927.html
Copyright © 2011-2022 走看看