Javascript 跨域知识详细介绍

2024-11-26 05:18:15

JS跨域知识总结：

在“跨域”一词经常性地出现以前，我们其实已经频繁地使用它了。如在A网站的img，src指向B网站的某一图片地址，毫无疑问，这在通常情况下都是能正常显示的（且不论防盗链技术）；同样，可以使script标签的src属性指向其它网站的脚本资源（在某些情况下甚至鼓励这样做，以便充分利用其它网站的负载优势，减小自身服务器的并发量）。然而，如若使用js去主动请求其它网站的数据，比如ajax方式，就会遇到让人郁闷的跨域问题，这也是我们平常所说的跨域。由于安全原因，跨域访问是被各大浏览器所默认禁止的。这里涉及到同源策略的概念：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。

跨域带来的具体安全问题博主没有深究，大伙可以自行脑补。

然而，很多情况下，特别是在互联网持续发展的今天，我们需要请求来自不同合作伙伴或数据提供商的前端接口，在跨域访问的方式没有规范化前（client端跨域访问的需求看来也引起w3c的注意了，看资料说html5 WebSocket标准支持跨域的数据交换，应该也是一个将来可选的跨域数据交换的解决方案），有什么方法能绕过它的限制呢？答案有很多（虽然都很麻烦），最常用的当属所谓的JSONP跨域了。

JSONP原理

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码。这种跨域的通讯方式称为JSONP。

来个简单的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Test Jsonp</title>
  <script type="text/javascript">
      function jsonpCallback(result)
      {
      alert(result.msg);
      }
    </script>
  <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>

简述原理与过程：首先在客户端注册一个callback, 然后把callback的名字传给服务器（这里客户端和服务器约定以key为jsonp的查询字符串值传递）。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，即执行了预定义的callback函数。

从上述简述可以推出：除了返回函数形式的js代码片段，服务端自然能返回所有符合规范的可执行js片段。

JSONP的缺点是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。（下面还有）

jQuery的Jsonp

如前所述，jsonp并非ajax请求，但是jQuery仍提供与jQuery.ajax一致的方式进行跨域请求：

$.ajax({
  url: 'http://crossdomain.com/jsonServerResponse',
  type: 'GET',
  dataType: 'jsonp',
  jsonp: "callback",
  jsonpCallback: 'functionName',
  success: function (data, textStatus, jqXHR) { }
  //……
});

如上所示，dataType设为jsonp表示这是一次跨域请求，jsonp设为服务端预定的传递函数名称的查询字符串key，而jsonpCallback即为js函数名称；假如jsonpCallback不设置，那么jQuery将自动生成的随机函数名（在window对象中加载一个全局的函数，当代码插入时函数执行，执行完毕后就会被移除），可推断该自动生成的函数会回调上述代码中的success函数。（当手动为jsonpCallback赋值时，不知道success函数会否回调，还是说jQuery会寻找预定义的函数，若找不到则报错？博主懒，以后再试吧。）当然jQuery为我们提供了一个简易版本，$.getJSON，这里就不赘述了。

需要注意的是success函数中的jqXHR参数，在ajax请求中，它是正宗的jqXHR对象，亦可看作是XMLHTTPRequest对象（继承or封装），但是在jsonp请求中却并非如此，几乎不能带给我们如XMLHTTPRequest中最有用的那些信息：它缺少XMLHTTPRequest的请求状态信息，所以并不能触发绝大部分的回调函数，比如error、complete等（jQuery1.9.0），而可以被回调的success函数推测应该是由script标记的load事件触发，这也同ajax依靠XMLHTTPRequest的状态的机制完全不同。经试验，脱胎于jQuery的zepto（v1.1.3），在jsonp请求出现错误，比如加载js文档时头部返回401错误时，error函数会执行，但是该函数的jqXHR参数也同样不是正宗的jqXHR类型，甚至不能通过它获取响应的头部信息，在这种情况下，我们只是被告知某个环节出错了，却并不知道具体的错误信息。类似响应头承载有用信息的场景，博主不建议使用jsonp，可以说，使用jsonp的一个前提是：除了网络异常等非业务异常外，所有业务异常（概括地说，乃是从服务器接收请求到返回响应这段时间内抛出的所有异常）都需要以请求结果的形式直接返回给客户端，便于客户端回调分析。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

JavaScript实现使用Canvas绘制图形的基本教程

由于这两年HTML5火的正热,所以研究了一下,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style ty
Java开发环境jdk 1.8安装配置方法（Win7 64位系统/windows server 2008）

什么是jdk jdk是什么呢?jdk的是java development kit的缩写,意思是java程序开发的工具包.也可以说jdk是java的sdk. 目前的JDK大致分三个大版本: Java SE:Java Platform, Standard Edition,Java平台标准版,主要用来开发桌面程序 Java EE:Java Platform, Enterprise Edition,Java平台企业版,主要用来开发WEB程序 Java ME:Java Platform, Micro Ed
java从字符串中提取数字的简单实例

随便给你一个含有数字的字符串,比如: String s="eert343dfg56756dtry66fggg89dfgf"; 那我们如何把其中的数字提取出来呢?大致有以下几种方法,正则表达式,集合类,还有就是String类提供的方法. 1 String类提供的方法: package 测试练习; import Java.util.*; public class get_StringNum { /** *2016.10.25 */ public static void main(Strin
Java微信支付-微信红包

微信红包的使用已经很广泛,本篇文章介绍了微信发红包的实例,需要有认证的公众号,且开通了微信支付,商户平台且开通了现金红包的权限即可. https://pay.weixin.qq.com商户登陆地址.选择查看营销中心的现金红包 https://pay.weixin.qq.com/wiki/doc/api/tools/cash_coupon.php?chapter=13_1 现金红包的官网文档说明先看几个图简单的测试.前提需要你去商户平台先充值.不支持预支付.本文只是总结微信现金红包接口的调用与
JavaScript登录验证码的实现

废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示: 1.js var code="" ; //在全局定义验证码 function createCode(){ code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); checkCode.value = ""; var selec
RegExp 随笔 JavaScript RegExp 对象

概述 RegExp 的构造函数创建了一个正则表达式对象,用模式来匹配文本. 有关正则表达式介绍,请阅读JavaScript指南中的正则表达式章节. 语法文字和构造符号是可能的: /pattern/flags new RegExp(pattern [, flags]) 参数 pattern 正则表达式的文本 flags 如果指定,标志可以具有以下值的任意组合: g 全局匹配 i 忽略大小写 m 多行;让开始和结束字符(^ 和 $)工作在多行模式工作(例如,^ 和 $ 可以匹配字符串中每一行的开始
JavaScript中省略元素对数组长度的影响

在学习<JavaScript权威指南>第六版的第7.1节中通过数组直接量创建数组时,我们可以不给数组的某个元素赋值,它就会使undefined.虽然是undefined,但我们调用数组对象的length属性时undefined也会导致length加1.有如下所示的四种情况: var undef0 = [,,]; var undef1 = [1,,]; var undef2 = [,1,]; var undef3 = [,,1]; console.log(undef0.length); cons
Javascript将字符串日期格式化为yyyy-mm-dd的方法

这篇文章主要介绍的是利用Javascript将字符串日期格式化为yyyy-mm-dd的方法,下面话不多说了,参考如下代码 function formatDate(date) { var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear(); if (month.length < 2) month = '0' + month; if (day.lengt
Java doGet, doPost方法和文件上传实例代码

Java doGet, doPost方法和文件上传 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/test" method="post
Java中常用缓存Cache机制的实现

缓存,就是将程序或系统经常要调用的对象存在内存中,一遍其使用时可以快速调用,不必再去创建新的重复的实例.这样做可以减少系统开销,提高系统效率. 缓存主要可分为二大类: 一.通过文件缓存,顾名思义文件缓存是指把数据存储在磁盘上,不管你是以XML格式,序列化文件DAT格式还是其它文件格式: 二.内存缓存,也就是实现一个类中静态Map,对这个Map进行常规的增删查. import java.util.*; //Description: 管理缓存 //可扩展的功能:当chche到内存溢出时必须清除掉最早
JavaScript中访问id对象属性的方式访问属性(实例代码)

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
javascript iframe跨域详解

1.什么引起了ajax跨域不能的问题 ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 2.有什么完美的解决方案么? 没有.解决方案有不少,但是只能是根据自己的实际情况来选择. 具体情况有: 一.本域和子域的相互访问: www.aa.com和book.aa.com 二.本域和其他域的相互访问: www.aa.com和www.bb.com 用 iframe 三.本域和其他域的相互访问: www.aa.com和w

Javascript 跨域知识详细介绍

相关推荐

随机推荐