JavaScript如何实现跨域请求


Posted in Javascript onAugust 05, 2016

什么是跨域请求?
简单的理解就是向不在同一个域名的服务器文件发出请求。这个还是用实际的例子来说明一下吧,比如baidu.com向cxyblog.com发送请求,这两个域名是不同的,那么这就是跨域了,出于安全性的考虑,这样是不允许的。另外需要注意的是不同子域名或者同域名不同端口之间或者相同域名不同协议等发送的请求也都算是跨域的,基本上可以为归为下面几类:
(1)http://www.baidu.comhttp://www.cxyblog.com发送请求
(2)http://www.cxyblog.comhttp://image.cxyblog.com发送请求
(3)http://www.baidu.com:8000http://www.cxyblog.com发送请求
(4)http://www.cxyblog.comhttps://www.cxyblog.com发送请求
(5)http://www.cxyblog.comhttp://112.65.242.67发送请求(假设域名www.cxyblog.com所对应的IP是112.65.242.67)
以上五种情况都算是跨域请求。

什么时候会用到跨域请求?
有时候我们需要使用Javascript进行Ajax操作的时候会碰到这种跨域请求操作的问题。
为什么直接使用javascript不能实现跨域请求?
由于安全的原因,javacript同源策略的限制,浏览器不允许Javascript请求跨域的资源。
如何解决javascript不能实现跨域请求的问题?
本文用到的解决方法是使用FlyJSONP应用JSONP实现跨域请求。FlyJSONP是一个轻量级的JavaScript类库,也被称作JSON插件,压缩后总大小约为3KB,不需要其他框架的支撑。
FlyJSONP官网地址:http://alotaiba.github.com/FlyJSONP/
那么该如何使用FlyJSONP类库实现跨域请求呢? 

(1)首先要加载FlyJSONP的Javascript脚本,即:

<script language="javascript" src="http://www.cxyblog.com/flyjsonp.min.js"></script> 

(2)然后要初始化FlyJSONP的实例,参数debug可设置为true或false,即:FlyJSONP.init({debug: true}),这个参数的意思就是是否打开调试信息,参数值为true或者false; 

(3)接下里就是使用get方法或post方法请求数据了,具体实例代码如下:

//FlyJSONP实现跨域GET
function getData(){
 FlyJSONP.init({debug:true});//初始化FlyJSONP的实例,参数debug可设置为true或false
 FlyJSONP.get({
  url:'http://www.cxyblog.com/article.json',//目标请求的URL
  parameters:{//请求参数
   limit:5
  },
  success:function(data){//发送请求成功
   console.log(data);
  },
  error:function(errorMsg){//发送请求失败
   console.log(errorMsg);
  }
 });
}
//FlyJSONP实现跨域POST
function postData(){
 FlyJSONP.init({debug:true});//初始化FlyJSONP的实例,参数debug可设置为true或false
 FlyJSONP.post({
  url:'http://www.cxyblog.com/article/new',
  parameters:{
   username:'cxyblog',
   api_key:'123456',
   title:'FlyJSONP',
   description:'test'
  },
  success:function(data){
   alert(data);
  }
 });
}

注意:服务端输出给客户端时,输出的必须是json字符串,否则客户端无法接收。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
JavaScript数组操作函数汇总
Aug 05 #Javascript
Jquery获取当前城市的天气信息
Aug 05 #Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 #Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 #Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 #Javascript
同步文本框内容JS代码实现
Aug 04 #Javascript
JS打印组合功能
Aug 04 #Javascript
You might like
php遍历数组的方法分享
2012/03/22 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
python实现简单温度转换的方法
2015/03/13 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Python通过future处理并发问题
2017/10/17 Python
Python之修改图片像素值的方法
2019/07/03 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
公务员培训自我鉴定
2014/02/01 职场文书
婚礼主持结束词
2014/03/13 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Golang 链表的学习和使用
2022/04/19 Golang
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android