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 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
判断ie的两种简单方法
Aug 12 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
详解vue的diff算法原理
May 20 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python多进程fork()函数详解
2019/02/22 Python
python之array赋值技巧分享
2019/11/28 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
如何基于Python创建目录文件夹
2019/12/31 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python能在浏览器能运行吗
2020/06/17 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
小结Python的反射机制
2020/09/28 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
优秀教师主要事迹
2014/02/01 职场文书
庆祝教师节标语
2014/10/09 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
优秀班主任材料
2014/12/16 职场文书
先进基层党组织材料
2014/12/25 职场文书