完美解决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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
javascript代码简写的几种常用方式汇总
Aug 23 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实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
快速查询Python文档方法分享
2017/12/27 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python小程序实现刷票功能详解
2019/07/17 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
年会主持词结束语
2014/03/27 职场文书
实习生岗位职责
2014/04/12 职场文书
党校学习党性分析材料
2014/12/19 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers