{{π型人才养成计划}}Ajax

最新推荐文章于 2022-03-03 11:32:37 发布

炳烛之明科技

最新推荐文章于 2022-03-03 11:32:37 发布

阅读量112

点赞数

文章标签：其他

本文链接：https://blog.csdn.net/qq_40828705/article/details/104522193

版权

Ajax

引言

概念：Ajax 即 Asynchronous Javascript And XML （异步 JavaScript 和 XML）

异步：一种请求方式

                同步请求(传统请求)
                      1.表单
                      2.超级链接
                      3.地址栏
                      4.location.href
               传统请求特点：
                      1.当发送传统请求后，用户无法做其他的操作 只能等待响应完成，才可以做其他操作
                      2.刷新的是整张页面，而非页面的局部
               异步请求特点：
                      1.当发送异步请求时，用户无需等待响应，可以继续做其他操作
                      2.异步请求刷新的是页面的局部，而非整张页面
                      
                              ```

开发步骤

在这里插入图片描述

实战案例

在这里插入图片描述

发送POST请求

                ```java
        //发送POST请求
        xhr.open("POST","${pageContext.request.contextPath}/checkusername");
        //模拟表单                              表单的标识
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send("username="+username);
                ```

SM整合Ajax

在这里插入图片描述

JSON协议串

概念: 异构体系中数据传输的介质
在这里插入图片描述

java中的对象或集合转换json协议串的格式

对象====>JSON
在这里插入图片描述

数组 =====>JSON
在这里插入图片描述

List、Set =====>JSON
在这里插入图片描述

Map转JSON
在这里插入图片描述

JSON协议串转换工具

FastJSON (alibaba) GSON(GOOGLE) JACKSON(SpringMVC)

FastJSON的使用步骤

1.引入FastJSON的相关依赖

                                         ```xml

<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.54</version>
</dependency>
                                         ```

2.使用FastJSON进行数据转换

      ```java

package com.baizhi.test;

import com.alibaba.fastjson.JSON;
import com.baizhi.entity.User;
import org.junit.Test;

import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;

public class TestJSON {

//对象====>JSON
@Test
public   void   test1(){
    User user = new User(1, "呵呵", "123456");//
    //对象转JSON
    String jsonString = JSON.toJSONString(user);
    System.out.println(jsonString);
}
//数组=====>JSON
@Test
public   void   test2(){
    String[]  names={"嘿嘿","哈哈","嘻嘻"};
    //数组转JSON
    String jsonString = JSON.toJSONString(names);
    System.out.println(jsonString);
}

//List和Set集合转JSON
@Test
public   void   test3(){
    User user = new User(1, "张三", "123456");
    User user1 = new User(2, "赵四", "123456");
    //创建List集合
    // List<User>  users=new ArrayList<User>();
    Set<User> users= new HashSet<User>();
    users.add(user);
    users.add(user1);
    //List集合==>JSON协议串
    String jsonString = JSON.toJSONString(users);
    System.out.println(jsonString);
}

//Map集合
@Test
public   void   test4(){
   /* Map<String,String> maps= new HashMap<String,String>();
    maps.put("username","张三");
    maps.put("password","123456");
    //Map集合转JSON
    String jsonString = JSON.toJSONString(maps);
    System.out.println(jsonString);*/
    Map<String,User>  maps=new HashMap<String,User>();
    User user = new User(1, "张三", "123456");
    User user1 = new User(2, "赵四", "123456");
    maps.put("1",user);
    maps.put("2",user1);
    String jsonString = JSON.toJSONString(maps);
    System.out.println(jsonString);
}

}
```

3.@JSONFiled注解

 @JSONField(serialize = false)      作用:在进行JSON协议串转换时 排除该属性
 @JSONField(name = "name")          作用：指定转换过后json协议串中的属性名
 @JSONField(format = "yyyy-MM-dd")  作用：指定日期类型的转换格式

4.JSON协议串转换对象或集合 (了解)

package com.baizhi.test;

import com.alibaba.fastjson.JSON;
import com.baizhi.entity.User;
import org.junit.Test;

import java.util.*;

//json协议串转java中的对象或集合
public class TestJSON1 {

    //JSON协议串===>对象
    @Test
    public   void   test1(){
        User user = new User(1, "呵呵", "123456",new Date());
        //对象转JSON
        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString);
        //JSON转对象
        User user1 = JSON.parseObject(jsonString, User.class);
        System.out.println(user1);
    }
    //JSON协议串转List集合
    @Test
    public   void   test2(){
        User user = new User(1, "张三", "123456");
        User user1 = new User(2, "赵四", "123456");
        //创建List集合
        List<User> users=new ArrayList<User>();
        users.add(user);
        users.add(user1);
        //List集合==>JSON协议串
        String jsonString = JSON.toJSONString(users);
        //JSON协议串转换回List集合                       List集合中的类型
        List<User> users1 = JSON.parseArray(jsonString, User.class);
        for (User user2 : users1) {
            System.out.println(user2);
        }
    }

    //JSON协议串转Set集合
    @Test
    public   void   test3(){
        User user = new User(1, "张三", "123456");
        User user1 = new User(2, "赵四", "123456");
        //创建Set集合
        Set<User> users=new HashSet<User>();
        users.add(user);
        users.add(user1);
        //Set集合==>JSON协议串
        String jsonString = JSON.toJSONString(users);
        //JSON协议串转换回Set集合               Set的类型
        Set set = JSON.parseObject(jsonString, Set.class);
        for (Object o : set) {
            System.out.println(o);
        }
    }

     //JSON协议串转Map
     //Map集合
     @Test
     public   void   test4(){
        Map<String,String> maps= new HashMap<String,String>();
        maps.put("username","张三");
        maps.put("password","123456");
        //Map集合转JSON
        String jsonString = JSON.toJSONString(maps);
        //JSON转Map集合
         Map map = JSON.parseObject(jsonString, Map.class);
         Set  keySet = map.keySet();
         for (Object o : keySet) {
             System.out.println(o+"==========="+map.get(o));
         }
     }
}

GSON的使用步骤

1.引入相对应的依赖

 <!--引入GSON的相关依赖-->
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.2</version>
    </dependency>

2.GSON的具体使用
在这里插入图片描述

package com.baizhi.test;

import com.baizhi.entity.User;
import com.google.gson.Gson;
import org.junit.Test;

//java中的对象或集合转JSON
public class TestGSON {

   //对象转JSON
    @Test
    public   void   test1(){
        User user = new User(1, "张三", "123456");
         //创建GSON对象
        Gson gson = new Gson();
        String json = gson.toJson(user);
        System.out.println(json);
    }
    //JSON转对象或者集合
    @Test
    public   void   test2(){
        User user = new User(1, "张三", "123456");
        //创建GSON对象
        Gson gson = new Gson();
        String json = gson.toJson(user);
        //JSON协议串转对象
        User user1 = gson.fromJson(json, User.class);
        System.out.println(user1);
    }
}

实战案例：

    利用Ajax完成查询所有功能



User user = new User(1, "张三", "123456");
        //创建GSON对象
        Gson gson = new Gson();
        String json = gson.toJson(user);
        //JSON协议串转对象
        User user1 = gson.fromJson(json, User.class);
        System.out.println(user1);
    }
}




实战案例：

             利用Ajax完成查询所有功能


##### Ajax与Jquery整合

                 ![Jquery整合Ajax](F:\框架阶段\Ajax\Ajax-Day2\图片\Jquery整合Ajax.png)

```javascript


$.get(url, [data], [callback], [type])  以GET方式发送异步请求
url:"请求后台具体的URL"
data:"向后台传递的具体的数据"
callback:"后台成功响应回来后触发的函数"
type:"指定后台响应回的数据的格式或者类型"

$.post(url, [data], [callback], [type]) 以POST方式发送异步请求
url:"请求后台具体的URL"
data:"向后台传递的具体的数据"
callback:"后台成功响应回来后触发的函数"
type:"指定后台响应回的数据的格式或者类型"

$.getJSON(url, [data], [callback])   把后台响应会的JSON协议串 自动转换为Javascript中的对象或集合
url:"请求后台具体的URL"
data:"向后台传递的具体的数据"
callback:"后台成功响应回来后触发的函数"
    ```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200226183524215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODI4NzA1,size_16,color_FFFFFF,t_70)