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. redis学习-简介

    1. Redis 简介 1.1 Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Red ...

  2. 【Codeforces 924C】Riverside Curio

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 设第i天总共的线数为t[i] 水平线上线数为m[i]是固定的 水平线下的线数设为d[i] 则d[i]+m[i]+1=t[i] 也就是说问题可以 ...

  3. git远程上传文件

    [第一步]建立先仓库 第一步的话看一般的提示就知道了,在github新建一个repository(谷歌可以解决),都是可视化的界面操作,所以难度不大.或者看这里:https://help.github ...

  4. 关于使用CELERY的一点心得

    使用也有大半年了.稳定性没话说啊. 但有一个坑,是我以前没注意的,记录下来. 就是本来一个任务是可以异步并行执行的..但如何需要CELERY的执行结果来作判断的话,就会变得异步串行的. 这要值得注意. ...

  5. java JDBC 连接数据库查询数据与直接使用sql的疑问

    JDBC 封装连接是好的前提: SystemAuthorizingRealm c = new SystemAuthorizingRealm(); conn = c.getConnection(); / ...

  6. iOS-UITextView-文本输入视图的使用

    #import "ViewController.h" @interface ViewController ()<UITextViewDelegate> { UIView ...

  7. js上传文件

    一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...

  8. Ubuntu12.04.3LTS安装Oracle Java 7

    今天在ubuntu 12.04 LTS 上安装Matlab时总是出错,显示拷贝jar包(cp "xx.jar")出现错误,在网上搜索了一下发现原来是没有安装java.自己打算安装o ...

  9. 运行Java -jar somefile.jar时发生了什么(二)

    (6)Java.c中的LoadMainClass 位置jdk/src/share/bin/java.c 该方法负责载入main函数所在的类. 该方法首先载入sun.launcher.LauncherH ...

  10. WCF问题集锦:ReadResponse failed: The server did not return a complete response for this request.

    今日.对代码进行单元測试时.发现方法GetAllSupplyTypes报例如以下错误: [Fiddler] ReadResponse() failed: The server did not retu ...