完美解决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 break指定标签打破多层循环示例
Jan 20 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php上传excel表格并获取数据
2017/04/27 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
Python打包方法Pyinstaller的使用
2018/10/09 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python3 读取Excel表格中的数据
2018/10/16 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
Python3 集合set入门基础
2020/02/10 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
一套软件测试笔试题
2014/07/25 面试题
促销活动策划方案
2014/01/12 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
房产公证委托书范本
2014/09/20 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
初中班干部工作总结
2015/08/10 职场文书
化工生产实习心得体会
2016/01/22 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python