解决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方式。
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 });
方式2:使用jquery getjso方式
1 1 $.getjson("请求的路径=?参数", 2 2 function(json){ //返回的结果 3 3 if(json.属性名==值){ 4 4 // 执行代码 5 5 } 6 6 });
jsonp的基本原理就是:动态的添加一个一致的。jsonp是一种脚本的注入(script injection)行为,所以,它会有一定的安全性的问题。
同时需要注意jsonp是不支持post跨域请求的。