1.什么是跨域请求：

服务器A上的一个页面，要请求服务器B上的一个处理程序，这就叫做跨域请求

本次的测试页面为：

处理程序kimhandler.ashx，如下：

http://qxw1192430265.my3w.com/kimhandler.ashx，代码如下

%@ WebHandler Language="C#" Class="KimHandler" %>

using System;

using System.Web;

public class KimHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context)

    {

        string msg = "{\"name\":\"kim\",\"gender\":\"男\",\"age\":24}";

        context.Response.Write(msg);

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

另一张处理程序handler.ashx如下：

http://qxw1192430265.my3w.com/handler.ashx，代码如下

<%@ WebHandler Language="C#" Class="Handler" %>

using System;

using System.Web;

public class Handler : IHttpHandler {

    public void ProcessRequest (HttpContext context)

    {

        string callbackName = context.Request.Params["callbackFun"];

        string msg = callbackName+ "({\"name\":\"kim\",\"age\":\"18\"});";

        context.Response.Write(msg);

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

2.Ajax无法实现跨域请求

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script>

        var requestUrl = "http://qxw1192430265.my3w.com/kimhandler.ashx";

        window.onload = function () {

            document.getElementById("btnAjax").onclick = function() {

                var xhr = new XMLHttpRequest();

                xhr.open("get", requestUrl, true);

                xhr.setRequestHeader("If-Modified-Since", 0);

                xhr.onreadystatechange = function () {

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        var res = xhr.responseText;

                        alert(res);

                    }

                }

                xhr.send(null);

            }

        }

    </script>

</head>

<body>

    <input type="button" id="btnAjax" value="点击" />

</body>

</html>

查看监视器，发现没有返回任何请求报文体

3.使用script标签，可以实现跨域请求

测试代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="http://qxw1192430265.my3w.com/kimhandler.ashx"></script>

</head>

<body>

</body>

</html>

查看监视器，可以看到，有返回请求报文体

在用json格式看下

4.使用js方式，在浏览器端，读取响应是数据

测试代码如下，注意换了一个处理程序

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script>

        function getData(data) {

            for (var key in data) {

                alert(data[key]);

            }

        }

    </script>

    <script src="http://qxw1192430265.my3w.com/handler.ashx?callbackFun=getData"></script>

 </head>

<body>

</body>

</html>

通过后台代码，可知

然后在监视器上看看

发现在浏览器端，弹出了kim还有18

5.使用Jq来实现跨域请求（内部原理就是为我们创建了一个script标签）

代码如下

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery-1.9.0.js"></script>

    <script>

        var requestUrl = "http://qxw1192430265.my3w.com/handler.ashx";

        window.onload = function () {

            document.getElementById("btnJq").onclick = function() {

                $.ajax(requestUrl, {

                    type: "get", //请求方式

                    dataType: "jsonp",  //数据发送类型

                    jsonp: "callbackFun",  //服务器端接收的参数

                    jsonpCallback: "fun",  //js处理方法

                    success: function () {

                        alert("成功");

                    }

                });

            }

        }

        function fun(data) {

            for (var key in data) {

                alert(data[key]);

            }

        }

    </script>

</head>

<body>

    <input type="button" id="btnJq" value="Jq按钮" />

</body>

</html>

点击按钮后，可以看到效果，再看下监视器

跨域请求之jsonp的更多相关文章

  1. 跨域请求之JSONP 一

    跨域请求之JSONP 一 跨域请求的方式有很多种, iframe document.domain window.name script XDomainRequest (IE8+) XMLHTTPReq ...

  2. js跨域请求（jsonp）

    jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...

  3. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  4. Ajax+Spring MVC实现跨域请求（JSONP）JSONP 跨域

    JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...

  5. 跨域请求，jsonp

    其实跨域请求,只需要在请求的url后面加上callback=?即可. 提供以下两种获取跨域的ajax的写法,都是基于jQuery.都已经成功使用,兼容做到ie7,(ie6未测试);案例地址来自豆瓣开放 ...

  6. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

  7. Ajax+Spring MVC实现跨域请求（JSONP）(转)

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  8. 搞定所有的跨域请求问题 jsonp CORS

    网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践.   本文解决跨域中的 ge ...

  9. 跨域请求：JSONP

    在JavaScript中,有一个很重要的安全性限制,被称为"同源策略".即JavaScript只能访问与包含它的文档在同一域下的内容.然而,当进行一些比较深入的前端编程的时候,不可 ...

  10. 跨域请求之jsonp的实现方式

    ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在sr ...

随机推荐

  1. spring cloud feign 坑

    feign是啥? 很多人可能对于feign 不是很熟悉,可以看一下其他网友的实例分享:spring cloud feign简介 如果觉得上面这个比较难的话,还有一个简单入门的:spring cplou ...

  2. -- > define的用法与学习（1）

    在不久之前,我一直不理解为神马大家在做题时经常用define来代替某些函数,或者用来直接定义某些极大的变量.It is not until today that I understand why it ...

  3. memory management in oracle 11G R2

    When we talking about memory management in Oracle, we are refering to SGA and PGA. The management me ...

  4. v$log and v$logfiles

    v$log has one row for each group. v$logfile has one row for each file. There is a status column for ...

  5. heap实现

    //STL提供的是Max heap,使用vector作为底部容器 //push_heap算法:首先将元素放到堆所对应的数组的末端,然后从该节点开始向上调整, //若当前结点键值比父结点大,则兑换位置, ...

  6. Linux内核之于红黑树and AVL树

    为什么Linux早先使用AVL树而后来倾向于红黑树?       实际上这是由红黑树的有用主义特质导致的结果,本短文依旧是形而上的观点.红黑树能够直接由2-3树导出.我们能够不再提红黑树,而仅仅提2- ...

  7. C++学习之动态数组类的封装

    动态数组(Dynamic Array)是指动态分配的.可以根据需求动态增长占用内存的数组.为了实现一个动态数组类的封装,我们需要考虑几个问题:new/delete的使用.内存分配策略.类的四大函数(构 ...

  8. 解析UML九种图

            UML作为设计工具,重在实践上,而这就离不开九种图了.绘图是在看完视频以后进行的,刚開始绘图的时候脑袋懵懵的,不知道该从哪下手,于是就在绘图之前再次的学习了一下这九种图和四种关系.理了 ...

  9. git 入门级使用

    git-book 全局配置:(配置完之后,进行一次密码设置之后,无需再使用密码进行分支管理) git config --global user.name "zhxj" git co ...

  10. IFFT 的实现

    IFFT 的实现 前些天给出了FFT的实现,如今给出IFFT(inverse FFT)的实现 基于IFFT 算法.对FFT的核心程序稍作改动就可以 : ) %%******************** ...