由“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脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...
随机推荐
- Linux Commands intro1
$((expression)) echo $(2+2) :wrong echo $((2+2)) : right echo Front-{A,B,C}-Back Front-A-Back Front ...
- 【Android UI设计与开发】6.底部菜单栏(三)使用Fragment+PopupWindow仿QQ空间最新版底部菜单栏
直接看栗子吧,效果基本实现,界面微调和弹窗的优化,去做的话会很耗时说,暂时就酱紫了.上传效果动态图太大了,直接手机截图的效果图如下: 至于代码的实现主要就是自定义的菜单栏,和用 PopupWindow ...
- 伪多项式时间算法Pseudo-polynomial Algorithms-----geeksforGeek 翻译
原创翻译加学习笔记,方便国人学习算法知识! 原文链接http://www.geeksforgeeks.org/pseudo-polynomial-in-algorithms/ 什么是伪多项式? 当一个 ...
- 移动开发js库Zepto.js应用详解
从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛! ...
- Codeforces 402B --耻辱的一题
这题昨天晚上花了我1个小时50多分钟来搞,都没有搞定..后来看别人代码,直接暴力枚举第一个数的值来做..最多1000*1000的复杂度.当时怎么就没想到呢?还有为啥我的方法不对呢.. 暴力方法代码: ...
- ssm中使用hibernate-validator验证BO
目前比较流行的验证做法:前端jquery-form-validate + 后端hibernate-validate 在pom中添加相关jar: <!-- use hibernate-valida ...
- [Editor]Unity Editor类常用方法
Editor文档资料 Unity教程之-Unity Attribute的使用总结:http://www.unity.5helpyou.com/3550.html 利用unity3d属性来设置Inspe ...
- 一款免费好用的正则表达式工具:Regex Match Tracer
推荐分享:一款免费好用的正则表达式工具:Regex Match Tracer v2.1.5 free version 下载地址:Regex Match Tracer
- java 15-4 集合的专用遍历工具 迭代器
Iterator iterator():迭代器,集合的专用遍历方式 A:Object next():获取元素,并移动到下一个位置. 有时候会出现这样的错误: NoSuchElementExceptio ...
- 转: CentOS 6.4安装pip,CentOS安装python包管理安装工具pip的方法
from: http://www.linuxde.net/2014/05/15576.html CentOS 6.4安装pip,CentOS安装python包管理安装工具pip的方法 2014/05/ ...