JavaScript异步编程——04-同源和跨域

同源和跨域

同源

同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。

跨域问题的解决方案

从我自己的网站访问别人网站的内容,就叫跨域。

出于安全性考虑,浏览器不允许ajax跨域获取数据。

  • iframe:处于安全性考虑,浏览器的开发厂商已经禁止了这种方式。

  • JSONP:script 标签的 src 属性传递数据。

JSONP

JSONP(JSON with Padding):带补丁的 json,本质是利用了 <script src=""></script>标签具有可跨域的特性,由服务端返回一个预先定义好的JS函数的调用,并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。

我们知道, html标签的 src 属性是支持跨域的:

复制代码
     <img src="http://img.smyhvae.com/2016040101.jpg" alt="">

jsonp 就是利用这个特性实现的跨域,但用的是 script 标签。如下:

复制代码
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
 ​
 <!-- jsonp 就是 利用 src,实现的跨域 用的是 script标签 -->
 <script type="text/javascript"  src='http://192.168.141.137/2018-02-28/myData.php'></script>
 </body>
 </html>
 ​

上方那一行的代码,意思是:刷新A服务器上的index页面后,会去请求 B 服务器上的 myData.php 这个页面。而且请求的方式是 get 请求。

但是 B 服务器上的页面不是你想请求就可以请求的,大家一起配合才可以。

具体实现步骤:

需要首先声明的是,jsonp 只能通过 GET 方式进行请求。

(1)A客户端的代码:

复制代码
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
 ​
 </body>
 </html>
 <script type="text/javascript">
 ​
     // 定义 eatFood()方法
     function fn(data) {
         console.log('我被调用了哦');
         console.log(data);
     }
 </script>
 ​
 <!-- 使用 script标签 发送了 get请求 去到了一个 php页面 -->
 <script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>

我们来分析上方代码中的最后一行的那个url:A 客户端请求的是 B服务器上的 01.php页面。url里有个callback1=fn,意思是:callback1是A和B 之间的约定,约定后,将执行方法 fn。

其实,fn方法已经在最后一行代码中执行了。只不过,fn方法里的data数据,是从 B 服务器中获取的。

(2)B服务器端的代码:

复制代码
 <?php
     $mycallBack = $_GET['callback1'];
 ​
     $arr = array("zhangsan","lisi","zhaoliu");
 ​
     echo $mycallBack."(".json_encode($arr).")";    //字符串拼接
 ?>

代码解释:

第一行的callback1 是A和B之间的约定,二者必须一致。

echo语句中输出的内容,即要返回给A客户端的内容,此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。

json_encode指的是,将php对象转化为 json。

刷新A页面,输出结果为:

复制代码
     mycallBack(["zhangsan","lisi","zhaoliu"])

jQuery 中的 JSONP

我们知道,jQuery 中发送 Ajax 请求,格式是:

复制代码
         $("#btn").click(function(){
             $.ajax({
                 url:"./data.php?callback1=fn",
                 dataType:"jsonp",
                 type:"get",
                 //jsonp:"callback1",   //传递给B服务器的回调函数的名字(默认为 callback)
                 //jsonCallBack:"fn"    //自定义的函数名称。默认为 jQuery 自动生成的随机函数名
                 success:function(data){
                     alert(data);
                     //$("#showInfo").html(data);
                 },
                 error:function(e){
                     console.log(e);
                 }
             });
         });

那如果数据是 JSONP,上方代码则改为:

复制代码
         $("#btn").click(function(){
             $.ajax({
                 url:"./data.php?fn",
                 dataType:"text",
                 type:"get",
                 success:function(data){
                     alert(data);
                     //$("#showInfo").html(data);
                 },
                 error:function(e){
                     console.log(e);
                 }
             });
         });

参考链接

参考链接:https://www.cnblogs.com/2050/p/3191744.html

希望各位可以点个赞点个关注,这对up真的很重要,谢谢大家啦!

相关推荐
VBA63374 分钟前
VBA数据库解决方案第十五讲:Recordset集合中单个数据的精确处理
开发语言
wrx繁星点点7 分钟前
事务的四大特性(ACID)
java·开发语言·数据库
不写八个14 分钟前
Python办公自动化教程(005):Word添加段落
开发语言·python·word
HEX9CF18 分钟前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss
凌云行者30 分钟前
使用rust写一个Web服务器——单线程版本
服务器·前端·rust
赵荏苒43 分钟前
Python小白之Pandas1
开发语言·python
丶Darling.1 小时前
代码随想录 | Day26 | 二叉树:二叉搜索树中的插入操作&&删除二叉搜索树中的节点&&修剪二叉搜索树
开发语言·数据结构·c++·笔记·学习·算法
华农第一蒟蒻1 小时前
Java中JWT(JSON Web Token)的运用
java·前端·spring boot·json·token
积水成江1 小时前
关于Generator,async 和 await的介绍
前端·javascript·vue.js
Z3r4y1 小时前
【Web】portswigger 服务端原型污染 labs 全解
javascript·web安全·nodejs·原型链污染·wp·portswigger