jquery怎么解决浏览器跨域问题

2025-10-24 01:24:35

1、第一步:jquery跨域概念。

JSONP跨域访问的优点:

1.它不像XMLHTTPRequest对象实现的AJAX请求那样受到同源策略的限制;

2.它的兼容性更好,不需要XMLHTTPRequest或ActiveX的支持;

3.在请求完成后可以通过调用callback的方法传回结果。

JSONP跨域访问的缺点:

1.它只支持GET请求而不支持POST及其他类型的请求;

2.它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

jquery怎么解决浏览器跨域问题

jquery怎么解决浏览器跨域问题

2、第二步:代码实现:

1、请求类型必须为get

2、dataType: 'jsonp', 

$.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("请求出错(请检查相关度网络状况.)"); 

});

jquery怎么解决浏览器跨域问题

jquery怎么解决浏览器跨域问题

3、第三步:借助于scrip标签实现。

借助于:script标签可以实现很多内容。

<script src="http://localhost:8080/servlet/jquery-3.3.1.min.js"></script>

jquery怎么解决浏览器跨域问题

4、第四步:借助$.getJSON请求。

$.getJSON("http://www.789.com/project/ajax.php?Action=head&callback=?", 

function(data){ // 往后台传递的参数1; 

var html = decodeURI(data.str) 

$('#head').html(html); //调用用来显示内容的div 

}); 

jquery怎么解决浏览器跨域问题

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢