Day 42 学习分享 - Ajax和JSON

最新推荐文章于 2024-10-06 20:16:20 发布

WrathPudge

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量124

点赞数

文章标签： java ajax

本文链接：https://blog.csdn.net/WrathPudge/article/details/107190236

版权

1. Ajax

1.1 Ajax的概念

Asynchronous JavaScript And XML

传统方式与服务器交互存在的弊端:
	如果要刷新网页中的某一部分, 那么整个网页都必须重新加载!

Ajax:
	局部刷新技术, 通过JS的方式请求后台, 获取数据,
	然后使用DOM技术根据后台获取的数据更新页面元素, 在获取数据的过程中, 浏览器不刷新
	这种方式也被称作异步请求!

1.2 Ajax的实现方式

1.2.1 原生JS代码实现用户名验证(GET方式)

// 前端
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
	function checkName(username) {
		// 1、创建ajax的核心对象XMLHttpRequest
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		// 2、监听服务器的返回状态
		xmlhttp.onreadystatechange = function() {
			// readyState=4:服务器完成对请求的处理  status=200：响应状态码,成功
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				// 4、获取来自服务器的响应结果
				var result = xmlhttp.responseText;
				if ( result == 1 ) {
					document.getElementById("result").innerHTML = "已存在X";
					document.getElementById("result").style.color = "red";
				} else {
					document.getElementById("result").innerHTML = "可用√";
					document.getElementById("result").style.color = "green";
				}
			}
		}
		
		// 3、发送请求
		var url = "${pageContext.request.contextPath}/checkName?username=" + username;
		xmlhttp.open("GET", url, true);
		xmlhttp.send();
	}
</script>
</head>
<body>
	<input id="username" onblur="checkName(value);" />
	<span id="result">结果</span>
</body>
</html>

// 后端

package com.test.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("all")
@WebServlet("/checkName")
public class CheckName extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
		// 获取用户名
		String username = request.getParameter("username");
		if ( "zhangsan".equals(username) ) {
			response.getWriter().write("1");
		} else {
			response.getWriter().write("0");
}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException {
		doGet(request, response);
	}
}

// POST方式的区别

// 3、发送请求
		var url = "${pageContext.request.contextPath}/checkName";
		var data = "username=" + username;
		xmlhttp.open("POST", url, true);
		xhlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send(data);
	}

1.2.2 Jquery封装后代码格式

// 标准版
$.ajax({
    url:"UsersServlet",
    data:"action=login&id=" + id,
    dataType:"text",
    type:"post",
    success: function(ret) {
        ...... 
    }
});

// 简化版
$.post/*或者get*/("UsersServlet", "action=login&id=" + id, function(ret) {
	......    
}, "text");

1.3 选择异步还是同步?

异步和同步的区别:
	同步:单线程
		请求发出之后, 在服务器没有返回结果之前, 客户端处于等待状态
		必须等服务器响应结果之后才能进行后续的操作
		在服务器处理请求的过程中, 客户端的js代码是处于阻塞状态!
	异步:多线程
		请求由另一个线程来完成, 完成之后处理响应的结果即可 
		客户端可以进行其他的操作, js代码也不会处于阻塞状态!
	
	大多数情况下, 几乎没有理由写同步请求.

2. JSON

2.1 JSON的概念

JavaScript Object Notation

JSON是一种轻量级的数据交换格式, 采用完全独立于编程语言的文本格式来储存和表示数据
由于其简洁性, JSON成为了理想的数据交换语言, 易于机器解析和生成, 可以有效的提升网络传输效率

2.2 JSON的格式

数组：[1,2,3]
对象：{name:"张三", age: 20}

复杂数组：[{name:"张三", age: 20}, {name:"李四", age: 30}, 1]
复杂对象：{total:50, data: [{name:"张三", age: 20}, {name:"李四", age: 30}]}

Json本质：特殊格式的字符串，特殊在字符串的结构，和js中的数组和对象一样一样的！
数组：[1,2,3]
数组格式的json串："[1,2,3]"
对象：{name: "张", age: 20}
对象格式的json串：'{name: "张", age: 20}'
数组中放对象：[{id:"11",name:"北京"}, {id:"12",name:"天津"}]
数组中放对象的json格式：'[{id:"11",name:"北京"}, {id:"12",name:"天津"}]'

2.3 为什么我们需要JSON

ajax就是通过js代码完成前后端的数据交互, 但是在后代响应的数据格式较为复杂的情况下, js不能够识别!
所以需要一种通用的语言来作为中间的桥梁转换数据
Java:List ===> json ===> 响应给ajax ===> 把json转js对象或数组 ===> 通过DOM技术操作页面元素

2.4 代码演示

// 转换代码示例
public static void main(String[] args) {
	Gson gson = new Gson();
	User user = new User("脏三", 20);
	List<User> uList = new ArrayList<User>();
	uList.add(new User("李四", 21));
	uList.add(new User("王五", 22));
	Map<String, Object> uMap = new HashMap<String, Object>();
	uMap.put("aa", 11);
	uMap.put("bb", 22);
	
	// java对象转json
	String json1 = gson.toJson(user);
	String json2 = gson.toJson(uList);
	String json3 = gson.toJson(uMap);
	/*System.out.println(json1); {name:"张三", age:20}
	System.out.println(json2); [{name:"张三", age:20},{name:"张三", age:20} ]
	System.out.println(json3);  {aa:11,bb:22}*/
	
	// json转java对象
	// json转对象
	User user1 = gson.fromJson(json1, User.class);
	// json转集合
	Type type = new TypeToken<List<User>>(){}.getType();
	List<User> uuList = gson.fromJson(json2, type);
	// json转map
	Type type2 = new TypeToken<Map<String, Object>>(){}.getType();
	Map<String, Object> map2 = gson.fromJson(json3, type2);
	System.out.println(user1);
	System.out.println(uuList);
	System.out.println(map2);
}