完美解决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的日期选择控件
Oct 27 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 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中++i 与 i++ 的区别
2012/08/08 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Python属性和内建属性实例解析
2020/01/14 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
英语教师个人工作总结
2015/02/09 职场文书
民事上诉状范文
2015/05/22 职场文书
执行力心得体会范文
2016/01/11 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
详解pytorch创建tensor函数
2022/03/22 Python