JavaScript如何实现跨域请求

站长资源 2024/11/28 佚名

66 1538 66

DDR爱好者之家 Design By 杰米

什么是跨域请求？
简单的理解就是向不在同一个域名的服务器文件发出请求。这个还是用实际的例子来说明一下吧，比如baidu.com向cxyblog.com发送请求，这两个域名是不同的，那么这就是跨域了，出于安全性的考虑，这样是不允许的。另外需要注意的是不同子域名或者同域名不同端口之间或者相同域名不同协议等发送的请求也都算是跨域的，基本上可以为归为下面几类：
（1）http://www.baidu.com向http://www.cxyblog.com发送请求
（2）http://www.cxyblog.com向http://image.cxyblog.com发送请求
（3）http://www.baidu.com:8000向http://www.cxyblog.com发送请求
（4）http://www.cxyblog.com向https://www.cxyblog.com发送请求
（5）http://www.cxyblog.com向http://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脚本，即：

（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跨域请求,js直接实现跨域请求,javascript跨域,ajax实现跨域请求

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JavaScript如何实现跨域请求”

暂无评论...

JavaScript如何实现跨域请求

JS实现HTML表格排序功能

JavaScript数组操作函数汇总

评论“JavaScript如何实现跨域请求”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接