完美解决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 创建书签小工具之理论
Feb 25 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
php实现socket推送技术的示例
2017/12/20 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
javascript闭包入门示例
2014/04/30 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
Angular2数据绑定详解
2017/04/18 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
vue debug 二种方法
2018/09/16 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
JS实现简易留言板增删功能
2020/02/08 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
前台文员我鉴定
2014/01/12 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
技校毕业生自荐信
2014/06/03 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
师德承诺书
2015/01/20 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python