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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
简单的无缝滚动程序-仅几行代码
May 08 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
Node.js的包详细介绍
Jan 14 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 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
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
限制文本字节数js代码
2007/03/06 Javascript
document.write的几点使用心得
2014/05/14 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
koa源码中promise的解读
2018/11/13 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
机器学习python实战之决策树
2017/11/01 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python日志处理模块logging用法解析
2020/05/19 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
C语言开发工程师测试题
2016/12/20 面试题
中科创达面试题
2016/12/28 面试题
会计人员岗位职责
2014/03/19 职场文书
体育教师个人总结
2015/02/09 职场文书
2015大学生求职信范文
2015/03/20 职场文书
环保守法证明
2015/06/24 职场文书
城南旧事读书笔记
2015/06/29 职场文书
大学生读书笔记范文
2015/07/01 职场文书
运动会通讯稿100字
2015/07/20 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏