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 一些用法小结
Sep 11 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
专科应届生求职信
2013/11/24 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
公路施工安全责任书
2015/05/08 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang