A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 郝永亮 黑马粉丝团   /  2019-1-2 23:00  /  1426 人查看  /  9 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

同源:同一个域名下不同文件或文件夹之间的访问
跨域:不同域名下之间文件或文件夹之间的访问
通用的一个跨域策略叫jsonp,但不仅仅是jsop能实现跨域,使用iframe,window.name,src,json都可以实现跨域
cors toggle谷歌插件打开可以忽略跨域,仅仅测试使用.
跨域的两种方式
1. 客户端使用jsonp
2. 服务端使用("Access-Control-Allow-Origin: http://www.requesting-page.com")请求头。
但是以上两种都不完美,我们最好使用服务端代理

原理
jsonp:本质是利用了script标签的src属性具有跨域的特性,通过src请求服务器,服务器返回一个函数的调用,来执行本地的JS代码。相当于本地定义好了一个JS脚本,服务器返回一个脚本,只不过这个脚本是个调用脚本
本地JS
[AppleScript] 纯文本查看 复制代码
function a(){
	console.log(123);

}

服务器返回的js
[AppleScript] 纯文本查看 复制代码
a();

AJAX跨域实例
客户端代码
[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="跨域请求"/>
    <script src="jquery.min.js">
    </script>
    <script>
        function method(data){//12行
            console.log(data);
        }
    </script>
    <script>
        $('input').on('click',function () {
            $.ajax({
                url:"server.php",
                success:function(data){
                    console.log("方法的实际参数是"+data);
                    method(data);//调用12行方法
                },
                dataType:"jsonp"

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

服务端代码
[AppleScript] 纯文本查看 复制代码
$obj = "{'name':'张三'}";
$cb =  $_GET['callback'];
echo $cb."(".$obj.")";



9 个回复

正序浏览
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
张志辉 来自手机 中级黑马 2019-1-3 12:16:28
地板
很详细   
回复 使用道具 举报
5分面试题到手
回复 使用道具 举报
跨域 学到了
回复 使用道具 举报
Vicky韦 来自手机 黑马粉丝团 2019-1-3 09:45:35
藤椅
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马