JavaWeb必备知识----Json和Ajax

**

JavaWeb必备知识----Json和Ajax

**
先来了解一下,什么是Json~
**
具体概念咱就不说了百度上一搜便是,直接上干货:

1.1Json在JavaScript中的使用:

**
1.1.1 Json 的声明:
json数组由大括号包围,里面都是键值对,键使用引号引起来.键和值之间使用冒号进行分隔.
每组键值对之间 使用逗号来进行分隔. 这样格式的数据我们就叫json.

var jsonObj = {
   "key1":12,
   "key2":"abc",
   "key3":true,
   "key4":[12,"abc",true], //数据类型可以是整型,可以是字符串,可以是boolean类型,也可以是另一个json数组
   "key5":[{
      "key5_1_1":511,    
      "key5_1_2":"abc1"
   },{
      "key5_2_1":521,    
      "key5_2_2":"abc2"
   },{
      "key5_3_1":531,
      "key5_3_2":"abc3"
   }] 
};

1.1.2 Json 数组数值的取出:
Json.key 就可以取出对应key 的value

alert( jsonObj.key1 ); // 12
alert( jsonObj.key2 ); // abc
alert( jsonObj.key3 ); // true
alert( jsonObj.key4.length ); //3
var arr = jsonObj.key4;
for (var i = 0; i < jsonObj.key4.length; i++) {
     alert( arr[i] ); //依次是 12,abc,true
}
alert( jsonObj.key5[0].key5_1_1 ); //511
var arr5 = jsonObj.key6;
for (var i = 0; i < arr5.length; i++) {
     // 每一个都是json对象
    var arr5Element = arr5[i];
    alert(" 1 = " + arr5Element.key5_1_1 + " , 2 = " + arr5Element.key5_1_2    );
 }

1.1.3 Json数据常用的两种方式:
我们常说的Json数据有两种形式: 一种是Json对象,一种是Json 字符串
JSON.stringify() --> 可以把json对象转换为json字符串
JSON.parse() --> 把json字符串转换为json对象

// 把json对象转换为json字符串
var s = JSON.stringify( jsonObj );
alert( s ); // json字符串

// 把json字符串转换为json对象
var obj = JSON.parse( s );
alert( obj ); //json对象

**

1.2Josn在Java中的使用

**
1.2.1Json 和JavaBean 之间转换

//创建一个pojo 数据与json 进行转换
public class Person {
    private Integer id;
    private String name;

    public Person() {
    }

    public Person(Integer id, String name) {
        this.id = id;
        this.name = name;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }
}

@Test
public void test() {
    Person person = new Person(1,"Json");
    // 创建谷歌gson包中提供的工具类
    Gson gson = new Gson();
    // 使用gson.toJson();
    String jsonPersonString = gson.toJson(person);
    System.out.println( jsonPersonString );
    // 还可以把json字符串转换javaBean
    Person person1 = gson.fromJson(jsonPersonString, Person.class);
    System.out.println(person1);
}

输出结果如下:

1.2.2 List和Json 相互转换

List和Json 相互转换,如果Json字符串转换成List时,我们需要新建一个List存放的Bean的类型的类,如下:

/**
 * 泛型是要把json转换回去的具体类型
 */
public class PersonListType extends TypeToken<ArrayList<Person>> {
}

这里做一个空类即可.

@Test
public void test2() {

    List<Person> people = new ArrayList<>();
    people.add(new Person(1,"我是一"));
    people.add(new Person(2,"我是二"));
    people.add(new Person(3,"我是三"));
    // 先创建gson工具类
    Gson gson = new Gson();
    // 把list集合转换为json数组
    String jsonPeopleString = gson.toJson(people);
    System.out.println( jsonPeopleString );
    // fromJson把json字符串转换回list集合
    // toJson() 是把对象转换为json字符串
    // fromJson是把json字符串转换回java对象
    // 如果是转回一个JavaBean.则第二个参数是转换的javaBean的具体类型
    // 如果是转回一个集合.则第二个参数是type类型  这里需要新new一个空的类型类
    List<Person> list = gson.fromJson(jsonPeopleString, new PersonListType().getType());
    Person person = (Person) list.get(0);
    System.out.println(person);
}

上面测试的输出结果如下:

1.2.3 Map和Json 的相互转换

同List转换,也需要创建一个类型类,当然我们可以使用匿名类来解决麻烦

@Test
public void test3() {
	Map<String,Person> personMap = new HashMap<>();
    personMap.put("p1",new Person(1,"一号好帅"));
    personMap.put("p2",new Person(2,"二号好帅"));
    personMap.put("p3",new Person(3,"三号好美"));

    Gson gson = new Gson();
    // 所有java对象转换为json字符串.都是统一使用 toJson()方法
    String json = gson.toJson(personMap);
    System.out.println(json);
    // 把json字符串转换回 map 集合
    // 官方推荐使用的匿名内部类
    Map<String,Person> o = gson.fromJson(json,new TypeToken< HashMap<String,Person> >(){}.getType());
    System.out.println( o );
    Person person = o.get("p1");
    System.out.println(person);
}

运行结果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200513201018369.png)

## 2.1Ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
ajax是一种浏览器通过js异步发起请求，局部更新页面的技术。
**

## 2.1.1原生Ajax的演示:

**

```javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="pragma" content="no-cache" />
      <meta http-equiv="cache-control" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Ajax请求示例</title>
      <script type="text/javascript">
         function ajaxRequest() {
			//  1、我们首先要创建XMLHttpRequest
            var xhr = new XMLHttpRequest();
			//  2、调用open方法设置请求参数
            xhr.open("GET","http://localhost:8080/ajax_test/ajaxServlet?action=javaScriptAjax",true);
			//  4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            xhr.onreadystatechange = function(){
               // 要同时判断两个值,才可以获取响应信息
               if (xhr.readyState == 4 && xhr.status == 200) {
                  // alert( xhr.responseText );
                  // document.getElementById("div01").innerHTML = xhr.responseText;
                  // 把服务器返回的数据转换为json对象
                  var jsonObj = JSON.parse(xhr.responseText);
                  document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;
               }
            }

            //  3、调用send方法发送请求
            xhr.send();
         }
      </script>
   </head>
   <body> 
      <button onclick="ajaxRequest()">ajax request</button>
      <div id="div01">
      </div>
   </body>
</html>

同时我们需要在服务器端进行配置:

@WebServlet(name = "AjaxServlet",value = "/ajaxServlet")
public class AjaxServlet extends BaseServlet {
    /**
     * 表示我们演示的第一个Ajax请求的方法
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("ajax 兄弟,你来了!!!");

        Person person = new Person(1,"我是一号");
        // 先把要返回的数据转为json字符串
        Gson gson = new Gson();
        String json = gson.toJson(person);
        response.getWriter().write(json);
    }
}

BaseServlet如下:

public abstract class BaseServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 解决响应中文乱码
        response.setContentType("text/html; charset=UTF-8");
        // 获取业务的鉴别字符串 == >> 就可以知道是什么业务操作
        String action = request.getParameter("action");
        try {
            // this是表示当前具体的对象实例.
            // 通过action业务鉴别字符串,得到对应的业务方法
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
            // 设置业务方法
            method.invoke(this,request,response );
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }

}

这样是不是觉得非常繁琐,不方便,没事,我们还有如下的JQuery封装后的Ajax:

2,2,2 JQuery中的Ajax

ajax() 方法是jQuery中提供的专门用于发起Ajax请求的方法.
我们只需要给这个方法传递请求时需要的信息即可!!!

$.ajax方法
url 请求的资源路径
type 请求的方式 GET或POST
data 发送给服务器的数据
一种数据格式是: name=value&name=value
另一种数据格式是: { key:value , key : value }
success 成功的回调函数
dataType 响应的数据类型
text 纯文本
xml 返回是xml数据
json 返回是json对象

\ 先把整个页面po出来~:

// ajax请求
		$("#ajaxBtn").click(function(){
   // 这是ajax() 的单击事件
			   $.ajax({
			      url:"http://localhost:8080/ajax_test/ajaxServlet",
			      type : "GET",
			      data: "action=jQueryAjax",
			      success:function(data){// success的函数要有一个参数.这个参数就是服务器返回的数据
			         // alert(data);
			         var jsonObj = JSON.parse(data);
			         $("#msg").html("编号: " + jsonObj.id + " , 名称: " + jsonObj.name);
			      },
			      dataType:"text"
			   });
			});
				// ajax--get请求
				$("#getBtn").click(function(){

					$.get("http://localhost:8080/ajax_test/ajaxServlet",
							{action:"jQueryGet"},
							function (data) {
								// alert(data);
								// var jsonObj = JSON.parse(data);
								// $("#msg").html("编号: " + jsonObj.id + " , 名称: " + jsonObj.name);
								$("#msg").html("编号: " + data.id + " , 名称: " + data.name);
							},"json");
					
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
					$.post("http://localhost:8080/ajax_test/ajaxServlet",
							"action=jQueryPost",
							function (data) {
								$("#msg").html("编号: " + data.id + " , 名称: " + data.name);
							},"json");
					
				});

				// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					// 调用
					$.getJSON("http://localhost:8080/ajax_test/ajaxServlet","action=jQueryGetJSON",function (data) {
						$("#msg").html("编号: " + data.id + " , 名称: " + data.name);
					});
				});

				// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					$.getJSON("http://localhost:8080/ajax_test/ajaxServlet",
							"action=jQuerySerialize&"+$("#form01").serialize(),
							function (data) {
								$("#msg").html("编号: " + data.id + " , 名称: " + data.name);
							}
					);
				});
				
			});
		</script>
	</head>
	<body>
		<div>
			<button id="ajaxBtn">$.ajax请求</button>
			<button id="getBtn">$.get请求</button>
			<button id="postBtn">$.post请求</button>
			<button id="getJSONBtn">$.getJSON请求</button>
		</div>
		<!--自己添加一个,用于局部更新数据-->
		<div id="msg"></div>
		<br/><br/>
		<form id="form01" action="http://localhost:8080">
			用户名：<input name="username" type="text" /><br/>
			密码：<input name="password" type="password" /><br/>
			下拉单选：<select name="single">
			  	<option value="Single">Single</option>
			  	<option value="Single2">Single2</option>
			</select><br/>
		  	下拉多选：
		  	<select name="multiple" multiple="multiple">
		    	<option selected="selected" value="Multiple">Multiple</option>
		    	<option value="Multiple2">Multiple2</option>
		    	<option selected="selected" value="Multiple3">Multiple3</option>
		  	</select><br/>
		  	复选：
		 	<input type="checkbox" name="check" value="check1"/> check1
		 	<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
		 	单选：
		 	<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
		 	<input type="radio" name="radio" value="radio2"/> radio2<br/>
		</form>
		<button id="submit">提交--serialize()</button>
	</body>
</html>

$.get方法和$.post方法

我们可以使用这两个方法来更加简化:
$.get()方法底层调用的是$.ajax()方法,只是少似了一个参数.,就是GET.
$.post()方法底层调用的是$.ajax()方法,只是少似了一个参数.,就是POST.

url 请求的资源路径
data 发送给服务器的数据
格式有: name=value&name=value 或 { key:value,key:value}
callback 成功的回调函数
type 返回的数据类型: text , xml , json

$.getJSON方法

固定以get请求的方式发起ajax请求,返回的数据类型固定是json对象
url 请求的url地址
data 发送给服务器的数据
callback 成功的回调函数

表单序列化serialize()

它可以把表单中,所有表单项,都以name=value&name=value的形式获取到它们的信息.

使用示例:
form对象.serialize()