JQuery+ajax+jsonp 跨域访问

最新推荐文章于 2022-08-04 18:11:10 发布
最新推荐文章于 2022-08-04 18:11:10 发布
阅读量370 收藏
点赞数

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”，可以让网页从别的网域获取资料

一.客户端

Html代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>Insert title here</title>  
    <script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>  
    </head>  
    <script type="text/javascript">  
    $(function(){     
        /*  
        //简写形式，效果相同  
        $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",  
                function(data){  
                    $("#showcontent").text("Result:"+data.result)  
        });  
        */  
        $.ajax({  
            type : "get",  
            async:false,  
            url : "http://app.example.com/base/json.do?sid=1494&busiId=101",  
            dataType : "jsonp",//数据类型为jsonp  
            jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数  
            success : function(data){  
                $("#showcontent").text("Result:"+data.result)  
            },  
            error:function(){  
                alert('fail');  
            }  
        });   
    });  
    </script>  
    <body>  
    <div id="showcontent">Result:</div>  
    </body>  
    </html>

二.服务器端

Java代码  

    import java.io.IOException;  
    import java.io.PrintWriter;  
    import java.util.HashMap;  
    import java.util.Map;  
    import javax.servlet.http.HttpServletRequest;  
    import javax.servlet.http.HttpServletResponse;  
    import net.sf.json.JSONObject;  
    import org.springframework.stereotype.Controller;  
    import org.springframework.web.bind.annotation.RequestMapping;  
      
    @Controller  
    public class ExchangeJsonController {  
        @RequestMapping("/base/json.do")  
        public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
           try {  
            response.setContentType("text/plain");  
            response.setHeader("Pragma", "No-cache");  
            response.setHeader("Cache-Control", "no-cache");  
            response.setDateHeader("Expires", 0);  
            Map<String,String> map = new HashMap<String,String>();   
            map.put("result", "content");  
            PrintWriter out = response.getWriter();       
            JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json  
            String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数  
            out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据  
            out.flush();  
            out.close();  
          } catch (IOException e) {  
           e.printStackTrace();  
          }  
        }  
    }  

Java代码  收藏代码

    import java.io.IOException;  
    import java.io.PrintWriter;  
    import java.util.HashMap;  
    import java.util.Map;  
    import javax.servlet.http.HttpServletRequest;  
    import javax.servlet.http.HttpServletResponse;  
    import net.sf.json.JSONObject;  
    import org.springframework.stereotype.Controller;  
    import org.springframework.web.bind.annotation.RequestMapping;  
      
    @Controller  
    public class ExchangeJsonController {  
        @RequestMapping("/base/json.do")  
        public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
           try {  
            response.setContentType("text/plain");  
            response.setHeader("Pragma", "No-cache");  
            response.setHeader("Cache-Control", "no-cache");  
            response.setDateHeader("Expires", 0);  
            Map<String,String> map = new HashMap<String,String>();   
            map.put("result", "content");  
            PrintWriter out = response.getWriter();       
            JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json  
            String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数  
            out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据  
            out.flush();  
            out.close();  
          } catch (IOException e) {  
           e.printStackTrace();  
          }  
        }  
    }




zpf0918
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用JQuery jsonp实现Ajax跨域请求json数据
05-18
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据
Jquery+jsonp+ajax跨域访问
落夜残阳
12-08 1007
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”，可以让网页从别的网域获取资料。 关于Jsonp更详细的资料请参考http://baike.baidu.com/view/2131174.htm，下面给出例子：   一.客户端 Html代码   >  html>  head>  meta http-equiv="Content-Typ
前后端交互：ajax与jsonp
C56039251的博客
04-02 861
ajax与jsonpajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。同步和异步 现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指...
一个简单的jQuery+AJAX+JSONP解决跨域调用的问题
代码笔记
04-30 310
一个简单的jQuery+AJAX+JSONP解决跨域调用的问题 直接上代码： ashx页面： <%@ WebHandler Language="C#" Class="jsonp" %> using System; using System.Web; public class jsonp : IHttpHandler { public void ProcessReq...
ajax+jsonp
weixin_34329187的博客
06-27 71
AjaxAsynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。...
浅谈JQuery+ajax+jsonp 跨域访问
10-22
本文将详细介绍JQuery、ajax以及jsonp跨域访问的知识。 首先，jQuery作为一个广泛使用的JavaScript库，其提供的ajax方法极大地简化了HTTP通信操作。然而，当尝试通过ajax访问不同域下的资源时，就会遇到跨域限制...
轻松搞定jQuery+JSONP跨域请求的解决方案
10-18
在使用jQuery处理JSONP请求时，可以通过jQuery提供的Ajax方法来实现。而$.getJSON方法可以看作是$.ajax的一个简化版本，专门用于发送GET请求。当调用$.getJSON方法时，会自动在请求的URL中添加callback参数，而该...
jquery+ajax实现跨域请求的方法
03-11
通过上述分析，我们可以总结出jQuery结合Ajax实现跨域请求的过程主要分为两部分：前台的Ajax调用以及后台对于JSONP请求的处理。前台通过设置`dataType`为`jsonp`，并通过`jsonp`选项指定一个回调函数名称，使得Ajax...
AJax与Jsonp跨域访问问题小结
10-23
在总结中，本文针对JavaScript中的AJAX技术、JQuery中的AJAX封装，以及JSONP跨域访问技术，进行了全面的分析和小结。内容涵盖了从创建XMLHttpRequest对象，到使用AJAX发起异步请求，再到通过JSONP实现跨域访问的一...
Ajax中的JSONP
weixin_46048542的博客
08-04 2252
如果两个页面的。
ajax+Jsonp跨域请求（简单实现+踩坑）
hkm的博客
12-25 1466
搞两个SpringMVC项目模拟两台服务器跨域请求： 请求端代码： <!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt
Jsonp解决ajax跨域问题
热门推荐
Saytime
05-30 4万+
一、介绍 最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份，关键是我还看不懂，可能是能力问题吧，自己经过很多尝试，所以总结了一下，终究还是弄懂了皮毛。注意一点是，这里是用Jsonp解决ajax的跨域问题，具体的实现其实不是ajax。 1、同源策略浏览器有一个很重要的概念——同源策略(Sam
ajax+jsonp+php 实现跨域交换数据
sunyun0090的博客
12-08 3788
前端代码： $(function(){ $.ajax({ url : "http://192.168.1.130/mytest/mytest.php", dataType:"jsonp", data
Ajax+Spring MVC实现跨域请求（JSONP）
蚂蚁的专栏
04-27 1万+
背景： AJAX向后台（springmvc）发送请求，报错：已阻止交叉源请求：同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源。可 以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。 百度一下，发现是遇到了跨域请求请求问题。搜集资料如下 JSONP解释 在解释JSONP之前,我们需要了解下”同源策略“这个
jQuery + AJAX + JSONP跨域访问详解
天工开物
07-12 519
        js跨域的解决方案有多种，其中最常见的是使用同一服务器下的代理来获取远端数据，再通过js进行读取，而在这期间经过了两次请求过程，使得获取数据的效率大大降低，这篇文章就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。 什么是JSONP？         JSONP（json with padding）是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的...
Ajax + jsonp 前后台实现
yh_852974543的博客
05-17 3852
域名不同 或者 域名相同端口不同 都算是跨域请求，js出于对安全考虑不支持跨域请求。我们可以使用JSONP解决跨域问题。 1.jsonp只能使用get请求，解决同源问题，返回javascript代码，因为请求javascript文件是没有同源问题的。 2.当请求数据类型为jsonp时，会将callback=jsonpCallback（自定义函数名称）加在url上，http://127.0.0....
Ajax用jsonp方式跨域发送请求
随遇而安
01-04 2万+
Ajax用jsonp方式跨域发送请求
AJax与Jsonp跨域访问详解：JavaScript与JQuery实践
"AJax与Jsonp跨域访问问题小结" 在Web开发中，AJAX（异步JavaScript和XML）是一种让网页不刷新就能与服务器交互数据的技术，它利用JavaScript来创建XMLHttpRequest对象，实现局部刷新，提升用户体验。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值