jQuery跨域问题解决方案


Posted in Javascript onAugust 03, 2015

通过XMLHTTPRquest请求不同域上的数据,原来js跨域访问是后台有个处理路径“/test”的函数。下面把具体解决方案介绍如下。

后台处理路径“/test”的函数:

//路径处理

app.get("/test",user.test);

//处理函数

exports.test=function(req,res){

    res.end("alert('JS跨域访问')");

};

 外部有一个网页需要访问路径”/test“下的内容,则可以通过JS脚本文件来跨域访问:

//处理函数

<script>

    function method(data){

        console.log(data);

    }

</script>

//跨域访问

<script src="http://localhost:3000/test"></script>

 结果会在当前的网页中弹出一个窗口:

jQuery跨域问题解决方案

jQuery中JSONP跨域访问的实现:

同样在后台有一个处理路径“/test”的函数:

//路径处理
app.get("/test",user.test);
//处理函数
exports.test=function(req,res){
 res.end("method("+JSON.stringify({mes:"跨域访问成功!"})+")");
};
 外部有一个网页需要访问路径”/test“下的内容,通过JSONP来实现跨域访问:

//引入跨域访问中的jQuery函数库
<script src="http://localhost:3000/js/jquery-1.9.1.min.js"></script>
//jQuery中JSONP跨域访问
<script>
  $.ajax({
    url:"http://localhost:3000/test",
    type:"get",
    success:function(data){
      $("body").append(data.mes);
    },
    dataType:"jsonp",
    jsonpCallback:"method"
  });
</script>

 结果会在当前的网页中显示如下信息:

jQuery跨域问题解决方案

通过上述代码我们可以看出JSOPN跨域访问和原始的JS跨域访问的不同之处是JSONP不需要写处理跨域访问的函数(例如上述方法中使用的method函数),在JSONP跨域访问时会自动帮我们创建处理跨域访问的函数。

JSONP跨域访问的优点:

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

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

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

JSONP跨域访问的缺点:

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

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

Javascript 相关文章推荐
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 #Javascript
提高jQuery性能优化的技巧
Aug 03 #Javascript
jquery简单实现幻灯片的方法
Aug 03 #Javascript
JS拖拽插件实现步骤
Aug 03 #Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 #Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 #Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 #Javascript
You might like
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
Prototype Array对象 学习
2009/07/19 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
详解Nodejs内存治理
2018/05/13 NodeJs
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python标准库内置函数complex介绍
2014/11/25 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
介绍一下write命令
2014/08/10 面试题
高中毕业自我鉴定
2013/12/16 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
公司会议策划方案
2014/05/17 职场文书
美术社团活动总结
2014/06/27 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
同意转租证明
2015/06/24 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
python实现手机推送 代码也就10行左右
2022/04/12 Python