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. java List 数组删除元素

    在 java 中,ArrayList 是一个很常用的类,在编程中经常要对 ArrayList 进行增.删.改.查操作.之前在学校时一直认为删除操作是最简单的,现在才越发觉得自己愚蠢.只需要设置好预期条 ...

  2. CF578D. LCS Again

    n<=100000个字符的小写字母串,问用前m<=26个小写字母能拼出多少个和原串lcs=n-1的字符串. 首先把字符串划分成若干个连续相同的段,如aaa|bb|c|dd,然后题目即要求从 ...

  3. JQuery中如何重置(reset)表单(且清空隐藏域)

    由于JQuery中,提交表单是像下面这样的: 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,上网查了一下, ...

  4. iOS消息推送原理和实现总结

    一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图:1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provi ...

  5. Cisco IOU Web Interface ： Web IOU

    https://github.com/dainok http://sns.clnchina.com.cn/space.php?uid=404779&do=blog&id=4298 ht ...

  6. 非常适合新手的jq/zepto源码分析02

    function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPr ...

  7. muduo库源码剖析(一) reactor模式

    一. Reactor模式简介 Reactor释义“反应堆”,是一种事件驱动机制.和普通函数调用的不同之处在于:应用程序不是主动的调用某个API完成处理,而是恰恰相反,Reactor逆置了事件处理流程, ...

  8. Node.js 博客实例（三）添加文件上传功能

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...

  9. C++学习之命名空间

    在C++中,命名空间(namespace)的目的是为了防止名字冲突.每个命名空间是一个作用域,在所有命名空间之外,还存在一个全局命名空间(global namespace),全局命名空间以隐式的方式声 ...

  10. 【转】 vsftp上传文件出现553 Could not create file解决方法

    因工作需要,需要搭建一个ftp服务器,我使用ubuntu 10.04操作系统,下载vsftpdy源代码, 进行了编译,安装,然后按照INSTALL文件,创建了用户等操作.    因为时间比较紧,我采用 ...