关键字: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"的更多相关文章

  1. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  2. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 5种处理js跨域问题方法汇总(转载)

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  4. 5种处理js跨域问题方法汇总

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  5. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  6. 前端Js跨域方法汇总—剪不断,理还乱,是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  7. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  9. 利用JS跨域做一个简单的页面访问统计系统

    其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...

随机推荐

  1. 迅为iTOP-4412核心板调整电压

    本文转自:http://www.topeetboard.com iTOP-4412核心板使用的电源管理芯片是三星专门针对4412研发的S5M8767,8767提供9路BUCK和28路LDO输出,每路电 ...

  2. Excel scientific notation issue

        This is a known issue, you can find more in internet. Excel will treat text(can display with num ...

  3. Linux 系统常用命令汇总(七) 安全设置

     安全设置 分类 命令 选项 注解 安全策略 selinux setenforce number(0,1) 设置selinux状态,0关闭,1开启 getenforce 显示当前selinux状态,e ...

  4. NOIP2008 普及组T1 ISBN号码 解题报告-S.B.S.

    题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如“x-xxx-xxxxx-x”,其中符号“-”就是分隔符(键盘上的减号),最后一 ...

  5. python中的自测语句是什么?

    if __name__ == '__main__': main() 以上

  6. jstat使用

    jstat -gcutil pid 统计gc信息统计.其中最后五项,分别是young gc的次数,young gc的时间,full gc的次数,full gc的时间,gc的总时间.

  7. [转] Linux下防火墙iptables用法规则详及其防火墙配置

    from: http://www.cnblogs.com/yi-meng/p/3213925.html 备注: 排版还不错,建议看以上的链接. iptables规则 规则--顾名思义就是规矩和原则,和 ...

  8. AndroidStudio出现“Plugin is too old, please update to a more recent”问题

    可能原因: 你AS版本不够高....能够更新的话你更新试下,不能更新删了最新的sdk,不要下载4.4以上的版本 解决方法如下 第一种,最简单,但是不推荐这么做 将build.gradle 里的类似 c ...

  9. NOI 1.7编程基础之字符串(35题)

    01:统计数字字符个数 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 输入一行字符,统计出其中数字字符的个数. 输入 一行字符串,总长度不超过255. 输出 ...

  10. 14SpringMvc_在业务控制方法中写入HttpServletRequest,HttpServletResponse等传统web参数(这个知识点知道就好了,不推荐这么去做)

    这篇文章解决的问题是怎么在业务方法里面引入我们熟悉的HttpServletRequest和HttpServletRespon? 答案:这种引入传统的web参数的做法不推荐去做,因为这么做会实行高度耦合 ...