跨域

同源策略

1、同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议、域名和端口都相同，只要其中之一不相同就是跨域

2、同源策略主要为了保证浏览器的安全性

3、在同源策略下，浏览器不允许Ajax跨域获取服务器数据

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文件

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

?>
script标签的async属性

script标签里面的async属性表示异步加载资源，默认情况下是同步加载

这种方式存在的两个主要的问题：
1、必须保证加载的顺序
2、不方便通过程序传递参数

动态创建script

动态创建script标签发出去的请求是异步请求,而且不能修改;

服务器响应的内容是【函数调用】 foo(实参)

php代码

<?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>
posted @   Jason_lincoln  阅读(118)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示