SpringMVC（5）------异步调用与跨域访问

异步调用

• 添加Jackson的坐标pom.xml

        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-databindartifactId>
            <version>2.9.0version>
        dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-coreartifactId>
            <version>2.9.0version>
        dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-annotationsartifactId>
            <version>2.9.0version>
        dependency>

接收异步请求参数的传递

• jsp代码

  //为id="testAjax"的组件绑定点击事件
  $("#testAjax").click(function(){
         
      //发送异步调用
      $.ajax({
         
          //请求方式：POST请求
          type:"POST",
          //请求的地址
          url:"ajaxController",
          //请求参数（也就是请求内容）
          data:'ajax message',
          //响应正文类型
          dataType:"text",
          //请求正文的MIME类型
          contentType:"application/text",
      });
  });
  
  //为id="testAjaxPojo"的组件绑定点击事件
  $("#testAjaxPojo").click(function(){
         
      $.ajax({
         
          type:"POST",
          url:"ajaxPojoToController",
          data:'{"name":"Jock","age":39}',
          dataType:"text",
          contentType:"application/json;charset=utf-8"
      });
  });
  

• java代码

  package com.yy.controller;
  
  
  import com.yy.domain.User;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.CrossOrigin;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.ResponseBody;
  
  import javax.servlet.http.HttpServletRequest;
  import java.util.ArrayList;
  import java.util.List;
  
  @Controller
  public class AjaxController {
         
  
  //    @RequestMapping("/ajaxController")
  //    public String ajaxController(){
         
  //        System.out.println("ajax request is running...");
  //        return "page.jsp";
  //    }
  
  	//普通数据pojo对象
      @RequestMapping("/ajaxController")
      //使用@RequestBody注解，可以将请求体内容封装到指定参数中
      public String ajaxController(@RequestBody String message){
         
          System.out.println("ajax request is running..."+message);
          return "page.jsp";
      }
  	//json数据
      @RequestMapping("/ajaxPojoToController")
      //如果处理参数是POJO，且页面发送的请求数据格式与POJO中的属性对应，@RequestBody注解可以自动映射对应请求数据到POJO中
      //注意：POJO中的属性如果请求数据中没有，属性值为null，POJO中没有的属性如果请求数据中有，不进行映射
      public String  ajaxPojoToController(@RequestBody User user){
         
          System.out.println("controller pojo :"+user);
          return "page.jsp";
      }
  	//json数据List
      @RequestMapping("/ajaxListToController")
      //如果处理参数是List集合且封装了POJO，且页面发送的数据是JSON格式的对象数组，数据将自动映射到集合参数中
      public String  ajaxListToController(@RequestBody List<User> userList){
         
          System.out.println("controller list :"+userList);
          return "page.jsp";
      }
  }
  

异步请求接收响应数据

• jsp代码

  //为id="testAjaxReturnString"的组件绑定点击事件
  $("#testAjaxReturnString").click(function(){
         
      //发送异步调用
      $.ajax({
         
          type:"POST",
          url:"ajaxReturnString",
          //回调函数
          success:function(data){
         
              //打印返回结果
              alert(data);
          }
      });
  });
  
  //为id="testAjaxReturnJson"的组件绑定点击事件
  $("#testAjaxReturnJson").click(function(){
         
      //发送异步调用
      $.ajax({
         
          type:"POST",
          url:"ajaxReturnJson",
          //回调函数
          success:function(data){
         
              alert(data);//这里弹出的是[object Object]
              alert(data['name']+" ,  "+data['age']);//这里弹出的是Jockme ,  39
          }
      });
  });
  
  //为id="testAjaxReturnJsonList"的组件绑定点击事件
  $("#testAjaxReturnJsonList").click(function(){
         
      //发送异步调用
      $.ajax({
         
          type:"POST",
          url:"ajaxReturnJsonList",
          //回调函数
          success:function(data){
         
              alert(data);//[object Object],[object Object]
              alert(data.length);//2
              alert(data[0]["name"]);//Tom
              alert(data[1]["age"]);//5
          }
      });
  });
  

• java代码

  package com.yy.controller;
  
  
  import com.yy.domain.User;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.CrossOrigin;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.ResponseBody;
  
  import javax.servlet.http.HttpServletRequest;
  import java.util.ArrayList;
  import java.util.List;
  
  @Controller
  public class AjaxController {
         
  
      //使用注解@ResponseBody可以将返回的页面不进行解析，直接返回字符串，该注解可以添加到方法上方或返回值前面
      @RequestMapping("/ajaxReturnString")
  //    @ResponseBody
      //@ResponseBody有两个添加的地方，如该例
      //添加@ResponseBody过后，返回的是page.jsp这个字符串
      //如果没有添加@ResponseBody，返回的是page.jsp这个jsp里面的jsp文件的内容(即html)页面
      public @ResponseBody String ajaxReturnString(){
         
          System.out.println("controller return string ...");
          return "page.jsp";
      }
  
  
      @RequestMapping("/ajaxReturnJson")
      @ResponseBody
      //基于jackon技术，使用@ResponseBody注解可以将返回的POJO对象转成json格式数据
      public User ajaxReturnJson(){
         
          System.out.println("controller return json pojo...");
          User user = new User();
          user.setName("Jockme");
          user.setAge(39);
          return user;
      }
  
      @RequestMapping("/ajaxReturnJsonList")
      @ResponseBody
      //基于jackon技术，使用@ResponseBody注解可以将返回的保存POJO对象的集合转成json数组格式数据
      public List ajaxReturnJsonList(){
         
          System.out.println("controller return json list...");
          User user1 = new User();
          user1.setName("Tom");
          user1.setAge(3);
  
          User user2 = new User();
          user2.setName("Jerry");
          user2.setAge(5);
  
          ArrayList al = new ArrayList();
          al.add(user1);
          al.add(user2);
  
          return al;
      }
  }
  

跨域访问

• 当通过域名A下的操作访问域名B下的资源时，称为跨域访问

• 跨域访问时，会出现无法访问的现象

如果A服务器去访问B服务器里面的东西，这种情况就叫做跨域访问

1. 即不同域名下信息的访问
2. 两个不同的域：请求协议不同，IP地址不同，端口号不同，只要有一个不同就叫做跨域

同一个服务器，但是域名不同，也叫做跨域访问

跨域访问环境搭建

• jsp代码

  //为id="testCross"的组件绑定点击事件
  $("#testCross").click(function(){
         
      //发送异步调用
      $.ajax({
         
          type:"POST",
          url:"http://www.jock.com/cross",
          //回调函数
          success:function(data){
         
              alert("跨域调用信息反馈："+data['name']+" ,  "+data['age']);//跨域调用信息反馈：Jockme ,  39
          }
      });
  });
  

• java代码

  package com.yy.controller;
  
  
  import com.yy.domain.User;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.CrossOrigin;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.ResponseBody;
  
  import javax.servlet.http.HttpServletRequest;
  import java.util.ArrayList;
  import java.util.List;
  
  @Controller
  public class AjaxController {
         
      @RequestMapping("/cross")
      @ResponseBody
      //使用@CrossOrigin开启跨域访问
      //标注在处理器方法上方表示该方法支持跨域访问
      //标注在处理器类上方表示该处理器类中的所有处理器方法均支持跨域访问
      @CrossOrigin
      public User cross(HttpServletRequest request){
         
          System.out.println("controller cross..."+request.getRequestURL());
          User user = new User();
          user.setName("Jockme");
          user.setAge(39);
          return user;
      }
  
  }