AJax 跨域问题
从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属性不存在跨域的问题。
举个例子来让大家看得更清楚一点吧:
<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.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的跨域问题:
<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("http://www.jb51.net/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 回调的本地支持。
AJax 跨域问题的更多相关文章
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- Ajax跨域访问wcf服务中所遇到的问题总结。
工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- jquery ajax跨域调用
客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
随机推荐
- BZOJ4519: [Cqoi2016]不同的最小割
Description 学过图论的同学都知道最小割的概念:对于一个图,某个对图中结点的划分将图中所有结点分成 两个部分,如果结点s,t不在同一个部分中,则称这个划分是关于s,t的割.对于带权图来说,将 ...
- js获取屏幕大小
1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...
- 简述unix时间戳
unix时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒. Unix时间戳(英文为Unix epoch, Unix time, POSIX time 或 Unix ti ...
- SpringMVC——接收请求参数和页面传参
Spring接收请求参数: 1.使用HttpServletRequest获取 @RequestMapping("/login.do") public String login(Ht ...
- 【Go语言】错误与异常处理机制
①error接口 Go语言中的error类型实际上是抽象了Error()方法的error接口 type error interface { Error() string } Go语言使用该接口进行标准 ...
- java pio项目使用
一.简介 pio是apache的一个针对microsoft office的一个开源项目. Apache POI - the Java API for Microsoft Documents 官网地址: ...
- Greenplum 生成加分区语句
在使用greenplum中会使用分区表,但同时分区表需要维护分区:比如加分区,这个过程比较痛苦,查询相关资料以后有了相应的解决办法,但是该办法也不是万能的,有诸多限制,关于限制有兴趣的同学可以查看我文 ...
- EmguCV 轮廓分析函数汇总
一.cvApproxPoly 使用多边形逼近一个轮廓,使得顶点数目变少.算法先从轮廓选择2个最远的点,然后将2个连成一个线段,然后再查找轮廓上到线段距离最远的点,添加到逼近后的新轮廓.算法反复迭代,不 ...
- jQuery获取一般处理程序(ashx)的JSON数据
昨天有在开发的软件生产线生产流程,RFID扫描IC卡的数据,当中有用到jQuery获取一般处理程序(ashx)的JSON数据.今有把它写成一个小例子,望需要的网友能参考. 在网站中,创建一个一般应用程 ...
- Apply 与 Call 的用法(简化版)
Javascript中Apply 与 Call 的用法,这里只作简单的入门说明 function human( name, age ){ this.name = name; this.age = ag ...