完美解决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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
node.js从数据库获取数据
May 08 Javascript
Validform表单验证总结篇
Oct 31 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 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实现var_export的详细介绍
2013/06/20 PHP
教你如何使用php session
2013/10/28 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
javascript globalStorage类代码
2009/06/04 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
Python 元类使用说明
2009/12/18 Python
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
如何在python中执行另一个py文件
2020/04/30 Python
Python reduce函数作用及实例解析
2020/05/08 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
建筑工地宣传标语
2014/06/18 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
六年级学生期末评语
2014/12/26 职场文书
担保贷款承诺书
2015/04/30 职场文书
python四种出行路线规划的实现
2021/06/23 Python