完美解决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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
28个JS验证函数收集
Mar 02 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
JavaScript触发器详解
2007/03/10 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python中的Numpy矩阵操作
2018/08/12 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
super关键字的用法
2012/04/10 面试题
生产部统计员岗位职责
2014/01/05 职场文书
会议接待欢迎词
2014/01/12 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
社区工作者演讲稿
2014/05/23 职场文书
毕业生面试求职信
2014/06/23 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
学生检讨书范文
2015/01/27 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
工地材料员岗位职责
2015/04/11 职场文书
庆七一活动简报
2015/07/20 职场文书