jsonp跨域请求实现示例
网上看了很多关于jsonp的资料,发现在本机运行后实现不了,有的是有错漏,有的是说的比较含糊,接合自己的情况,整了一个可运行的示例;
前言:
ajax请求地址:http://192.168.1.102:8080/carop/jsonp
服务端要返回的jsonp字符串:jsonpCallback({"name":"刘德华","电话":"17688888888"})
jsonp写法,写法上可以理解成一个javascript函数的执行,例如alert("hello world")会弹出hello world的窗口,再例如alert({"name":"刘德华"})会弹出[object Object]的窗口。(注意这里参数两端没加双引号,它是一个有属性的对象而不是一个字符串)
那么本示例的jsonp中,可以将jsonpCallback理解成函数名,{"name":"刘德华","电话":"17688888888"}这个对象是这个函数执行时所要传递的参数。
客户端:
$.ajax({
type: "get",
async:false,
url: "http://192.168.1.102:8080/carop/jsonp",
dataType: "jsonp",
jsonpCallback:"jsonpCallback",
success: function(data){
alert(data.name+"\n "+data.tel);
}
});
其他的ajax方法比如getjson亦可,写法上有区别,这里仅采用一种方法。
说明:jsonpCallback:"jsonpCallback",前一个ajax参数表示要执行的函数,后面的”jsonpCallback“,这个是服务器返回jsonp的javascript函数名。(网上有相关资料这个参数写的是jsonp而不是jsonpCallback,经实际测试要写成jsonpCallback,jquery版本1.8,所测试浏览器为火狐和edge)
服务端
servlet控制器层直接返回jsonp;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/jsonp")
public class jsonp extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
//System.out.println("进入jsonp");
resp.setContentType("text/json;charset=utf-8");
String json="{\"name\":\"刘德华\",\"tel\":\"17688888888\"}";
String jsonp="jsonpCallback("+json+")";
PrintWriter pw=resp.getWriter();
System.out.println(jsonp);
pw.print(jsonp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(req, resp);
}
}
jsonp跨域请求实现示例的更多相关文章
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- Django学习---jsonp跨域请求
jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...
- jsonp跨域请求响应结果处理函数(python)
接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...
- 原生JavaScript封装的jsonp跨域请求
原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...
- 轻松搞定JSONP跨域请求
一.同源策略 要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑,当前域不能访问其他域的东西. ...
- JSONP 跨域请求 - 获取JSON数据
如何用原生方式使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数. ...
- jsonp跨域+ashx(示例)
前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...
随机推荐
- P1838 三子棋I
题目描述 小a和uim喜欢互相切磋三子棋.三子棋大家都玩过是吗?就是在九宫格里面OOXX(别想歪了),谁连成3个就赢了. 由于小a比较愚蠢,uim总是让他先. 我们用9个数字表示棋盘位置: 123 4 ...
- codeforces415D. Glad to see you!(交互)
题意 交互题. 有$k$个值域为$[1, n]$的数. 请在不超过$60$次询问内找出其中的两个数. 每次询问形式为1 x y 交互库会返回$|x - a| <= |y - b| ? " ...
- canvas防画图工具
<style> body { background: black; text-align: center; } #cans { background: white; } < ...
- vb6如何调用delphi DLL中的函数并返回字符串?
1,问题描述 最近发现vb6调用delphi DLL中的函数并返回字符串时出现问题,有时正常,有时出现?号,有时干脆导致VB程序退出 -- :: 将金额数字转化为可读的语音文字:1转化为1元 ???? ...
- 洛谷 P1618 三连击(升级版)
题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数的比例是A:B:C,试求出所有满足条件的三个三位数,若无解,输出“No!!!”. //感谢黄小U饮品完善题意 输入输出格 ...
- PHP一句话后门过狗姿势万千之理论篇
写在前面: 过狗相关的资料网上也是有很多,所以在我接下来的文章中,可能观点或者举例可能会与网上部分雷同,或者表述不够全面. 但是我只能说,我所传达给大家的信息,是我目前所掌握或者了解的,不能保证所有人 ...
- ElasticSearch的常用方法
关键词 cluster 集群 shards 索引分片 replicas 索引的副本 recovery 数据重新分布 gateway 索引的持久化方式 Transport 交互 ...
- linux 搜索文本
find -type f -name '*.php'|xargs grep '127.0.0.1' 搜索所有.php 内容 127.0.0.1 转自:http://www.cnblogs.com/w ...
- eclipse下svn的分支与合并指南 - 更新版
http://wenku.baidu.com/link?url=ul5vzBHZpHgzENp46RQwTYrkCUYLeVg9TuhmPM_qisR1BGzp6Qca7onhS-SOzwDYuYdA ...
- 记录xerces使用(VS2017 C++)
1.编译xerces,获得dll文件和lib文件 2.将dll文件和lib文件拷贝到使用xerces的工程目录里面去 3.配置VS2017 C/C++ -> All Options --&g ...