Ajax学习笔记——第一天

Ajax学习笔记—第一天

Ajax笔记 第一天

一、引言

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

二、 开发步骤

三、实战案例

四、发送POST请求

·

      //发送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的相关依赖

<!--引入FastJSON的相关依赖-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.54</version>
    </dependency>

2.使用FastJSON进行数据转换

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完成查询所有功能