从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的缘故。

3. JQuery解决方法

页面代码:

<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("http://www.test.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跨域解决方案的更多相关文章

  1. asp.net web api2.0 ajax跨域解决方案

    asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种.  一,ASP.NET Web API支持JSONP,分两种 1, ...

  2. Ajax跨域解决方案大全

    题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨 ...

  3. 【PHP】Ajax跨域解决方案 、jsonp、cors

    参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...

  4. 前端Ajax跨域解决方案

    业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...

  5. [妙味Ajax]第三课:AJAX跨域解决方案:JSONP

    知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...

  6. ajax跨域解决方案(服务端仅限java)

    楼主前端知识菜鸟,高手勿喷,在此记录工作中遇到的问题及解决方案,大神请滤过 方法1.jsonp(js客户端ajax请求参数方式设置) 方法2.服务端接口设置: HttpServletResponse ...

  7. ajax跨域解决方案2

    配置文件添加: <system.webServer>       <httpProtocol>        <customHeaders>          &l ...

  8. 基于java过滤器实现的ajax跨域解决方案

    http://software.dzhuvinov.com/cors-filter-configuration.html

  9. Ajax跨域问题及解决方案

    目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP解决 小结 复现Ajax跨域问题 ...

随机推荐

  1. 传智播客JavaWeb day11--事务的概念、事务的ACID、数据库锁机制、

    1. 什么叫做事务? 2.默认情况下每一条sql语句都是一个事务,然后自动提交事务  ps:如果想多条语句占一个事务,则可以手动设置SetAutoCommit为false 3.关键字 start tr ...

  2. 命令行模式 svn版本管理

    linux 下svn 在命令行模式下的操作安装完svn服务并配置了环境变量之后,要创建一个存放工厂(项目)的仓库repositories用于版本控制(比如我的repositories的路径为 path ...

  3. 快速上手RaphaelJS--Instant RaphaelJS Starter翻译(二)

    (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter2 ...

  4. Matlab从一系列图片导出AVI视频,导出GIF动图

    平台:Win7,Matlab 2014a 从一系列图片导出AVI视频的M代码如下: clear all; % 清除变量 % 官方示例,命令窗口输入“doc VideoWriter” writerObj ...

  5. CLR via C# 3rd - 06 - Type and Member Basics

    1. Different Kinds  of Type Members        A type can define zero or more of the following kinds of ...

  6. 安装Fedora 24后必要的设置

    安装Fedora 24后必要的设置 导读 Fedora 是一个 Linux 发行版,是一款由全球社区爱好者构建的面向日常应用的快速.稳定.强大的操作系统.它允许任何人自由地使用.修改和重发布,无论现在 ...

  7. Lae程序员小漫画(二),仅供一乐

    Lae软件开发,快乐程序员!

  8. python 获取html源代码里标签之间的文本用get_text()

    例: 输出<span class="w-txt">分享</span>中的文本"分享" contents = bsObj.find_all ...

  9. wince5代码整理

    BAT文件语法: @REM 这是注释标识与REM的区别就是在echo on时REM的注释也会显示出来 @REM 设置变量BSP_SMDK2416为2 set BSP_SMDK2416=2 @REM 设 ...

  10. PHPExcel 导出时乱码

    今天遇到了个奇怪的问题..猜测应该是因为php文件的编码造成的,但是没有解决办法. 问题是,用PHPEXCEL导出文件的时候,相同的代码在一个文件中可以导出,在另一个文件中却不行.. 最后没有办法,只 ...