完美解决AJAX跨域问题


Posted in Javascript onNovember 01, 2013

从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://3water.com/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 回调的本地支持。

Javascript 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
js 内存释放问题
Apr 25 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
javascript中创建对象的几种方法总结
Nov 01 #Javascript
如何学习Javascript入门指导
Nov 01 #Javascript
js动态设置鼠标事件示例代码
Oct 30 #Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 #Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 #Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 #Javascript
javascript实现的DES加密示例
Oct 30 #Javascript
You might like
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
python生成验证码图片代码分享
2016/01/28 Python
Python打包可执行文件的方法详解
2016/09/19 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python----数据预处理代码实例
2019/03/20 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
C++面试题目
2013/06/25 面试题
通信工程毕业生求职信
2013/11/16 职场文书
给儿子的表扬信
2014/01/15 职场文书
跳槽求职信范文
2014/05/26 职场文书
外贸业务员求职信
2014/06/16 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
房产授权委托书范本
2014/09/22 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
科技活动总结范文
2015/05/11 职场文书