初始跨域

本文详细介绍了浏览器的同源策略,解释了其对于安全的重要性,并提供了多种跨域请求数据的方法,包括JSONP、使用iframe和window对象的技巧、第三方插件以及利用script标签的src属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

同源策略:
1.是指浏览器的一种安全策略,所谓的同源是指请求的url地址中的协议、域名、端口都相同只要其中之一不相同就是跨域。
2.同源策略主要是为了保证浏览器的安全性
3.在同源策略下,浏览器不允许ajax跨域获取服务器数据
但是跨域请求只能使用个体请求方式,目前提供get跨域请求
为了解决ajax不能跨域的问题,我们有如下方法:
1.jsonp:实现ajax跨域请求数据
2.document.hash+iframe
3.window.name+iframe
4.window.postMessage
5.第三方插件解决跨域flash
跨域请求数据的方法
静态的script标签的src属性进行跨域请求数据

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="http://tom.com/data.php" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   console.log(data);
   console.log(data.name);
   console.log(data.pwd);
  </script>
 </head>
 <body>
 </body>
</html>

php代码

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

动态创建的script标签的src属性进行跨域请求数据

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" async>
   var script=document.createElement('script');
   script.src='http://tom.com/data.php';
   var head=document.getElementsByTagName('head')[0];
   head.appendChild(script);
   function foo(data){
    console.log(data);
   }
  </script>
 </head>
 <body>
 </body>
</html>

php代码

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

jsonp与jQuery的使用
html页面

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $('#btn').click(function(){
     $.ajax({
      type:"get",
      url:"http://tom.com/jsonp.php",
      dataType:'jsonp',  // 实现跨域请求
      //callback=jQuery21109469809573287793_1564657482777({"username":"lisi","pwd":"123"})
      jsonp:'cb',// 
      // jsonp属性的作用就是自定义参数名字(callback=abc),这里的名字cb指的是等号的前面的
      // 后端根据这个键 获取方法名, jquery的默认参数名称是callback
      jsonpCallback:'abc',//  改变默认的回调函数的名称 ==>abc
      success:function(data){
       console.log(data);
      },
      error:function(){
       console.log('error');
      }
    })
    })
   })
  </script>
 </head>
 <body>
  <input type="button" value="点击" id="btn" />
 </body>
</html>

php代码

<?php
 $arr=array("username"=>"lisi","pwd"=>"123");
 $cb=$_GET['cb'];
 echo $cb.'('.json_encode($arr).')';
?>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值