1.AJAX
1.1概念
- 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
1. 异步和同步：客户端和服务器端相互通信的基础上
* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
提升用户的体验
1.2实现方式
1.2.1原生实现方式
// 第一步：先创建对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：发送请求
xmlhttp.open("GET","/AjaxDemo/validatePhone?phone="+phone.value,true);
xmlhttp.send();
//第三步：响应返回回来的数据
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
1.2.2使用jQuery发送ajax请求，使用最多。
1、使用$.get 发送get请求的ajax请求
$.get(url,回调函数) 回调函数：回头自动被调用的函数
function(data){
}
data 将来接收服务端返回回来的数据
$.get("/AjaxDemo/validatePhone?phone="+phone,function(data){
//alert(data);
if(data=="1"){
$("#msg").html("<font color='red'>该手机号码已经存在</font>");
}else{
$("#msg").html("<font color='green'>该手机号码不存在，可用</font>");
}
});
2、$.post
语法：$.post(URL,data,callback);
其中第二个参数是要传递给后天的数据，传递方式是json数据
{ key:value},一定要注意：后台一定要有doPost方法。
var data = {phone:phone};
$.post("/AjaxDemo/validatePhone",data,function(data){
//alert(data);
if(data=="1"){
$("#msg").html("<font color='red'>该手机号码已经存在</font>");
}else{
$("#msg").html("<font color='green'>该手机号码不存在，可用</font>");
}
});
3、$.ajax 发送ajax请求-- 用的不是特别多，但是也有使用的场景
语法：jQuery.ajax([settings])
括号里面是一个数组，里面有很多的参数，我们不必知道所有的用法
$.ajax({
url:"/AjaxDemo/validatePhone",
type:"POST",
data:{"phone":phone},
success:function (data) {
if(data=="1"){
$("#msg").html("<font color='red'>该手机号码已经存在</font>");
}else{
$("#msg").html("<font color='green'>该手机号码不存在，可用</font>");
}
},
error:function(){
alert("但凡有失败的，都会展示我这个回调方法");
}
});
$.ajax 虽然用法和$.get 以及$.post 相比要复杂，但是因为它里面有很多的其他参数，所以适应性更强。
2.JSON
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。-->传递数据
浏览器 服务器
-------》
《---------
在json出现之前，我们一般使用的都是xml xml非常不便于阅读，解析起来也很困难。
ajax 异步的js和xml
简单的数据，可以使用文本内容，但是复杂的数据
JSON 比 XML 更小、更快，更易解析。
JSON现在已经成为一个浏览器和服务器之间传递数据的必然选择，xml已经退出历史舞台。
语法格式：
JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象
代码演示：
var stu={"name":"张三","age":19,"gender":true};
var arr=[{"name":"张三","age":19,"gender":true},{"name":"李四","age":20,"gender":false}];
console.log(stu.name);
console.log(arr[1].name);
for (var i = 0; i < arr.length; i++) {
console.log(arr[i].age);
}
有什么用？
ajax html 给 Servlet 传递json数据
Servlet 也可以给html传递 json数据。
Java代码如何编写JSON？ 难点
java编写json数据，需要使用第三方技术---> fastjson/ jackson/ jsonlib 等技术都可以完成
java对象/list集合 --》 JSON字符串 jSON字符串--》java对象/list集合
2.1json的用法
1、导入三个jar包
2、代码演示
package com.qfedu.servlet;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qfedu.pojo.Student;
import org.junit.Test;
import java.util.ArrayList;
/**
* 此类通过单元测试的方式给大家演示jackson的用法
*/
public class JsonTest {
@Test
public void testA() throws JsonProcessingException {
ObjectMapper objectMapper = new ObjectMapper();
//将一个对象转换为json字符串
Student stu = new Student("老邢", 50, false);
// {"name":"老邢","age":50,"gender":false}
// 使用jackson将一个对象转换为json
String json = objectMapper.writeValueAsString(stu);
System.out.println(json);
}
@Test
public void testB() throws JsonProcessingException {
ObjectMapper objectMapper = new ObjectMapper();
//将一个list集合转换为json字符串
ArrayList<Student> list = new ArrayList<>();
list.add(new Student("老邢", 50, false));
list.add(new Student("老闫", 22, true));
list.add(new Student("老刘", 21, false));
// [{"name":"老邢","age":50,"gender":false},{"name":"老闫","age":22,"gender":true},{"name":"老刘","age":21,"gender":false}]
// 使用jackson将一个对象转换为json
String json = objectMapper.writeValueAsString(list);
System.out.println(json);
}
// 演示将一个字符串转换为对象
@Test
public void testC() throws Exception {
ObjectMapper objectMapper = new ObjectMapper();
String json="{\"name\":\"老邢\",\"age\":50,\"gender\":false}";
Student student = objectMapper.readValue(json, Student.class);
System.out.println(student.getName());
}
}
举例：
页面发送ajax请求，后台给页面传递json数据
我们后台给页面传递数据的时候：
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write(json);
将json字符串传递给浏览器，并且告诉浏览器，数据格式是text/html, 浏览器拿到数据之后，就会按照文本内容进行处理。
所以我们的ajax拿到的数据是字符串，所以我们需要将字符串转换为json才可以使用。
$.get("/AjaxDemo/getData",function(data){
//{"name":"老邢","age":50,"gender":false}
alert(data);
alert(typeof(data)); // 服务器传递过来的数据没有问题，但是类型是 string ，json对象的话 object
// {"name":"老邢","age":50,"gender":false}
// "{"name":"老邢","age":50,"gender":false}"
var stu = eval("("+data+")");// 通过eval将字符串转化为json对象
$("#name").text(stu.name);
$("#age").text(stu.age);
$("#gender").text(stu.gender);
});
另外一种处理方法：
告诉浏览器，我给你传递的是json数据。
resp.setContentType("application/json;charset=utf-8");
这样的话，我们在页面上拿到的数据就是json,可以直接获取里面的值。