由“js跨域”想到"AJAX也不一定要XMLHttpRequest"
关键字:jsonp
jsonp的原理:同源约束限制了js脚本的跨域访问,但是<script>和<iframe>的src标签引用的js文件(只要响应正文是符合js语法的文本即可,不一定是js文件),没有限制。
简述:
浏览器端定义callback函数,名字可以随意,暂且把它就叫callback,然后把改名字传给跨域(刚好可以跨域,也可以是同域,即实现了非XMLHttpRequest也可以ajax),
服务器的响应正文,是callback函数的调用,注意整个正文都需要符合js语法,这样巧妙的实现了跨域。
上代码,自己写的demo,在别人的代码上有改进:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
var url = "http://www.a.com:8065/Handler1.ashx?c=callback"; //www.a.com本系统目录的hosts中配置下即可,映射到127.0.0.1
function p(src) {
//参数r是避免ie浏览器的缓存,在IE中如果短时间请求相同的url,不会从服务器读取,而是从缓存读取
var u = src + "&r=" + parseInt((Math.random() * 100000000000000000));
var d = document.createElement("script");
d.setAttribute("type", "text/javascript");
d.src = u;
document.body.appendChild(d);
} function callback(d) {
document.getElementById("e").innerHTML = d;
} window.onload = function () {
p(url);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>test
<span id="e"></span>
<input type="button" value="重新请求" title="重新请求" onclick="p(url)" />
</div>
</form>
</body>
</html>
www.a.com:8066的handler1.aspx.cs的代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace WebApplication1
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/javascript";//该值不影响结果
var c=context.Request["c"];
context.Response.Write(c + "('" +Guid.NewGuid().ToString()+ "')");//注意传给callbak函数的参数,是js语法,所以要加引号
} public bool IsReusable
{
get
{
return false;
}
}
}
}
细节都在注释中说明了
仅此备忘
ps:不能取代XMLHttpRequest的是,post和head等请求
由“js跨域”想到"AJAX也不一定要XMLHttpRequest"的更多相关文章
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 5种处理js跨域问题方法汇总(转载)
1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...
- 5种处理js跨域问题方法汇总
1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- 前端Js跨域方法汇总—剪不断,理还乱,是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- 【js跨域】js实现跨域访问的几种方式
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【前端】【转】JS跨域问题总结
详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...
- 利用JS跨域做一个简单的页面访问统计系统
其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...
随机推荐
- Excel demo in SSIS
需求如下,把异常数据从sqlserver数据库中取出来,然后导入到xls中去,然后再发邮件给用户,把xls作为附件发送. 需要的示例数据表: /* create table abnormaldata( ...
- TFS 与活动目录AD(Active Directory)的同步机制
TFS用户管理机制 TFS系统与企业域服务器用户系统(或本地计算机用户系统)高度集成在一起,使用域服务器验证系统用户的账户和密码,从而在企业中实现单一用户,单点登录.也就是说,TFS系统自身并没有用户 ...
- codeforces 101C C. Vectors(数学)
题目链接: C. Vectors time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- Cookie测试工具小汇
现在很多网站都用到Cookies,特别是用户的登陆以及购物网站的购物车. Cookies 通常用来存储用户信息和用户在某应用系统的操作,当一个用户使用Cookies 访问了某一个应用系统时,Web 服 ...
- MongoDB学习(一)简介
本篇主要简单介绍一下MongoDB数据库. 一.简介 mongoDB是一个开源的,基于分布式的,面向文档存储的非关系型数据库.是非关系型数据库当中功能最丰富.最像关系数据库的. mongoDB由C++ ...
- 验证码生成的c语言库
http://www.open-open.com/lib/view/open1324534929968.html
- 认识实验室信息管理系统(LIMS)
在当今互联网如日中天的大环境下,各种伴随着互联网的产物如p2p,o2o在如火如荼的进行着,吸引了大量的开发人员都涌向了这个行业,所有的技术似乎都在围绕着互联网发展,传统行业软件开发的人气和关注度就相形 ...
- Jdev Run Page 没有反应
从旧电脑把原有的Jdeveloper完整的拷贝至新电脑,且已完整配置JDEV_USER_HOME,JAVA_HOME等环境变量, Run Page报以下错误. [Starting OC4J using ...
- Nginx支持连接数的问题
据网上有人说nginx的配置中: nginx支持的最大连接数与以下因素有关: worker_processes ; events { worker_connections ; } ulimit -a ...
- mysql-5.7.14-winx64免安装版在win10下的详细配置过程
1.配置文件 如果使用mysql的默认配置,在使用的过程中会出现很多问题,如汉字是乱码等. 在mysql的根目录(如:D:\mysql\mysql-5.7.14-winx64\)下,新建配置文件my. ...