JQuery Ajax 跨域访问的解决方案

具体情况有:
一、本域和子域的相互访问: http://www.aa.com/和book.aa.com
二、本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 iframe
三、本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 XMLHttpRequest访问代理
四、本域和其他域的相互访问: http://www.aa.com/和http://www.bb.com/ 用 JS创建动态脚本
今天主要讨论第4中解决方案，这个和上个的区别就是请求是使用<script>标签来请求的，这个要求也是两个域都是由你来开发才行。原理就是JS文件注入，在本域内的a内生成一个JS标签，它的SRC指向请求的另外一个域的某个页面b，b返回数据即可，可以直接返回JS的代码。因为script的src属性是可以跨域的。
这里我们需要用到JQuery.getScript(url, callback)方法，url是脚本文件的URL路劲，callback函数在脚本资源已被加载和求值后调用的回调函数。
首先在bb.com创建一个js文件，test.js


代码如下:

var ojb = {msg:'js跨域请求成功'};

然后在aa.com的页面上使用$.getScript加载test.js脚本


代码如下:

$(function() {
$.getScript('http://www.bb.com/test.js', function() {
if (ojb) {
alert(obj.msg);
}
});
});

使用$.getScript函数的最大好处就是可以保证，脚本加载完毕后调用回调函数。
个人感觉这种方法比使用代理和iframe要简单一些。

赞 (0)

相关推荐

  • 解决AJAX中跨域访问出现'没有权限'的错误

    禁止访问非同域的网站,下面一个例子来访问http://www.google.cn, <script type="text/javascript"> function createobj() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpReq

  • jquery ajax jsonp跨域调用实例代码

    客户端代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • 详解ajax跨域问题解决方案

    详解ajax跨域问题解决方案

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作. 解决方式 通常来说,比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发.二者各有利弊,具体要使用哪种方式还需要具体的分析. 服务器设置响应头 服务器代理 客户端采用脚本回调机制. 方式一 Access-C

  • jquery ajax跨域解决方法(json方式)

    最近公司开发的项目中很多地方需要跨域ajax请求,比如几个子域名下 http://a.****.com/index123.aspx, http://b.****.com/index2.aspx 都要请求用户json信息,然后再对数据进行处理,起初我和同事们试了很多种方法,使用$.ajax() 无论是get或post方法都会引起uri deny的错误.一番GG之后发现了解决方法,也了解其中的原因. jquery从1.2开始,.getJSON就支持跨域操作了.使用jquery.getJSON()方法

  • 解决ajax跨域请求数据cookie丢失问题

    前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: {             withCredentials: true         },         crossDomain: true, $.ajax({         type: postType,         url: url,         data: postData || '',         xhrFields: {             withCredentials: tru

  • jquery中ajax处理跨域的三大方式

    由于JS同源策略的影响,因此js只能访问同域名下的文档.因此要实现跨域,一般有以下几个方法: 一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受,*/ header("Access-Control-Allow-Methods:G

  • AJAX javascript的跨域访问执行

    AJAX javascript的跨域访问执行

    突然感觉就是这里的问题,研究一下,搞定后其实觉得挺容易的,只是自己知识还是有些欠缺,解决方法如下: 阻塞的AJAX请求 我们先来证实一下请求的阻塞情况吧.我们使用如下的代码: 连续发起三个请求  复制代码 代码如下: function simpleRequest()  {     var request = new XMLHttpRequest();      request.open("POST", "Script.ashx");      request.sen

  • AJAX跨域请求json数据的实现方法

    我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法: Js代码 复制代码 代码如下: jQuery.getJSON("http://search.twitter.

  • jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

随机推荐