跨域

時間 2019-11-30

原文原文鏈接

同源策略

一、同源策略是瀏覽器的一種安全策略，所謂同源指的是請求URL地址中的協議、域名和端口都相同，只要其中之一不相同就是跨域javascript

二、同源策略主要爲了保證瀏覽器的安全性php

三、在同源策略下，瀏覽器不容許Ajax跨域獲取服務器數據css

script跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>script跨域</title>
    <script src="http://tom.com/data.php"></script>
    <script type="text/javascript">
        console.log(data.username); //zhangsan
        console.log(data.password); //12456
    </script>
</head>
<body>

</body>
</html>

php文件html

<?php
    $arr = array("username"=>"zhangsan", "password"=>"123456");
    echo "var data =".json_encode($arr);

?>

script標籤的async屬性

script標籤裏面的async屬性表示異步加載資源，默認狀況下是同步加載java

這種方式存在的兩個主要的問題：

一、必須保證加載的順序
二、不方便經過程序傳遞參數

動態建立script

動態建立script標籤發出去的請求是異步請求,並且不能修改;jquery

服務器響應的內容是【函數調用】 foo(實參)ajax

php代碼json

<?php
    $arr = array("username"=>"zhangsan", "password"=>"123456");
    $cb = $_GET['_cb'];
    $username = $_GET['username'];
    $pwd = $_GET['password'];
    echo $cb.'('.'{"username":"'.$username.'", "password":"'.$pwd.'"}'.')';
?>

js代碼跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        /*
        hello就是回調函數
        這就是jsonp的本質：動態建立script標籤，而後經過它的src屬性發送跨域請求，而後服務器端響應的數據格式爲【函數調用（foo(實參)）】，因此在發送請求以前必須先聲明一個函數，而且函數的名字與參數中傳遞的名字要一致。這裏聲明的函數是由服務器響應的內容（實際就是一段js代碼-函數調用）來調用
        */
        function hello(data){
            console.log(data);
        }
        var script = document.createElement('script');
        script.src = 'http://tom.com/data.php?_cb=hello&username=zhangsan&password=123';
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(script);

        
    </script>
</head>
<body>
    
</body>
</html>

jquery使用jsonp

php代碼瀏覽器

<?php
      $arr = array("username"=>"zhangsan", "password"=>"123456");
      $cb = $_GET['cb'];
      echo $cb.'('.json_encode($arr).')';
  
?>

js代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
    <script src="jquery/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.ajax({
                    type: "get",
                    url: "http://tom.com/jsonp.php",
                    dataType: "jsonp",
                    jsonp: 'cb',  //jsonp屬性的做用就是自定義參數名字(默認是callback), callback=abc 至關於等號前面
                    jsonpCallback: "abc", //自定義回調函數的名字, callback=abc, 至關於等號後面
                    data: {},
                    success: function (data) {
                        alert(data.username);
                    },
                    error: function (data) {
                        console.log(data);

                    }
                })
            });
        })
    </script>
</head>
<body>
    <input type="button" value="點擊" id="btn">
</body>
</html>

基於百度接口的智能搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .container{
            background-color: antiquewhite;
            width:400px;
            height: 300px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div class="container">
    <input type="text" id="keyword">
    <input type="button" value="搜索">
    <div id="msg"></div>
</div>

</body>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        $("#keyword").keyup(function () {
            var kw = $(this).val();
            $.ajax({
                url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                data: {wd:kw},
                jsonp : 'cb',
                dataType: 'jsonp',
                success: function (data) {
                    var msg = data.s;
                    var tag = '<ul>';
                    $.each(msg, function (i ,e) {
                        tag += "<li>"+ e+"</li>";
                    });
                    tag += "</ul>";
                    $("#msg").html(tag);
                }


            })
        });
    })
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。