完美解决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的用鼠标画出可移动的div
Sep 06 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 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&amp;&amp;mysql)三
2006/10/09 PHP
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php 前一天或后一天的日期
2008/06/28 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
php PDO异常处理详解
2016/11/20 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
新学期家长寄语
2014/01/19 职场文书
网络技术专业求职信
2014/02/18 职场文书
大学应届生的自我评价
2014/03/06 职场文书
端午节演讲稿
2014/05/23 职场文书
党性修养心得体会2016
2016/01/21 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技