关键字：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. atomic, spinlock and mutex性能比较

    我非常好奇于不同同步原理的性能,于是对atomic, spinlock和mutex做了如下实验来比较: 1. 无同步的情况 #include <future> #include <i ...

  2. jquery/js特效代码总结（一）：tab切换

    jquery实现tab切换: html代码: <ul class="tabs" id="tabs01"> <li><a href= ...

  3. Android配置----Android开发环境搭建

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  4. Update和LateUpdate的区别

    LateUpdate晚于所有Update执行 在圣典里LateUpdate被解释成一句话:LateUpdate是在所有Update函数调用后被调用.这可用于调整脚本执行顺序. 当物体在Update里移 ...

  5. Vector3D - AS3

    Vector3D 类使用笛卡尔坐标 x.y 和 z 表示三维空间中的点或位置.与在二维空间中一样,x 属性表示水平轴,y 属性表示垂直轴.在三维空间中,z 属性表示深度.当对象向右移动时,x 属性的值 ...

  6. JAVA NIO概述（一）：I/O模型

    NIO是jdk1.4加入的新功能,我们一般成为非阻塞IO,在1.4之前,JAVA中的都是BIO(堵塞IO),BIO有以下几个缺点: 没有数据缓冲区,I/O性能存在问题 没有C/C++中channel( ...

  7. ViewPager -- Fragment 切换卡顿 性能优化

    当ViewPager切换到当前的Fragment时,Fragment会加载布局并显示内容,如果用户这时快速切换ViewPager,即 Fragment需要加载UI内容,而又频繁地切换Fragment, ...

  8. Android Studio中提示：Project SDK is not defined

    Android Studio中提示:Project SDK is not defined 2015 年 4 月 1 日 下午 9:04crifan已有2209人围观我来说几句 [背景] 之前用Andr ...

  9. Android的Style的使用

    Style个人理解就是view的一些属性的集合,那么一系列view(例如TextVIew),只要是要该style那么就都有相同的内容,如 文字的大少,颜色等,方便修改 首先最基本的使用,多个textV ...

  10. Redis集群知识解析

    redis集群在启动的时候就自动在多个节点间分好片.同时提供了分片之间的可用性:当一部分redis节点故障或网络中断,集群也能继续工作.但是,当大面积的节点故障或网络中断(比如大部分的主节点都不可用了 ...