day14_Ajax_Json

day14_Ajax_Json

Ajax

1. 同步请求与异步请求

1.1 同步请求

• 请求方式
  • 
  • location.href = “#”;
  • 等
• 同步不足
  • 同步请求，在服务器响应之前，用户不能操作页面，减低用户体验度
  • 同步请求，即使需要刷新局部数据，也必须刷新整个页面，增加服务器压力

1.2 异步请求

• 请求方式
  • ajax()
• 总结
  • 实战中，大部分情况使用同步请求，在特定情况下需要使用异步请求

2. Ajax简介

2.1 Ajax概述

• Ajax全称：Asynchronous JavaScript And XML【异步js和xml】
• Ajax本质：js发出异步请求，在不刷新页面情况，使用回调函数异步更新页面数据

2.2 Ajax语法

• 原生Js发送Ajax请求
• jQuery发送Ajax请求
• 
  
• Vue发送Ajax请求【重点】

3. Axios简介

3.1 Axios概述

• Axios是发送ajax请求框架
• Axios官网：http://www.axios-js.com/
• Axios是一个函数，也是一个对象

3.2 Axios语法

axios({
url:”TestAjaxServlet?method=asRequest”, //设置请求路径
method:”POST”, //设置请求方式【GET|POST|PUT|DELETE】
params:{ //设置查询参数
“stuId”:1001,
“stuName”:”guoqiang”
}
})
.then(function(rs){ //请求成功后，回调函数
console.log(“rs”,rs);
console.log(“结果：”,rs.data);
})
.catch(function (error) { //请求失败后，回调函数
console.log(“请求失败！”,error);
})

4. Axios中参数

4.1 params查询参数

• 支持请求方式【GET|POST】
• 特点：请求参数，在URL后拼接
• 获取请求参数方法
  • request.getParameter()
  • request.getParameterValues()
  • request.getParameterMap()

4.2 data请求体参数

• 支持请求方式：POST
• 特点：请求参数，在请求体中
• 获取data请求体参数方式
• axios({
  url:”TestAjaxServlet?method=asRequsetData”,
  // method:”GET”, //错误的，data请求体参数不支持GET请求
  method:”POST”,
  data:{
  “id”:1001,
  “stuName”:”guoqiang”,
  “stuGender”:”man”
  }
  })
• BufferedReader reader = request.getReader();
  StringBuilder strb = new StringBuilder();
  String temp=null;
  while ((temp=reader.readLine()) != null){
  strb.append(temp);
  }
  String rs = strb.toString();
  System.out.println(“rs = “ + rs);
  Gson gson = new Gson();
  Student student = gson.fromJson(rs, Student.class);
  System.out.println(“student = “ + student);

5. Axios中this关键字

5.1 原生js中this

• 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
• 在函数里面：this关键字指向调用函数的对象
• 在js中，this关键字可变的

5.2 Vue中this

• 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
• 在函数里面：this关键字指向Vue对象
  • this = vm

5.3 Axios中this

• 在函数里面：this关键字指向window对象
• 在函数外面：this关键字指向Vue对象

6. Axios中响应数据

6.1 Axios中响应数据类型

• 文本类型
• json类型

6.2 Axios中响应数据方式

• response.getWriter().write()

6.3 示例代码

protected void responseData(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Student student = new Student(1001,”国强”,”男”);
//将student转换为jsonString
Gson gson = new Gson();
String jsonStr = gson.toJson(student);
response.getWriter().write(jsonStr);
}
axios({
url:”TestAjaxServlet”,
method:”POST”,
params:{
“method”:”responseData”
}
}).then(response=>{
// JSON.parse(response) //axios中自动将jsonString->jsonObj
console.log(“结果：”,response);
console.log(“学生姓名：”,response.data.stuName);
alert(“数据：”+response.data+”,类型”+typeof(response.data));
}).catch(error=>{
alert(“error:”+error);
})

Json

1. Json简介

• Json全称：JavaScript Object Notation【JS提供的一种轻量级的数据交换格式】
• Json本质：JavaScript对象，与字符串可以进行转换。
• Json作用：Json可以在不同语言，不同生态之间进行数据交互。

2. Json基本使用

js数据类型
基本类型：number\string\boolean\null\undefined
对象类型：数组\函数\一般对象

3. Json在不同语言不同生态之间，类型转换

3.1 在Js语言环境下，Json对象与Json字符串转换问题

• Json对象->Json字符串
  • var jsonString = JSON.stringify(JsonObj);
• Json字符串->Json对象
  • var jsonObj = JSON.parse(jsonString);

3.2 在Java语言环境下，Java对象【JavaBean&List&Map】与Json字符串转换问题

使用Google下Gson工具类
String jsonStr = toJson(Object obj)
fromJson(“”,Calss);
fromJson(“”,Type);
/*
JavaBean
*/
@Test
public void testJavaBeanJsonString(){
Student student = new Student(1001,”guoqiang”,”男”);
//将javaBean转换为jsonString
// String jsonStr = “{\”id\”:1001,\”stuName\”:\”guoqiang\”,\”stuGender\”:\”男\”}”;
Gson gson = new Gson();
String jsonStr = gson.toJson(student);
System.out.println(“jsonStr = “ + jsonStr);
//将jsonString转换为javaBean
Student student1 = gson.fromJson(jsonStr, Student.class);
System.out.println(“student1 = “ + student1);
System.out.println(student1.getStuName());

}

/**<br />     * List与jsonString转换问题<br />     */<br />    @Test<br />    public void listJsonString(){<br />        List<Student> list = new ArrayList<>();<br />        list.add(new Student(1001,"国强","男"));<br />        list.add(new Student(1002,"dss","男"));<br />        list.add(new Student(1003,"xn","男"));<br />        //将list转换为jsonString<br />        Gson gson = new Gson();<br />        String jsonStr = gson.toJson(list);<br />        System.out.println("jsonStr = " + jsonStr);<br />        //将jsonString转换为List<Student><br />        List<Student> stuList = gson.fromJson(jsonStr, new TypeToken<List<Student>>() {<br />        }.getType());<br />        for (Student student : stuList) {<br />            System.out.println("student = " + student);<br />            System.out.println("student = " + student.getStuName());<br />        }<br />    }

/**<br />     * Map与json字符串转换<br />     */<br />    @Test<br />    public void mapJsonString(){<br />        Map<String,Student> map = new HashMap<>();<br />        map.put("guoqiang",new Student(1001,"国强","男"));<br />        map.put("dss",new Student(1002,"dss","男"));<br />        map.put("xn",new Student(1003,"xn","男"));<br />        //将map为jsonString<br />        Gson gson  = new Gson();<br />        String s = gson.toJson(map);<br />        System.out.println("s = " + s);<br />        //将jsonString转换为map<br />        Map<String,Student> mapStu = gson.fromJson(s,new TypeToken<Map<String,Student>>(){}.getType());<br />        String guoqiang = mapStu.get("guoqiang").getStuName();<br />        System.out.println("guoqiang = " + guoqiang);<br />    }