首页 > 软件开发 > JQUERY >

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

来源:互联网 2023-03-17 00:52:10 340

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。EMZ办公区 - 实用经验教程分享!

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0 、FF 1.5 、Safari 2.0 、Opera 9.0 等。EMZ办公区 - 实用经验教程分享!

jquery怎么解决浏览器跨域问题EMZ办公区 - 实用经验教程分享!

工具/原料

  • 电脑
  • 前端编辑功能

方法/步骤

  • 1

    第一步:jquery跨域概念。EMZ办公区 - 实用经验教程分享!

    JSONP跨域访问的优点:EMZ办公区 - 实用经验教程分享!

    1.它不像XMLHTTPRequest对象实现的AJAX请求那样受到同源策略的限制;EMZ办公区 - 实用经验教程分享!

    2.它的兼容性更好,不需要XMLHTTPRequest或ActiveX的支持;EMZ办公区 - 实用经验教程分享!

    3.在请求完成后可以通过调用callback的方法传回结果。EMZ办公区 - 实用经验教程分享!

    JSONP跨域访问的缺点:EMZ办公区 - 实用经验教程分享!

    1.它只支持GET请求而不支持POST及其他类型的请求;EMZ办公区 - 实用经验教程分享!

    2.它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。EMZ办公区 - 实用经验教程分享!

    jquery怎么解决浏览器跨域问题EMZ办公区 - 实用经验教程分享!

    jquery怎么解决浏览器跨域问题EMZ办公区 - 实用经验教程分享!

  • 2

    第二步:代码实现:EMZ办公区 - 实用经验教程分享!

    1、请求类型必须为getEMZ办公区 - 实用经验教程分享!

    2、dataType: 'jsonp',EMZ办公区 - 实用经验教程分享!

    $.ajax({EMZ办公区 - 实用经验教程分享!

    async:false,EMZ办公区 - 实用经验教程分享!

    url: http://跨域的dns/document!searchJSONResult.action,EMZ办公区 - 实用经验教程分享!

    type: "GET",EMZ办公区 - 实用经验教程分享!

    dataType: 'jsonp',EMZ办公区 - 实用经验教程分享!

    jsonp: 'jsoncallback',EMZ办公区 - 实用经验教程分享!

    data: qsData,EMZ办公区 - 实用经验教程分享!

    timeout: 5000,EMZ办公区 - 实用经验教程分享!

    beforeSend: function(){EMZ办公区 - 实用经验教程分享!

    //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了EMZ办公区 - 实用经验教程分享!

    },EMZ办公区 - 实用经验教程分享!

    success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数EMZ办公区 - 实用经验教程分享!

    if(json.actionErrors.length!=0){EMZ办公区 - 实用经验教程分享!

    alert(json.actionErrors);EMZ办公区 - 实用经验教程分享!

    }EMZ办公区 - 实用经验教程分享!

    genDynamicContent(qsData,type,json);EMZ办公区 - 实用经验教程分享!

    },EMZ办公区 - 实用经验教程分享!

    complete: function(XMLHttpRequest, textStatus){EMZ办公区 - 实用经验教程分享!

    $.unblockUI({ fadeOut: 10 });EMZ办公区 - 实用经验教程分享!

    },EMZ办公区 - 实用经验教程分享!

    error: function(xhr){EMZ办公区 - 实用经验教程分享!

    //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了EMZ办公区 - 实用经验教程分享!

    //请求出错处理EMZ办公区 - 实用经验教程分享!

    alert("请求出错(请检查相关度网络状况.)");EMZ办公区 - 实用经验教程分享!

    }EMZ办公区 - 实用经验教程分享!

    });EMZ办公区 - 实用经验教程分享!

    jquery怎么解决浏览器跨域问题EMZ办公区 - 实用经验教程分享!

    jquery怎么解决浏览器跨域问题EMZ办公区 - 实用经验教程分享!

  • 3

    第三步:借助于scrip标签实现。EMZ办公区 - 实用经验教程分享!

    借助于:script标签可以实现很多内容。EMZ办公区 - 实用经验教程分享!

    script src="http://localhost:8080/servlet/jquery-3.3.1.min.js">/script>EMZ办公区 - 实用经验教程分享!

    jquery怎么解决浏览器跨域问题EMZ办公区 - 实用经验教程分享!

  • 3相关内容非法爬取自百度经验
  • 4

    第四步:借助$.getJSON请求。EMZ办公区 - 实用经验教程分享!

    $.getJSON("http://www.789.com/project/ajax.php?Action=head&callback=?",EMZ办公区 - 实用经验教程分享!

    function(data){ // 往后台传递的参数1;EMZ办公区 - 实用经验教程分享!

    var html = decodeURI(data.str)EMZ办公区 - 实用经验教程分享!

    $('#head').html(html); //调用用来显示内容的divEMZ办公区 - 实用经验教程分享!

    });EMZ办公区 - 实用经验教程分享!

    jquery怎么解决浏览器跨域问题EMZ办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!EMZ办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码