完美解决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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
js仿微博动态栏功能
Feb 22 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
Dojo 学习要点
2010/09/03 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
利用Python开发实现简单的记事本
2016/11/15 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python pandas模块基础学习详解
2019/07/03 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
python 解决函数返回return的问题
2020/12/05 Python
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
abstract class和interface有什么区别
2013/08/04 面试题
企业公益活动策划方案
2014/08/24 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
opencv检测动态物体的实现
2021/07/21 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL