欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

解决ajax跨域问题

程序员文章站 2023-02-18 10:27:38
JQuery ajax支持get方式的跨域,采用了jsonp来完成。完成跨域请求的有两种方式实现。一种是使用Jquery ajax最底层的Api实现跨域的请求,而另一种则是JQuery ajax的高级封装。 方式1:使用Jquery ajax方式。 1 $.ajax({ 2 url:'http:// ......

jquery ajax支持get方式的跨域,采用了jsonp来完成。完成跨域请求的有两种方式实现。一种是使用jquery ajax最底层的api实现跨域的请求,而另一种则是jquery ajax的高级封装。

方式1:使用jquery ajax方式。

解决ajax跨域问题
 1 $.ajax({
 2     url:'http://www.mysite.com/demo.do',  // 跨域url
 3     type:'get',
 4     async:false,
 5     datatype:'jsonp',
 6     jsonp: 'jsoncallback', //默认callback
 7     data: mydata, 
 8     time:5000,
 9     beforesend:function(){
10      //jsonp 方式此方法不被触发。原因可能是datatype如果指定为jsonp的话,就已经不是ajax事件了
11     },
12     success:function(data){
13         //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
14        if(json.actionerrors.length!=0){ 
15             alert(json.actionerrors); 
16         } 
17         gendynamiccontent(qsdata,type,json); 
18     },
19     complete: function(xmlhttprequest, textstatus){ 
20           $.unblockui({ fadeout: 10 }); 
21     }, 
22     error: function(xhr){ 
23           //jsonp 方式此方法不被触发
24           //请求出错处理 
25           alert("请求出错(请检查相关度网络状况.)"); 
26      } 
27     
28 });
view code

方式2:使用jquery getjso方式

解决ajax跨域问题
1 1   $.getjson("请求的路径=?参数", 
2 2         function(json){ //返回的结果
3 3           if(json.属性名==值){ 
4 4             // 执行代码 
5 5         } 
6 6  });
view code

jsonp的基本原理就是:动态的添加一个一致的。jsonp是一种脚本的注入(script injection)行为,所以,它会有一定的安全性的问题。

同时需要注意jsonp是不支持post跨域请求的。