完美解决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 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
实现无刷新联动例子汇总
May 20 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
JS无缝滚动效果实现方法分析
Dec 21 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
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
js实现小时钟效果
2020/03/25 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
线程同步的方法
2016/11/23 面试题
心理健康教育心得体会
2013/12/29 职场文书
个人贷款承诺书
2014/03/28 职场文书
教师产假请假条
2014/04/10 职场文书
求职自我评价范文100字
2014/09/23 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
工程服务质量承诺书
2015/04/29 职场文书
西柏坡观后感
2015/06/08 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
Python实现信息管理系统
2022/06/05 Python