完美解决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 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
JsonServer安装及启动过程图解
Feb 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
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
jQuery 表格工具集
2010/04/25 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
js尾调用优化的实现
2019/05/23 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现无证书加密解密实例
2014/10/27 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
《两只鸟蛋》教学反思
2014/02/10 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
银行求职信
2014/05/31 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
大学班干部竞选稿
2015/11/20 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python