现在位置首页 / 前端开发 /正文

jquery/js的ajax跨域访问说明

作者: IT小兵 | 2014年8月23日| 热度:℃ | 评论: |参与:

从域的概念上来区分HTTP请求,大致可以分为两种,同域的HTTP请求、非同域的HTTP请求。

    HTTP请求的发起,可以是后台程序,也可以是浏览器。Java程序都是通过URLConnection来完成。浏览器端的请求的发起,依靠浏览器的内部实现了。

在HTML文档中能够发起HTTP请求的元素有:

 

  1. <link> 请求CSS样式文件

  2. <script>请求JavaScript脚本文件

  3. <iframe>、<frame>请求HTML文档文件

  4. <img>请求图像文件

  5. <a>

  6. <form>请求(get/post)

  7. <object>请求其他资源文件,音频视频,插件

  8. <source>用于音频视频等

 

如果从域的概念来讲,HTML中的这些元素,都是可以跨域请求资源的。这些请求都是传统的HTTP请求。还有一种请求,是ajax 请求。它与传统请求是有区别的。别的不说,但讲request header中Ajax请求就多了:X-Requested-With:XMLHttpRequest。传统请求是没有这个的。

 

HTTP请求实现跨域是没有问题的,那么Ajax跨域呢?

 

 

下面提出一个场景:通过Ajax请求另外一个域下的Servlet获取到JSON数据,然后做一些处理。

创建项目test1,

 

 

 

创建项目test2,在index.jsp下使用iframe和Ajax方法来获取test1中的那个请求。

 


 

测试:

在地址栏输入http://localhost:8081/test2

 

 

这个就是我们看到的界面,页面中iframe中访问:

http://localhost:8080/test1/DomainServlet 的结果。

 

接下来,使用Ajax来获取数据,点击按钮后:

 

 

很显然,是不能成功访问的。

 

那想要通过Ajax请求获取数据该怎么办呢?

 

1)采用<script>的跨域访问资源的特性来解决

 

把上面代码中的getDomainResp改为:

function aa(data){
      console.log(data);
   }
  function getDomainResp(){
      var script=document.createElement("script");
      script.type="text/javascript";
     script.src="http://localhost:8080/test1/DomainServlet?callback=aa";
      document.getElementsByTagName("head")[0].appendChild(script);
  }

 就是在动态添加一个<script>,通过这个来获取数据。传递的参数是aa,也就是获取数据后的回调函数的名字。

将Servlet稍作调整:

 

 

这样就可以了。

控制台信息:

 

通过控制台消息,也可以知道,浏览器本来是要通过请求Script资源的,但是被拦截下来,该用text/html方式去请求资源。

使用调试工具就可以看到<script>的请求内容是:

 

这样就完成了跨域访问。

 

2)JQuery 也提供了对跨域访问的支持。

 

对上面的JS代码稍作调整,改用jQuery的ajax请求,使用JSONP的返回数据类型:

function aa(data){
      console.log(data);
   }
 
  /*
 
  function getDomainResp(){
      var script=document.createElement("script");
      script.type="text/javascript";
     script.src="http://localhost:8080/test1/DomainServlet?callback=aa";
      document.getElementsByTagName("head")[0].appendChild(script);
  }
  */
  function getDomainResp(){
      $.ajax({
         url:'http://localhost:8080/test1/DomainServlet',
         crossDomain:true,
         dataType:'jsonp',
         type:'post',
         data:{
            jsonp:'callback'
         },
         jsonpCallback:'aa'
      });
  }

而后台代码不变。也就是仍然是: 

 

同样也会得到正确的结果。

 

通过查看请求信息:

 

可以知道,其实jQuery也是发送<script src=””>请求。设置ajax的几个参数的作用:

 

1)是否跨域crossDomain,和返回值类型jsonp,其实就是告诉jQuery,这是一个跨域请求,也就是说告诉jQuery,要使用<script src=””>的方式去发送请求。

2)jsonp:’callback’,就是说发送的请求参数中,有一个参数名是callback。

3)jsonpCallback,就是设置请求参数callback的值是aa。

 

也就是说JQuery的跨域访问,其实就是使用上面<script>方式来访问的。

再深入点想想,利用<script>的跨域请求资源的特性可以完成跨域访问,其实就是利用浏览器发起的传统HTTP请求呀。

那么<iframe>也具有跨域访问的特性,能否利用<iframe>来跨域访问呢,毕竟都是浏览器发起的传统HTTP请求呀?

同时可以再想想,利用浏览器端发起HTTP请求可以完成跨域访问,那么利用后台程序,例如Java中的的URLConnection,能否发起跨域访问请求呢?


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询