完美解决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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
JS+CSS实现动态时钟
Feb 19 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
js玩一玩WSH吧
2007/02/23 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
vue实现自定义多选按钮
2020/07/16 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Django框架封装外部函数示例
2019/05/28 Python
python模块常用用法实例详解
2019/10/17 Python
python装饰器代替set get方法实例
2019/12/19 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
红色故事演讲稿
2014/05/22 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年药房工作总结
2014/11/22 职场文书
新年寄语2016
2015/08/17 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
优秀大学生申请书
2019/06/24 职场文书