XMLHttpRequest发送JSON请求

1.前言

现在Ajax技术已逐步使用JSON响应来获取传统的XML响应。当服务器响应数据量较大，而且响应数据有复杂的结构关系时，使用JSON响应是很好的选择。

2.例子

下面的例子示范一个用户根据种类查看图书的示例，该服务器响应是N本图书信息，它们具有数据量较大，而且具有复杂的结构关系的特征，为此考虑使用JSON响应进行处理。

（源码）

1)        下面是提供服务器相应的Servlet代码。

@WebServlet(urlPatterns={"/chooseBook"})
public class ChooseBookServlet extends HttpServlet
{
	public void service(HttpServletRequest request ,
		HttpServletResponse response)
		throws IOException , ServletException
	{
		String idStr = (String)request.getParameter("id");
		int id = idStr == null ? 1 : Integer.parseInt(idStr);
		List<Book> books = new BookService().getBookByCategory(id);
		response.setContentType("text/html;charset=GBK");
		PrintWriter out = response.getWriter();
		out.println(new JSONArray(books));
	}
}

2) BookService是一个简单的业务逻辑组件，它直接使用了一个Map来模拟系统数据库。BookService类代码如下。

 public class BookService
{
	// 模拟内存中数据库
	static Map<Integer , List<Book>> bookDb =
		new LinkedHashMap<>();
	static
	{
		// 初始化bookDb对象
		List<Book> list1 = new ArrayList<>();
		List<Book> list2 = new ArrayList<>();
		List<Book> list3 = new ArrayList<>();
		list1.add(new Book(1 , "Java" , "owen" , 109));
		list1.add(new Book(2 , "Java EE" , "owen" , 99));
		list1.add(new Book(3 , "Android" , "owen" , 89));
		list2.add(new Book(4 , "西游记" , "吴承恩" , 23));
		list2.add(new Book(5 , "水浒" , "施耐庵" , 20));
		list3.add(new Book(6 , "乌合之众" , "古斯塔夫.勒庞" , 16));
		list3.add(new Book(7 , "不合时宜的考察" , "尼采" , 18));
		bookDb.put(1 , list1);
		bookDb.put(2 , list2);
		bookDb.put(3 , list3);
	}
	public List<Book> getBookByCategory(int categoryId)
	{
		return bookDb.get(categoryId);
	}
}

3)        当服务器向浏览器生成符合JSON格式字符串以后，浏览器端需要解析该JOSN字符串，将它解析成JavaScript对象或JavaScript数组。一旦将服务器响应数据“转换“成JavaScript对象或JavaScript数组，接下来使用DOM将响应显示出来即可。下面是JSON响应回调函数代码。

// 定义处理响应的回调函数
function processResponse()
{
	// 响应完成且响应正常
	if (xmlrequest.readyState == 4)
	{
		if (xmlrequest.status == 200)
		{
			var bookTb = document.getElementById("book");
			// 删除bookTb原有的所有行
			while(bookTb.rows.length > 0)
			{
				bookTb.deleteRow(bookTb.rows.length - 1);
			}
			// 获取服务器的JSON响应
			// 并调用eval()函数将服务器响应解析成JavaScript数组
			var books = eval(xmlrequest.responseText);
			// 遍历数组，每个数组元素生成一个表格行
			for (var i = 0 , len = books.length ; i < len ; i++)
			{
				var tr = bookTb.insertRow(i);
				// 依次创建4个单元格，并为单元格设置内容
				var cell0 = tr.insertCell(0);
				cell0.innerHTML = books[i].id;
				var cell1 = tr.insertCell(1);
				cell1.innerHTML = books[i].name;
				var cell2 = tr.insertCell(2);
				cell2.innerHTML = books[i].author;
				var cell3 = tr.insertCell(3);
				cell3.innerHTML = books[i].price;
			}
		}
		else
		{
			//页面不正常
			window.alert("您所请求的页面有异常。");
		}
	}
}

4)        运行结果