详细解密jsonp跨域请求

时间：2021-05-18

1.什么是跨域请求：

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

本次的测试页面为：

处理程序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如下：

<%@ 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:///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>

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


以上所述就是本文的全部内容了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章