一、基本说明
1、在ajax中，获取数据时，一般是将数据库中的数据通过Java对象存储在list中，而浏览器不能解析Java对象，所以在后台响应数据时，只能将数据响应给js,响应数据必须遵循js代码规范才能被解析，
此时有三种解决方式（规范方式）：
① json；
② XML:一个数据表中有多少条记录，对应的xml文件就有多少个子标签；
③ 直接响应成普通字符串（HTML）；
2、json介绍
①Json只是js声明对象的一个格式，是将数据按照json的格式拼接好的字符串，方便使用eval()方法将接受的字符串数据直接转换为js的对象。所谓json，无非就是把Java对象在后台服务器直接拼成json格式的字符串，然后响应到前台页面，用eval()转向，相当于把一个Java对象的数据，转换为一个js对象来存储，以json格式的字符串的形式响应到前端页面。json主要用来做数据传输，xml主要做配置文件。
②JSON一种简单的数据格式，比xml更轻巧。
③JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
④JSON 用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。
⑤JSON的规则很简单：对象是一个无序的 “ ‘名称:值’对 ” 集合。一个对象以 “{” 开始，以 “}” 结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4） 并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
元素值可具有的类型：string, number, object, array, true, false, null
JSON 用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。
可用大括号分级嵌套数据。 对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。
JSON的规则很简单：对象是一个无序的“‘名称:值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。 规则如下: 1）映射用冒号（“：”）表示。名称:值 2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2 3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2} 4） 并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
元素值可具有的类型：string, number, object, array, true, false, null
3. Gson 理解
GSON是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库。可以将一个Json字符转成一个Java对象，或者将一个Java转化为Json字符串。
特点： a、快速、高效
b、代码量少、简洁
c、面向对象
d、数据传递和解析方便
方法：
①Gson提供了public String toJson(Objcet obj)方法，可以将 对象/数组/集合 转化为json字符串。
二、未封装代码记录
1. second.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax second</title>
<!--
需求分析：
1.在当前页面内显示查询结果，考虑使用ajax;
2.创建ajax函数；
3.调用ajax函数发送请求到UserServlet;
4.调用业务层获取对应的数据。
-->
<script type="text/javascript">
//获取后台数据
function getData(){
//获取用户请求信息
var name=document.getElementById("uname").value;
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写onreadystatechange函数
ajax.onreadystatechange=function(){
//判断ajax状态码
if(ajax.readyState==4){
//判断响应状态码
if(ajax.status==200){
//获取响应数据
var result=ajax.responseText;
/*对于服务器返回的JSON字符串，需要将该字符串放于eval()中执行一次做对象化处理，
这种方法适合以普通javascipt方式获取json对象 */
eval("var user="+result);
//处理响应数据
//获取table表格对象
var utable=document.getElementById("utable");
//为了清空原来的表格数据，然后动态添加
utable.innerHTML="";
//插入新的行(插入表格头，为了清空表格数据时仍然保留表格头信息)
var tr=utable.insertRow(0);
var cell0=tr.insertCell(0);
cell0.innerHTML="编号";
var cell1=tr.insertCell(1);
cell1.innerHTML="名称";
var cell2=tr.insertCell(2);
cell2.innerHTML="价格";
var cell3=tr.insertCell(3);
cell3.innerHTML="位置";
var cell4=tr.insertCell(4);
cell4.innerHTML="描述";
//插入新的行
var tr=utable.insertRow(1);
var cell0=tr.insertCell(0);
cell0.innerHTML=user.uid;
var cell1=tr.insertCell(1);
cell1.innerHTML=user.uname;
var cell2=tr.insertCell(2);
cell2.innerHTML=user.price;
var cell3=tr.insertCell(3);
cell3.innerHTML=user.loc;
var cell4=tr.insertCell(4);
cell4.innerHTML=user.desc;
}
}
}
//发送请求
ajax.open("get","user?name="+name);
ajax.send(null);
}
</script>
<style>
</style>
</head>
<body>
<h3>欢迎来到一曦的英雄商店</h3>
<hr>
请输入英雄名称： <input type="text" name="uname" value="" id="uname">
<input type="button" value="搜索" onclick="getData()">
<br><hr>
<table border="1px" id="utable">
</table>
</body>
</html>2. UserServlet.java
package com.yixi.servlet;
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;
import com.google.gson.Gson;
import com.yixi.entity.User;
import com.yixi.service.UserService;
import com.yixi.serviceImpl.UserServiceImpl;
@WebServlet("/user")
public class UserServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setCharacterEncoding("utf-8");
/*
* 用xml响应数据时，设置传送内容为"text/xml",以utf-8的格式打开
* resp.setContentType("text/xml;character=utf-8");
* 用json或者纯字符串格式响应数据时，设置传送内容为"text/xml",以utf-8的格式打开
* resp.setContentType("text/html;character=utf-8");
*/
resp.setContentType("text/xml;character=utf-8");
//获取请求信息
String name=req.getParameter("name");
System.out.println("用户请求信息为："+name);
//处理请求信息
//获取业务层对象
UserService us=new UserServiceImpl();
//处理业务
User user=us.getUserInfoService(name);
System.out.println(user);
//响应处理结果
/**
* 响应方式1：json格式(将java对象转换为json格式输出)
* resp.getWriter().write(new Gson().toJson(user));
* new Gson().toJson(user)输出结果如下：
* {"uid":1,"uname":"德邦","price":13.33,"loc":"打野","desc":"德邦很厉害"}
*/
resp.getWriter().write("<user><uid>1</uid><name></name><price></price><</user>");
}
}
三、封装后代码记录
1. ajaxUtil.js(封装 ajax 代码的 js 文件)
/* function deal200(a){
//①获取响应内容
var result=a.responseText;
//②获取元素对象
var showDiv=document.getElementById("show-div");
showDiv.innerHTML=result;
}
function deal404(){
var showDiv=document.getElementById("show-div");
showDiv.innerHTML="请求资源不存在";
}
function deal500(){
var showDiv=document.getElementById("show-div");
showDiv.innerHTML="服务器繁忙";
}
function dealWait(){
当响应结果还没有过来时，使用动态图片刷新界面来显示
var showDiv=document.getElementById("show-div");
showDiv.innerHTML="<img src='img/refresh.gif' />";
}*/
//获取后台数据(deal200是js函数，但是js函数可以直接作为参数传递执行，并且在js中，参数可以不完全赋值)
/**
*method：请求方式，值为get或者post
*url：请求地址
*data：没有值需要传入null,有请求数据要传入字符串数据，格式为a=1&b=2;
*deal200：接收一个带有形参的js函数对象；形参接收的对象是ajax引擎对象；
*deal404：接收一个js函数对象；
*deal500：接收一个js函数对象；
*async:接收一个bool对象，true为异步执行，false为同步。
*/
//此处deal200只是声明形参，并不是调用
function myAjax(method,url,data,deal200,deal404,deal500,async){
//创建ajax引擎对象，调用js函数getAjax();
var ajax=getAjax();
//复写onreadystatechange函数
ajax.onreadystatechange=function(){
//2.1.判断ajax状态码
if(ajax.readyState==4){
//2.1.1.判断响应状态码
if(ajax.status==200){
if(deal200){
deal200(ajax);
}
}else if(ajax.status==404){
if(deal404){
deal404();
}
}else if(ajax.status==500){
if(deal500){
deal500();
}
}
}else{
if(dealWait){
dealWait();
}
}
}
//发送请求
if("get"==method){
//url+data==null?"":"?"+data ****如果data不为空，再传递参数
ajax.open("get",url+(data==null?"":"?"+data),async);
ajax.send(null);
}else if("post"==method){
ajax.open("post",url,async);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(data);
}
}
//****通过函数获取ajax对象****
function getAjax(){
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
return ajax;
}
2. secondEncapsulation.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax first</title>
<script ype="text/javascript" src="js/ajaxUtil.js"></script>
<script type="text/javascript">
function getData(){
var name=document.getElementById("uname").value;
var data="name="+name;
//function(ajax){}是给形参deal200传参
myAjax("get","user",data,function(ajax){
//获取响应数据
var result=ajax.responseText;
//处理响应数据
alert(result);
});
}
</script>
<style>
#show-div{
border:1px solid;
width:200px;
height:100px;
}
</style>
</head>
<body>
<h3>欢迎来到一曦的英雄商店</h3>
<hr>
请输入英雄名称： <input type="text" name="uname" value="" id="uname">
<input type="button" value="搜索" onclick="getData()">
<br><hr>
<table border="1px" id="utable">
</table>
</body>
</html>3. UserServlet.java代码不变