跨域请求之jsonp
2015-04-14 17:19
267 查看
1.什么是跨域请求:
服务器A上的一个页面,要请求服务器B上的一个处理程序,这就叫做跨域请求
本次的测试页面为:
处理程序kimhandler.ashx,如下:
http://qxw1192430265.my3w.com/kimhandler.ashx,代码如下
另一张处理程序handler.ashx如下:
http://qxw1192430265.my3w.com/handler.ashx,代码如下
2.Ajax无法实现跨域请求
查看监视器,发现没有返回任何请求报文体
![](https://images0.cnblogs.com/blog/708108/201504/141718456822704.png)
3.使用script标签,可以实现跨域请求
测试代码如下:
查看监视器,可以看到,有返回请求报文体
![](https://images0.cnblogs.com/blog/708108/201504/141718466514775.png)
在用json格式看下
![](https://images0.cnblogs.com/blog/708108/201504/141718476984588.png)
4.使用js方式,在浏览器端,读取响应是数据
测试代码如下,注意换了一个处理程序
通过后台代码,可知
![](https://images0.cnblogs.com/blog/708108/201504/141718498399201.png)
然后在监视器上看看
![](https://images0.cnblogs.com/blog/708108/201504/141718506046100.png)
![](https://images0.cnblogs.com/blog/708108/201504/141718514173686.png)
发现在浏览器端,弹出了kim还有18
5.使用Jq来实现跨域请求(内部原理就是为我们创建了一个script标签)
代码如下
点击按钮后,可以看到效果,再看下监视器
![](https://images0.cnblogs.com/blog/708108/201504/141718527763470.png)
服务器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>
查看监视器,发现没有返回任何请求报文体
![](https://images0.cnblogs.com/blog/708108/201504/141718456822704.png)
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>
查看监视器,可以看到,有返回请求报文体
![](https://images0.cnblogs.com/blog/708108/201504/141718466514775.png)
在用json格式看下
![](https://images0.cnblogs.com/blog/708108/201504/141718476984588.png)
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>
通过后台代码,可知
![](https://images0.cnblogs.com/blog/708108/201504/141718498399201.png)
然后在监视器上看看
![](https://images0.cnblogs.com/blog/708108/201504/141718506046100.png)
![](https://images0.cnblogs.com/blog/708108/201504/141718514173686.png)
发现在浏览器端,弹出了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>
点击按钮后,可以看到效果,再看下监视器
![](https://images0.cnblogs.com/blog/708108/201504/141718527763470.png)
相关文章推荐
- 跨域请求解决方案之--JSONP
- jsonp的底层实现原理 跨域请求
- TamperMonkey脚本跨域请求与JSONP
- 通过JSONP实现ajax跨域请求java接口实现
- jsonp跨域请求
- 跨域请求之JSONP 二
- jsonp跨域请求的几种方式
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- 使用JSONP跨域请求数据
- Ajax jsonp 跨域请求实例
- JSONP跨域请求数据报错 “Unexpected token :”的解决办法
- AJAX 跨域请求 - JSONP获取JSON数据
- AJAX 跨域请求 - JSONP获取JSON数据
- 用JSONP实现跨域请求
- AJAX 跨域请求 - JSONP获取JSON数据
- 用JSONP实现跨域请求
- jsonp实现浏览器跨域请求 解决同源策略问题
- 通过jsonp获取json数据实现AJAX跨域请求
- Jsonp完成js跨域请求
- 跨域Ajax请求(jQuery JSONP MVC)