jQuery的ajax跨域实现
今天有人问我跨域ajax请求是否可以发送,之前没接触过此类问题,没答上,后来查了下,以下备忘。
我在本地建了三个站点,并设置了host文件模拟跨子域和跨全域
coolkissbh.com
blog.coolkissbh.com
coolkiss.com
一 、ajax 跨域调用会有什么问题
coolkissbh.com下页面使用jquery的$.get调用blog.coolkissbh.com页面
跨域请求,IE 7和8下报 access denied错误
IE 6.0 则弹出 this page is accessing information that is not under its control. this poses a security risk.do you want to continue?提示框
firefox 没报错,但是不会做出请求
二、ajax跨域实现方法
1、跨子域实现ajax
要求:实现coolkissbh.com的页面 异步请求 blog.coolkissbh.com下的页面
实现方法:借助iframe,通过设置iframe的src属性,嵌入blog.coolkissbh.com下的一个页面,比如AjaxProxy.aspx,然后由该页面去请求Ajax
AjaxProxy请求完毕后,通过parent对象把返回的数据回传给coolkissbh.com的主页面。因此,真正的异步请求还是发生
在blog.coolkissbh.com的域名下
注意:通过这种方法实现的跨子域ajax请求,需要在coolkissbh.com的请求页面以及AjaxProxy.aspx页面中设置同样的域名,也就是
document.domain = "coolkissbh.com";
注意:关于设置domain的问题,如果是跨全域,使用上面方法时候,firefox下会提示
Illegal document.domain value" code: "1009的错误,因此跨全域只能使用第二种方法
处理返回的数据:
AjaxProxy.aspx将ajax返回的数据保存到一个全局变量中,coolkissbh.com通过setInterval定时去判断iframe的页面是否加载完成
如果加载完成,则获取AjaxProxy.aspx的全局变量值。然后再做其它处理。
这里有个问题:我原来是打算在AjaxProxy.aspx的ajax请求完成后,调用parent的方法,同时将数据返回,但是在IE下,点击第一次时候
就会出现“permission denied”的错误,再次点击就正常了。在firefox下就没有问题,不知道是什么原因。
//跨子域
var intID;
document.domain = "coolkissbh.com";
RequestAjax = function () {
var obj = $("#crossDomain"); obj.attr("src", "http://blog.coolkissbh.com/AjaxProxy.aspx?t=" + Math.random()); } handleData = function () {
if (window.frames['crossDomain'].document.readyState == "complete") {
alert(window.frames['crossDomain'].ajaxReturnData);
clearInterval(intID);
}
} handleData2 = function (data) {
alert(data);
}
2,跨全域实现ajax
要求:实现coolkissbh.com的页面异步请求coolkiss.com下的页面
实现方法:上面提到跨全域不能通过设置domain方法来实现。但是可以使用script标签来实现,通过设置script标签的src属性为coolkiss.com域名
下的一个页面,同时将callback函数传到该页面中,例如:
//跨全域
RequestAjax_CrossSite = function () {
var obj = $("#crossSitePage");
obj.attr("src", "http://blog.coolkissbh.com/CrossSite.aspx?callback=handleData3");
} handleData3 = function (data) {
$("#ResponseData").html(data);
}
CrossSite.aspx返回一个字符串,将返回的数据回传给callback,执行回调函数,实现ajax,例如:
Response.Clear();
Response.Write(string.Format("{0}('{1}')", Request["callback"], responseData));
Response.End();
注意:这种方法同样可以用于处理跨子域ajax的问题,但是就无法像jquery那样获取ajax调用的各个状态
3,通过jquery的jsonp实现跨域ajax,其实原理跟第二种方法是一样的,支持跨全域和子域
jquery 1.2 后添加了对跨域ajax的调用,也就是$.getJSON 函数
调用方法如下:
下面是coolkissbh.com下的页面
RequestAjax_JSONP = function() {
var obj = $("#crossSitePage");
$.getJSON("http://coolkiss.com/CrossSite.aspx?callback=?&t=" + Math.random(), function(data) {
//alert(data);
$("#ResponseData").html(data.content);
});
}
coolkiss.com后台处理代码,将一个json对象传递给callback:
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadData_JSONP();
}
}
protected void LoadData_JSONP()
{
string responseData = "{content:\"hello world from coolkiss.com\"}";
if (Request["callback"] != null && !string.IsNullOrEmpty(Request["callback"]))
{
Response.Clear();
Response.Write(string.Format("{0}({1})", Request["callback"], responseData));
Response.End();
}
}
}
callback=? 其中?会自动替换为function(data)函数。
出处:http://www.cnblogs.com/ajunForNet/p/4167848.html
jQuery的ajax跨域实现的更多相关文章
- JQuery的Ajax跨域请求的
JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的 ...
- PHP+JQuery实现ajax跨域
jQuery实现ajax跨域 1.dataType:'jsonp'2.type: 'get'3.把要传的参数以url方式传出去 url:'http://gameapi.feiliu.com/lqzg ...
- JQuery实现ajax跨域
AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...
- jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...
- JQuery的Ajax跨域请求原理概述及实例
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...
- [转载]JQuery的Ajax跨域请求的解决方案
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- jQuery的ajax跨域 Jsonp原理
1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...
- JQuery的Ajax跨域请求的解决方式
今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...
随机推荐
- Spring Boot 中修改端口和上下文路径
通过修改application.properties内容来改变访问的端口号和上下文路径(很简单!) spring.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.vi ...
- HTTP Message Handlers in ASP.NET Web API
https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/http-message-handlers A message ha ...
- Vue-深入-1
1.关于vue get setVue 不能检测到对象属性的添加或删除 把一个普通 Javascript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object. ...
- Hibernate常见优化策略
① 制定合理的缓存策略(二级缓存.查询缓存). ② 采用合理的Session管理机制. ③ 尽量使用延迟加载特性. ④ 设定合理的批处理参数. ⑤ 如果可以,选用UUID作为主键生成器. ⑥ 如果可以 ...
- JAVA 多线程轮流打印ABC
采用Thread+Semaphore实现,思路很简单 import java.io.IOException; import java.util.concurrent.Semaphore; public ...
- CSS设置小技巧
水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...
- python 爬虫004-使用urllib2与正则表达式扒取糗事百科新鲜页首页帖子
面向过程的方式 #!/usr/bin/env python # -*- coding: utf-8 -*- import urllib2 import sys import re import os ...
- Docker 应用实例
Docker安装Nginx 方法一.通过 Dockerfile构建 创建Dockerfile 首先,创建目录nginx,用于存放后面的相关东西. runoob@runoob:~$ mkdir -p ~ ...
- 四十八 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能
Django实现搜索功能 1.在Django配置搜索结果页的路由映射 """pachong URL Configuration The `urlpatterns` lis ...
- MySQL乱码问题及字符集实战
mysql> create database oldboy;Query OK, 1 row affected (0.01 sec) mysql> mysql> mysql> s ...