html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>使用JSONP解决跨域请求</title> <script type="text/javascript" src="http://192.168.118.64:8989/htmlunit/jquery-1.7.1.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://192.168.118.64:8989/htmlunit/jsonp/ts.json?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(json){ //alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。'); $("#price").text(json.price); $("#tickets").text(json.tickets); }, error: function(){ alert('fail'); } }); }); </script> </head> <body> <div> <h3>机票信息</h3> <div>票价:<span id="price">查询中...</span></div> <div>余票:<span id="tickets">查询中...</span></div> </div> </body> </html>
服务器代码:
package servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 这个是个JSONP的演示的例子,用于解决跨域请求的问吧。 * @author hc24 * */ public class TestServlet extends HttpServlet { /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //response.setContentType("text/html"); PrintWriter out = response.getWriter(); /* 得到回调的方法名 */ String methodName=request.getParameter("callback"); /* 得到参数 */ String flightNo=request.getParameter("code"); /*下面应该是根据参数查询价格和座位数 */ try { Thread.sleep(3000); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } float price=1780.00f; int tickets=5; StringBuilder sb=new StringBuilder(); sb.append(methodName+"({"); sb.append("code:\""+flightNo+"\","); sb.append("price:"+price+","); sb.append("tickets:"+tickets+""); sb.append("})"); out.write(sb.toString());//返回到客户端 out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } }
相关推荐
PHP AJAX JSONP实现跨域请求使用范例
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
基于jQuery的jsonp ajax跨域请求,
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
ajax跨域CORS方案 JSONP跨域请求方案.zip
基于ajax方式的跨域请求jsonp的前后台代码
jsonp跨域请求数据实现手机号码查询实例分析.docx
本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧
该资源为ASP.NET网站开发技术中使用Ajax进行跨域请求时利用JSONP方案解决浏览器同源策略限制的源码,比较简单,仅供参考
前端使用jquery,datatype采用jsonp,服务端采用C#编写的webService
使用JSONP完成HTTP和HTTPS之间的跨域访问
JavaScript安全性不允许POST的跨域请求(GET可以与服务器配合使用JSONP,有些勉强)。SOAP只能使用POST请求,所以无法直接跨域。一般的解决方案是使用服务器代理(由同域服务器跨域请求后返回),但导致过于复杂...
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript callback...下面这篇文章主要给大家介绍了关于使用jquery的jsonp如何发起跨域请求及其原理的相关资料,需要的朋友可以参考下。
js解决跨域请求
JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: ...
了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
这里我们使用的是第三方插件jsonp。 github网址:https://github.com/webmodules/jsonp 1、安装 npm install jsonp -S 2、引入 一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的...
第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi
一个用jsonp发送跨域请求的模块,返回一个Promise对象。 安装 $ npm install jsonp - good 参数说明 jsonpG ( { url : 'http://xxxx/xxxx/' , funcName : 'fake' , timeout : 3000 , params : { a : '1' , b :...