关键字：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. mysql force index() 强制索引的使用

    mysql force index() 强制索引的使用 之前跑了一个SQL,由于其中一个表的数据量比较大,而在条件中有破坏索引或使用了很多其他索引,就会使得sql跑的非常慢... 那我们怎么解决呢? ...

  2. Python语言100例

    Python版本:python 3.2.2 电脑系统:win7旗舰 实例来源:python菜鸟教程100例 #!/usr/bin/python # -*- coding: UTF-8 -*- impo ...

  3. Java zip and unzip demo

    目录结构如下: import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import ...

  4. 边工作边刷题：70天一遍leetcode: day 70

    Design Phone Directory 要点:坑爹的一题,扩展的话类似LRU,但是本题的accept解直接一个set搞定 https://repl.it/Cu0j # Design a Phon ...

  5. hdu-5495 LCS(置换)

    题目链接: LCS Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  6. UltraISO制作U盘启动盘安装Win7/10系统攻略

    UltraISO制作U盘启动盘安装Win7/9/10系统攻略 U盘安装好处就是不用使用笨拙的光盘,光盘还容易出现问题,无法读取的问题.U盘体积小,携带方便,随时都可以制作系统启动盘. U盘建议选择8G ...

  7. View （二） 自定义属性 自定义属性的格式详解

    自定义属性格式一共有十种: 1. reference:参考某一资源ID. 2. color:颜色值. 3. boolean:布尔值. 4. dimension:尺寸值. 5. float:浮点值. 6 ...

  8. C#中NULL,"",DBNULL,String.Empty,Convert.IsDBNull()的区别

    C#中的空值的判断较麻烦,不象在VB6中那么简单,这些各种空值的判断和理解对不熟悉的人来说,可能很麻烦,现就我在使用过程中的一点体会和大家共同分享. (1)NULL null 关键字是表示不引用任何对 ...

  9. Android开发EditText属性

    Android开发EditText属性 EditText继承关系:View-->TextView-->EditText EditText的属性很多,这里介绍几个:android:hint= ...

  10. 【Mysql】日期时间格式化

    1.日期转成指定格式:DATE_FORMAT(date, format) 2.int型时间转成指定格式:FROM_UNIXTIME(unix_timestamp,format) 根据format字符串 ...