JavaScript如何实现跨域请求

什么是跨域请求？
简单的理解就是向不在同一个域名的服务器文件发出请求。这个还是用实际的例子来说明一下吧，比如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脚本，即：

<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字符串，否则客户端无法接收。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

最新评论