JS跨域请求 JSONP B/S全代码
Ajax直接请求普通文件存在跨域无权限访问的问题,
甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
Web页面上调用js文件时则不受是否跨域的影响
(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)
实现原理:
1.客户端html写一个函数,其中形参就是所需要的数据;
2.发送函数名称给服务器,告诉服务端一会需要调用的函数;
3.服务端获取函数名参数,设置编码格式为 text/javascript
4.服务器端打印如 response.getWriter().write("a({id:1})");
客户端代码:
javascript:
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签,设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head,此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
Jquery:
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",
jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>
服务器端代码:
java :
boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
jsonP = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
out.write(");");
}
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace TC.JsonService.Handler
{
/// <summary>
/// FlightHandler 的摘要说明
/// </summary>
public class FlightHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/javascript";
context.Response.Cache.SetNoStore();
string strJson = "localHandler({'code': 'CA1998','price': 1780,'tickets': 5});";
context.Response.Write(strJson);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
参考文章:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
JS跨域请求 JSONP B/S全代码的更多相关文章
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- jquery跨域请求jsonp
服务端PHP代码 header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, ...
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- 浏览器同源策略,跨域请求jsonp
浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
- JS跨域:jsonp、跨域资源共享、iframe+window.name
JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
- 【JS跨域请求】Ajax跨域请求JSONP
前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...
- JS跨域请求之JSONP
在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. JSONP的产生 1.众所周知,Ajax请 ...
- js跨域请求(jsonp)
jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...
随机推荐
- 快速排序算法的C语言实现
#include<stdio.h> int partition(int a[],int low,int high) { int key=a[low]; while(low<high) ...
- Java编写的日历,输入年月,输出这个月的日期与星期
import java.util.Scanner; public class rili { public static void main(String[] args) { for (int g = ...
- 【学习进步之路】-【浏览器兼容】透明背景图IE、360浏览器不兼容
最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记.为了让自己在前端方面学习更有成效,想 ...
- MySQL-InnoDB引擎
InnoDB存储引擎支持事务,其设计目标主要面向在线事务(OLTP)应用,其特点是: 行锁设计,支持外键,并支持类似于Oracle的非锁定读,即默认读取操作不会产生锁,从MySQL5.5.8 开始,I ...
- TP3.2二级导航与高亮显示
闲来无事,记记笔记 二级导航的实现,就是一个二级联动,嗯 先来看看数据库,我喜欢用一个表,表多了就不好玩了 二级代号取一级导航的代号就行了,做个简单的栗子: 代码部分: 看控制器,大头在这: < ...
- 福科田led漫反射灯条生产工序
led漫反射灯条简称透镜灯条,它两个其实是一种产品.下面我来讲讲led漫反射灯条的生产工序.首先介绍的是led漫反射灯条的生产总流程. 一. led漫反射灯条的生产总流程: 1. ...
- 【netlimiter】的使用
说到工具,如果你的netlimiter不能使用了或者使用过程中有问题,那么首先需要想到的是:去官网下载1个最新的版本.[搜不到官网的话,在比较靠谱儿的网站下载1个也能用] netlimiter有中文版 ...
- xcode调试打印QString
xcode调试打印QString xcode内置GDB,在调试工程过程中可以通过print命令打印基本的数据类型,但像QString这样复杂类型就不行了.虽然我们可以在程序代码通过添加Qt的调试打印语 ...
- Entity Framework Core 2.0 全局查询过滤器
不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: http://gunnarpeipman.com/2017/08/ef ...
- SpringMVC详解(三)------基于注解的入门实例
前两篇博客我们讲解了基于XML 的入门实例,以及SpringMVC运行的详细流程.但是我们发现基于 XML 的配置还是比较麻烦的,而且,每个 Handler 类只能有一个方法,在实际开发中肯定是不可能 ...