跨域问题总结

什么叫做跨域访问

jsonp的出现是因为浏览器有个同源策略

js来说,它在执行时不能请求不同源的资源。

什么是源呢,这里是指协议名(如http://)+主机名(api.flickr.com)+端口号(:80,http协议默认端口号是80,可省略),这三个组合在一起就是一个源,同源的话是指这3个必须和发起请求的网页的源必须一样。
因为js是不能请求不同源的资源,所以如果你的脚本不在这个源(http://api.flickr.com)的网页上,是没法请求的它的图片的。

但为什么jsonp可以?

那是因为同源策略有个例外,如果网页上通过<script src="不同源的地址"></script>,<img>以及<link>这样的标签来引用不同源的资源是可以的。

结合这个例外,一些(个)聪明的人就想到一个办法,如果请求资源时,异源服务器能返回这样的脚本,

请求异源资源的问题就得到解决:fnName({theDataUWanted});因为这样,浏览器得到这个脚本后会立即执行它,而这个函数实际上就是包含了你定义的回调函数的函数,而这个fnName就是jsoncallback参数的值,也就是jQuery自动替换的名字。

这个异源请求的完成,

要求异源服务器也必须配合你的脚本才行,

如果它不支持jsonp,那即使用jsonp也无法请求异源的资源。


$.ajax({
             type: "GET" ,
             url: "Services/EFService.svc/Members" ,
             data: "{}" ,
             contentType: "application/json; charset=utf-8" ,
             dataType: "json" ,
             success: function  (data) {
                 // Play with returned data in JSON format
             },
             error: function  (msg) {
                 alert(msg);
             }
         });
全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:
 
$( "#loading" ).ajaxStart( function (){
 
$( this ).show();
 
});
 
  
 
  
 
我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了:
 
  $.ajax({
 
url: "test.html" ,
 
global: false , // 禁用全局Ajax事件. // ... });  
 
下面是jQuery官方给出的完整的Ajax事件列表:
•ajaxStart (Global Event)
This event is broadcast if  an Ajax request is started and no other Ajax requests are currently running.
•beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if  need be.)
•ajaxSend (Global Event)
This global event is also triggered before the request is run.
•success (Local Event)
This event is only called if  the request was successful (no errors from the server, no errors with  the data).
•ajaxSuccess (Global Event)
This event is also only called if  the request was successful.
•error (Local Event)
This event is only called if  an error occurred with  the request (you can never have both an error and a success callback with  a request).
•ajaxError (Global Event)
This global event behaves the same as the local error event.
•complete (Local Event)
This event is called regardless of if  the request was successful, or not. You will always receive a complete callback, even for  synchronous requests.
•ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
•ajaxStop (Global Event)
This global event is triggered if  there are no more Ajax requests being processed.
jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
 
设置 AJAX 请求默认地址为 "/xmlhttp/" ,禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
 
jQuery 代码:
 
$.ajaxSetup({
 
url: "/xmlhttp/" ,
 
global: false ,
 
type: "POST"
 
});
 
$.ajax({ data: myData });

如果指定为 html 类型,任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。

类似地,指定 script 类型的话,也会先执行服务器端生成 JavaScript,然后再把脚本作为一个文本数据返回。

JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。

如果获取的数据文件存放在远程服务器上域名不同,也就是跨域获取数据),则需要使用 jsonp 类型

使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的 URL 后面。

服务器端应当在 JSON 数据前加上回调函数名,以便完成一个有效的 JSONP 请求。

如果要指定回调函数的参数名来取代默认的 callback,可以通过设置 $.ajax() 的 jsonp 参数。

解决跨域的问题:

方法一:通过服务器解决

跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,

所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显然开发量比较大,但限制也最少,很多widget开放平台server端(如sohu博客开放平台)其实就么搞的.不在本次讨论范围. 

方法二:$.ajax()  type = get  dataType=jsonp

要讨论的是浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. 
http://www.jb51.net/article/29180.htm

var qsData = {'searchWord':$("#searchWord").attr("value"),
	'currentUserId':$("#currentUserId").attr("value"),
	'conditionBean.pageSize':$("#pageSize").attr("value")};
				$.ajax({
				   async:false,
				   url: "http://跨域的dns/document!searchJSONResult.action",
				   type: "GET",
				   dataType: 'jsonp',
				   jsonp: 'jsoncallback',
				   data: qsData,
				   timeout: 5000,
				   beforeSend: function(){
				   //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
				   },
				   success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
					    if(json.actionErrors.length!=0){
					           alert(json.actionErrors);
					     }
					       genDynamicContent(qsData,type,json);
				   },
				   complete: function(XMLHttpRequest, textStatus){
				    	$.unblockUI({ fadeOut: 10 }); 
				   },
				   error: function(xhr){
					    //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
					    //请求出错处理
				    	alert("请求出错(请检查相关度网络状况.)");
				   }
				});
				------------------------------------下面是简单写法--------------------------------------------			
				var qsData = {'searchWord':$("#searchWord").attr("value"),
							  'currentUserId':$("#currentUserId").attr("value"),
							  'conditionBean.pageSize':$("#pageSize").attr("value")};
				$.getJSON(
				  "http://跨域的dns/document!searchJSONResult.action?key1="+value1+"&key2="+value2+"&jsoncallback=?",
			      function(json){
				      if(json.属性名==值){
				      // 执行代码
				      }
			    });
				//这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了.
				//这样,jquery就会拼装成如下的url get请求
				//http://跨域的dns/document!searchJSONResult.action?
				//&jsoncallback=jsonp1236827957501
				//&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351
				//¤tUserId=1236828192549
				//&conditionBean.pageSize=15
				
			// 在响应端(http://跨域的dns/document!searchJSONResult.action),
			// 通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501
			// 然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")"; 
			// jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组); 
			// 这样就达到了跨域数据交换的目的.
			
			// jsonp的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
			// 这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌. 
			
			// 如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
			
			// JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。
			
			// jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数
				
			

服务器端示例代码,以java为例:

服务器端代码,是重点,开始以为,只要客户端通过jsonp就可以直接跨域访问,其实不然,需要服务器端的支持才行。

  public void jsonpTest()throws IOException{
     HttpServletRequest request = ServletActionContext.getRequest();
      HttpServletResponse response = ServletActionContext.getResponse();
      //根据html指定的jsonp回调函数的参数名,获取回调函数的名称
      //callbackName的值其实就是:success_jsonpCallback
      String callbackName = (String)request.getAttribute("jsoncallback");
      //简单模拟一个json字符串,实际可使用google的gson进行转换,次数通过字符串拼接
        //{"name":"张三","age":28}
      //\是对"号进行转义
     String jsonStr = "{\"name\":\"张三\",\"age\":28}";
11     //最终返回的数据为:success_jsonpCallback({"name":"张三","age":28})
12     String renderStr = callbackName+"("+jsonStr+")";
13     response.setContentType("text/plain;charset=UTF-8");
14 response.getWriter().write(renderStr);

户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

注意,jquey是不支持post方式跨域的.
为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋.. 

注意:

JSONP是一个非常强大的构建mashp的方法,可是不是一个解决跨域访问问题的万能药。它也有一些缺点:

第一:也是最重要的:JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。你无法获得一个404的错误,也不能取消这个请求。

第二:如果使用了不信任的服务会造成很大的安全隐患。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值