ajax跨域访问和产生的原因
来源:互联网 发布:什么软件可以做动画 编辑:程序博客网 时间:2024/05/22 03:03
document.domain = "css88.com";var createAjaxIframe={appIframe: function(iframeId, iframeSrc){var iframe = document.createElement("iframe");iframe.src = iframeSrc// "http://css88.com/demo/domain/iframe.html";iframe.id = iframeId;iframe.style.display = "none";if (iframe.attachEvent) {iframe.attachEvent("onload", function(){createAjaxIframe.domainAjax(iframeId);});}else {iframe.onload = function(){createAjaxIframe.domainAjax(iframeId);};}document.body.appendChild(iframe);},domainAjax: function(iframeId){var iframeDom = document.getElementById(iframeId).contentWindow.$;iframeDom.getJSON("http://css88.com/demo/iframe-domain/city.html", function(date){var cityOption = "";for (i = 0; i < date.length; i++) {cityOption += date[i].c_name + "--" + date[i].c_value + "<br />"}$("#test").html(cityOption);});}};createAjaxIframe.appIframe("iframe","http://css88.com/demo/iframe-domain/iframe.html");
使用<script>标签解决ajax跨域:
这个方法是利用<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("http://www.csdn.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}
笔者感觉这种方式更加简洁。呵呵。当然,读者可以根据实际情况,任意选择实现方式。
为什么会产生跨域的问题主要原因是由于js在设计时的同源策略
javascript 同源策略:
同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。这个策略可以追溯到 Netscape Navigator 2.0。
Mozilla 认为两个页面拥有相同的源,如果它们的协议、端口(如果指明了的话)和主机名都相同。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:
URL结果原因
http://store.company.com/dir2/other.html
成功http://store.company.com/dir/inner/another.html
成功https://store.company.com/secure.html
失败协议不同http://store.company.com:81/dir/etc.html
失败端口不同http://news.company.com/dir/other.html
失败主机名不同
在同源策略中有一个例外,脚本可以设置 document.domain
的值为当前域的一个后缀,比如域store.company.com的后缀可以是company.com。如果这样做的话,短的域将作为后续同源检测的依据。例如,假设在 http://store.company.com/dir/other.html
中的一个脚本执行了下列语句:
document.domain = "company.com";
这条语句执行之后,页面将会成功地通过对 http://company.com/dir/page.html
的同源检测。而同理,company.com
不能设置 document.domain
为 othercompany.com
.
- ajax跨域访问和产生的原因
- ajax产生乱码的原因整理
- ajax 提交数据产生乱码的原因
- 死锁和产生的原因
- 跨域问题的产生原因和相应的解决方式
- java defunct产生的原因和解决办法
- 产生RUNT和Giants的原因
- SYSTEM_THREAD_HANDLE_ROUTINE_AT_BAD_IRQL的产生原因和处理方法
- 视频产生马赛克和黑屏的原因- -
- 过拟合产生的原因和预防
- 死锁产生的原因和解决
- 死锁产生的原因和解决办法
- 关于ConcurrentModificationException的产生原因和解决方法
- 死锁产生的原因和必要条件
- 死锁产生的原因和解决方法
- 死锁产生的原因和解决办法
- Android ANR产生的原因和分析
- ajax的跨域访问
- 逆波兰表达式
- C++系列 static用法
- mac 隐藏文件
- VC++网络编程 WINSOCK I/O模型
- VC6不支持模板函数在cpp文件中的实现
- ajax跨域访问和产生的原因
- Future 模式详解(并发使用)
- oracle 表,建表空间,设置管理
- U盘/硬盘装windows原版系统
- java文件路径之疑惑
- Flyweight Pattern(享元模式)
- extjs namespace
- extjs bbar 居中
- extjs4 多个panel 列布局