Ajax_2021-11-15

Ajax_2021-11-15

• 参考：jQuery ajax - ajax() 方法

• 常用 的就不讲了

• options：不知道干嘛用的

• cache：不知道效果

• contentType：所有的类型不清楚

• content：看不明白

• data：文档解释值类型：String ， 实际情况如果是JSON字符串报错，如果是js对象没问题，不清楚文件上传 ？

• dataType: 返回数据类:JSON ， XML

  • JSON : 后端返回map、list 、 使用注解@ResponseBody ,前端ajax方法：success 直接接收调用：

    •        $.post({
                  url:"formMap",
                  data:  obj,
                  dataType:"json" ,
                  // timeout:4,
                  beforeSend:function(xmr){
                      console.info("befornSend方法");
                      console.info(xmr);
                  },
                  dataFilter : function(data){
                      console.info("dataFilter");
                      console.info(data);
                      return data ;
                  },
                  success:function (data) {
                      alert(data.name);
                  },
                  error: function (xhr,eror,exception) {
                      console.error(xhr);
                      console.error(eror);
                      console.error(exception);
                  },
                  complete:function (xmr) {
                      console.info("complete方法")
                      console.info(xmr);
                  }
      ​
              });

    •     @RequestMapping("formMap")
          @ResponseBody
          public  String  getFormMap(Map<String,Object> map) {
              System.out.println(map.get("name"));
              map.put("name","timo") ;
              return  JSON.toJSONString(map);
      ​
          }

  • XML : 前端可以使用超链接发送请求 ，效果最好，类似于接口文档：后端返回对象User ，User类 使用注解@XmlRootElement 标记， 直接返回user对象，方法使用注解@ResponseBody

    •         $.post({
                  url:"showXML",
                  data:  obj,
                  dataType:"xml" ,
                  // timeout:4,
                  beforeSend:function(xmr){
                      console.info("befornSend方法");
                      console.info(xmr);
                  },
                  dataFilter : function(data){
                      console.info("dataFilter");
                      console.info(data);
                      return data ;
                  },
                  success:function (data) {
                      alert(data.name);
                  },
                  error: function (xhr,eror,exception) {
                      console.error(xhr);
                      console.error(eror);
                      console.error(exception);
                  },
                  complete:function (xmr) {
                      console.info("complete方法")
                      console.info(xmr);
                  }
      ​
              });
      ​

    •     @RequestMapping("showXML")
          @ResponseBody
          public  User  showXML(Map<String,Object> map) {
              User user = new User() ;
              user.setAddress("德玛西亚");
              user.setName("提莫");
              user.setPrice(6300);
              return  user ;
          }

• global：不明白

• ifModified:不明白

• jsonp：不明白

• jsonpCallBack: 不会用

• processData ： 不明白

• scriptChart：

• traditional：不明白

• timeout : 超时，该请求会被取消

• username

• password :

• xhr :

• 五个函数

  • beforeSend : 请求发送钱执行的方法； 注意：大小写弄错，方法不执行

  • dataFilter：

  • success :

  • error: controller方法抛异常、返回数据类型错误，都会执行该方法

  • complete : 无论返回成功失败都会执行该方法，类似于trycatch的finally方法

JSON

• 简介：本质：数据格式，参考：百度百科

• 因为：数据传输效率低下，格式复杂

• 如何：

  • json对象：var js = {name:"提莫",price:4500} ;

  • json字符串：var json = '{"name":"提莫","price":"4500"}' ;

  • 虽然JSON的数据格式是这样：{"name":"提莫","price":"4500"}

  • json对象转js对象：JSON.parse(json字符串) ;

  • js对象转JSON字符串：JSON.stringify(js对象);

  • 还有个eval方法：解析JSON字符串：需要拼接小括号 eavl("("+json+")"); 解析完成返回JSON对象

  • Ajax请求数据类型：data 的值是：js对象

• 原理：固定格式的数据存储

JSONP

• 因为：因为浏览器跨域（协议、IP、端口号）访问服务器被视为攻击， 同源策略

• 如何：

  • 打jar包修改端口号实现跨域，发送get请求，controller的方法必须返回jsonp数据格式：'callback({"name":"提莫"})'

  •        
    // 设置dataType 返回数据类型格式为JSONP， 发送get请求
        $.ajax({
                url:"http://localhost:8082/formMap",
                data: {"name":"提莫"},
                // type: "get" ,
                dataType: "jsonp",
                // jsonp: "callback",
                // jsonpCallback:"handler",
                success:function (data) {
                    alert(data);
                    console.info("success");
                } ,
                error:function (data) {
                    console.info("error");
    ​
                }
    ​
            });

  •     @RequestMapping("formMap")
        @ResponseBody
        public String getFormMap(Map<String, Object> map, HttpServletRequest request) {
    ​
            // 返回的jsonp格式：  'callback({"name":"提莫"})' ；
            try {
                String callback = request.getParameter("callback");
                JSONObject json = new JSONObject();
                json.put("name", "提莫 ");
                callback += "(" + json + ")";
                return callback;
            } catch (Exception e) {
                System.out.println(e.getMessage());
                return "";
            }
    ​
        }

• 原理：

MIM类型

• 简介：Multipurpose Internet Mail Extensions : 多用途互联网邮件扩展

• 因为：客户端给服务器端发送文件，文件类型有很多种，服务器端需要知道具体的文件类型然后去解析，最早的http协议 中没有多媒体的数据类型这个参数，MIMI开始用户邮件系统，后来 扩展浏览器与服务器系统

• 如何：

同源策略思考

formdata

文件上传序列化