完美解决AJAX跨域问题

从AJAX诞生那天起，XMLHttprequest对象不能跨域请求的问题就一直存在。这似乎是一个很经典的问题了。是由于javascript的同源策略（这里不作深入探讨）所导致。

解决的办法，大概有如下几种：

1. 使用中间层过渡的方式（可以理解为“代理”）：

中间过渡，很明显，就是在AJAX与不同域的服务器进行通讯的中间加一层过渡，这一层过渡可以是PHP、JSP、c++等任何具备网络通讯功能的语言，由中间层向不同域的服务器进行读取数据的操作。拿asp.net做一个例子，如果需要对不同域的某一个asp.net进行通讯，现在客户端的xmlhttprequest先query本域的一个asp.net ，然后由本域的这个asp.net去和不同域的asp.net进行通讯，然后由本域的asp.net响应输出（response）；思路大概就是这样的，相信读者已经很清楚的理解了。

2. 使用＜script＞标签

这个方法是利用＜script＞标签中的src来query一个aspx获得response，因为＜script＞标签的src属性不存在跨域的问题。

举个例子来让大家看得更清楚一点吧：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax跨域问题</title>
    <script type="text/javascript" src="" id="getAspx">
    </script>
    <script type="text/javascript">
        function get(url) {
            var obj = document.getElementById("getAspx");
            obj.src = url;
            (obj.readStatus == 200)
            {
                alert(responseVal);//如果成功，会弹出Dylan
            }
        }
        function query() {
            get(getDemo.aspx);
        }
    </script>
</head>
<body>
<input type="button" value="Ajax跨域测试" onclick="query();"/>
</body>
</html>

getDemo.aspx后台代码：


代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LearnJS
{
    public partial class getDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write("var responseVal='Dylan'");
        }
    }
}

这个方法又叫做ajaj或者ajax without xmlHttprequest，把x换成了j，是因为使用了＜script＞标签而没有用到xml和xmlHttprequest的缘故。这种方法似乎有点“另类”，哈哈。

那现在我们就看看，有了jQuery之后，如何来解决ajax的跨域问题：


代码如下:

<html>
<head>
<title>JQuery学习</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var oBtnTest = $("#btnTest");
    oBtnTest.click(function(){
        oBtnTest.disabled = true;   
        var oResult = $("#result");
        oResult.html("loading").css("color","red");
        jQuery.getScript("http://www.jb51.net/test/js.txt",
        function(){           
            oResult.html("name:" + Dylan.name + "<br/>email:" + Dylan.email).css("color","black");           
            oBtnTest.disabled = false;           
        });        
    });   
});   
</script>
</head>
<body>
<button id="btnTest">BtnTest</button>
<div id="result"></div>
</body>
</html>

远程服务器端js.txt中的内容为:
var Dylan= {name:"Dylan",email:Dylan@163.com}

笔者感觉这种方式更加简洁。呵呵。当然，读者可以根据实际情况，任意选择实现方式。

怎么样，其实很简单吧，我看到过很多人不愿意去正视ajax所存在的技术瓶颈，其实AJAX更应该是Ajax而不是AJAX，突出第一个A是想强调其实AJAX发扬的是一种异步传输的方法，而不是具体到底使用了哪种技术。

其实，在json数据格式之后，有一种更牛X的“jsonp”，也可以实现ajax的跨域通信。其实jsonp不是一种数据格式，只是对我介绍的第二种方式做了改进。从jQuery1.2 版本开始，jQuery 拥有对 JSONP 回调的本地支持。

赞 (0)

相关推荐

  • 跨域请求之jQuery的ajax jsonp的使用解惑

    跨域请求之jQuery的ajax jsonp的使用解惑

    直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

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

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

  • 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创建动态脚

  • Ajax和跨域问题深入解析

    什么是ajax Ajax(Asynchronous JavaScript and XML),是一种可以向服务器请求额外的数据并且无需刷新页面的技术,ajax的出现带来了更好的用户体验. Ajax的核心就是XMLHttpRequest(XHR)对象.XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.可以使用XHR对象获取新数据,通过DOM将新数据插入到页面.虽然名字中包含XML,但是ajax通信和数据格式无关;这种技术就是可以不用刷新就从服务器获取数据,但是不一定是XML数据,也可以是js

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

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

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

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

  • Ajax实现跨域访问的三种方法

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号) www  (子域名) google (主域名) 8080 (端口号) script/jquery.js (请求的地址) * 当协议.子域名.主域名.端口号中任意一各不相同时,都算不同的"域". * 不同的域之间相互请求资源,就叫"跨域". 比如:http://www.abc.com/index.

  • 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()方法

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

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

  • 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:

随机推荐