zoukankan      html  css  js  c++  java
  • jQuery的Ajax的跨域请求

       今天碰到一个Ajax跨域请求的问题,我把源码down下来,然后在服务器端写了一个http请求的代理(因为服务器端是不存在跨域问题的),说白了就是用BufferedReader写了个IO流,然后读取到目标地址的数据,测试发现OK,但是问题出现在,asp的项目存在IIS里面,而我们的java代码是放在其他服务器的容器中,asp的请求无论如何都是跨域的,我们是无法在IIS里面部署jsp的,所以这个办法行不通。

    于是上网查了下,发现可以使用jsonp的方式实现跨域。其实原理也很简单,就是利用<script>标签的src来实现跨域获取数据,而jQuery的Ajax也正好支持并且封装了这种方式,思路是客户端以jsonp的这种方式(协议)向目标服务器发送请求,服务器端构建出一个callback的回调函数,类似JS的方法+参数的字符串返回给客户端,客户端调用自己写好的回调函数来执行这段js代码,于是就实现了跨域请求的目的。

    jQuery给出了两种情况的跨域请求,一种是get/getJSON的方式,另一种是$.ajax()的方式,原理都差不多,只是写法不一样,多几行代码而已,多大点事儿,哈哈,于是我在本地服务器上同时运行了2个project,端口分别是8080和8081,在8081的客户端上面请求8080端口的数据,端口不同也是跨域。

    1 $.getJSON("http://localhost:8080/my/t1.jsp?callback=?",
    2 function(result) {});
    1 function m1(data) {
    2     alert(data);
    3 }
    1 $.ajax({
    2     url: "http://localhost:8080my/t1.jsp?callback=?",
    3     dataType: "jsonp",
    4     jsonpCallback: "m1",
    5     success: function(data) {}
    6 });
    1 function m1(data) {
    2     alert(data);
    3 }  

    服务器端Java代码:

    String str = "{["name1": "json","name2": "json","name3": "json"]}";
    ObjectMapper mapper = new ObjectMapper();
    String json = mapper.writeValueAsString(str);
    json = "m1(" + json + ")";
    response.getWriter().print(json);
    说明:第一种方式的callback=?回调函数标志着Ajax请求是以jsonp的方式发送请求,客户端请求会自动在问号处增加一个方法名,方法名是一jquery开头的一串数字,而第二种方式的是参数dataType="jsonp"来说明是以jsonp的方式发送请求,所以可以直接在callback后面直接指定方法名callback=m1,而不需要jsonpCallback: "m1"这一样代码,其实还是那句话,多一行代码而已,多大点事儿。
  • 相关阅读:
    Angular 中使用第三方模块 axios 请求数据
    angular 创建服务
    Promise和RxJS处理异步对比
    ES6中的迭代器(Iterator)和生成器(Generator)
    async await
    Ajax分析
    JSTL
    EL
    Spring-常用依赖及配置
    Spring-AOP的三种方式
  • 原文地址:https://www.cnblogs.com/dreamroute/p/3613563.html
Copyright © 2011-2022 走看看