AJAX技术之JSON

最新推荐文章于 2022-09-14 20:46:51 发布

NonShan

最新推荐文章于 2022-09-14 20:46:51 发布

阅读量507

点赞数

分类专栏： java学习文章标签： ajax json

本文链接：https://blog.csdn.net/nonshan/article/details/40790253

版权

java学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

通过之前的例子，我们了解到使用XML比较麻烦。因此在大多数情况下，如果不需要处理大量数据的话，我们可以使用JSON。

JSON 是一种轻量级的数据交换格式。便于人阅读和编写。同时也易于机器解析和生成。JSON比XML更简单。

可以登录JSON的官网常看更多。http://json.org/json-zh.html

编写一个简单的例子，从客户端传数据到服务器。

1、jsonDemo.html

①创建XMLHttpRequest对象。

对于不同的浏览器，实例化的方法也不相同。

②编写sendToServer函数。

在这里面拿到一个Car对象，调用①，使用post方法与服务器连接。

2、JsonDemoServlet.java

之前使用的是POST方法。所以我们再POST方法中编写代码。

String jsonString = readJSONFromReqeust(request);

拿到request中的jsonString。

实例化 jsonObject = new JSONObject(jsonString);

使用 jsonObject.getString方法拿到值。

代码：

jsonDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON DEMO</title>
<script type="text/javascript">
	var xhr;
	function xmlHttpRequest()
	{
		if(window.ActiveXObject)
			{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		else if(window.XMLHttpRequest)
			{
				xhr = new XMLHttpRequest();
			}
	}
	function sendToServer()
	{	
		var car = getCarObject();
		var carAsJson = JSON.stringify(car);
		xmlHttpRequest();
		xhr.onreadystatechange = handleResponse;
		xhr.open("POST","jsonDemo?timeStamp="+new Date().getTime(),true);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(carAsJson);
		
	}
	function handleResponse()
	{
		if(xhr.readyState==4)
			{
			if(xhr.status==200)
				{
					var responseMessageDiv = document.getElementById("ResponseMessage");
					if(responseMessageDiv.hasChildNodes()){
						responseMessageDiv.removeChild(responseMessageDiv.childNodes[0]);
					}
					var responseMessage = document.createTextNode(xhr.responseText);
					responseMessageDiv.appendChild(responseMessage);
				}
			}
	}
	function getCarObject(){
		return new Car("Dodge", "Coronet R/T", 1968, "yellow");
	}
	function Car(make,modle,year,color)
	{
		this.make = make;
		this.modle = modle;
		this.year = year;
		this.color = color;
	}
</script>
</head>
<body>
	<h1>Json Demo</h1>
	<form action ="#">
	<input type ="button" value = "Click Here To Send Data To The Server" onclick = "sendToServer();"/>
	</form>
	<h2>Server Response:</h2>
	<div id = "ResponseMessage">		
	</div>
</body>
</html>

2、JsonDemoServlet.java

package servlet;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.swing.JOptionPane;

import org.json.JSONObject;

public class JsonDemoServlet extends HttpServlet {

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

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String jsonString = readJSONFromReqeust(request);
		JSONObject  jsonObject = null;
		try {
			jsonObject = new JSONObject(jsonString);
			String make = jsonObject.getString("make");
			String year = jsonObject.getString("year");
			String color = jsonObject.getString("color");
			String responseText = "JSON Response:"+make+" "+year+" "+color;
			response.setContentType("text/xml");
			response.getWriter().println(responseText);
			System.out.println(jsonObject.getString("make"));
			System.out.println(jsonObject.getInt("year"));
			System.out.println(jsonObject.getString("color"));
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	
	private String readJSONFromReqeust(HttpServletRequest request){
		StringBuffer jsonString = new StringBuffer();
		String line = null;
		try {
			BufferedReader bReader = request.getReader();
			while((line = bReader.readLine())!=null){
				jsonString.append(line);
			}
		} catch (Exception e) {
			System.out.println("Read JSON Content From Client Server Error!!!");
			e.printStackTrace();
		}
		return jsonString.toString();
	}
}