脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → AJAX跨域问题

完美解决AJAX跨域问题

 更新时间：2013年11月01日 10:11:54   作者：  
我看到过很多人不愿意去正视ajax所存在的技术瓶颈，其实AJAX更应该是Ajax而不是AJAX，突出第一个A是想强调其实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("https://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 回调的本地支持。

您可能感兴趣的文章:

相关文章

  • layui实现数据表格隐藏列的示例

    layui实现数据表格隐藏列的示例

    今天小编就为大家分享一篇layui实现数据表格隐藏列的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 无刷新上传文件并返回自定义值

    无刷新上传文件并返回自定义值

    本文给大家简单分享了一下个人项目中解决无刷新上传文件的方法和示例，有需要的小伙伴可以参考下。
    2015-06-06
  • JavaScript实现修改伪类样式

    JavaScript实现修改伪类样式

    这篇文章主要介绍了JavaScript实现修改伪类样式的方法以及代码实现过程，一起学习参考下吧。
    2017-11-11
  • FusionCharts图表显示双Y轴双(多)曲线

    FusionCharts图表显示双Y轴双(多)曲线

    项目中需要FusionCharts图表显示双Y轴，好像FCF_MSLine.swf不可以这样，只能显示一个Y轴，多条线,找了一下，用MSCombiDY2D.swf可以实现,现在晒出来和大家分享一下
    2012-11-11
  • 微信小程序select下拉框实现源码

    微信小程序select下拉框实现源码

    这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • JavaScript获取当前日期是星期几的方法

    JavaScript获取当前日期是星期几的方法

    这篇文章主要介绍了JavaScript获取当前日期是星期几的方法,涉及javascript中getDay函数获取日期的技巧,需要的朋友可以参考下
    2015-04-04
  • 小程序卡片切换效果组件wxCardSwiper的实现

    小程序卡片切换效果组件wxCardSwiper的实现

    这篇文章主要介绍了小程序卡片切换效果组件wxCardSwiper的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript对象转数组的3种简单方法小结

    JavaScript对象转数组的3种简单方法小结

    在JavaScript中可以通过Object.keys()结合Array.map()、Object.entries()或Object.values()等方法将对象转换为数组,这些方法各有优势,可根据需要灵活选择,需要的朋友可以参考下
    2024-09-09
  • layui-table对返回的数据进行转变显示的实例

    layui-table对返回的数据进行转变显示的实例

    今天小编就为大家分享一篇layui-table对返回的数据进行转变显示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序 调用微信授权窗口相关问题解决

    微信小程序 调用微信授权窗口相关问题解决

    这篇文章主要介绍了微信小程序 调用微信授权窗口相关问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论