跨域请求之jsonp

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>

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

image

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>

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

image

在用json格式看下

image

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>

通过后台代码，可知

image

然后在监视器上看看

image

image

发现在浏览器端，弹出了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>

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

image

posted @ 2015-04-14 17:19  Kimisme  阅读(917)  评论(0)  编辑  收藏  举报