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) 运行结果