js调用ajax以及JSON.parse()与JSON.stringify()的使用

GET请求

window.onload = function(){
		document.getElementsByName("username")[0].onblur = function(){
			//1、获取xmlHttpRequest对象
			var xmlHttpRequest = new XMLHttpRequest();
			//2、打开连接
			//xmlHttpRequest.open(method, url, async, username, password)
			//method:异步请求的是GET还是POST方法
			//url:请求访问哪个url
			//async:是否为异步请求，默认为true
			//username和password先不要管
			var method = "GET";
			var url = "${pageContext.request.contextPath}/checkServlet?username="+this.value;
			xmlHttpRequest.open(method, url);
			//3、发送
			//send(body)里面的body主要针对method为post的情况
			xmlHttpRequest.send(null);
			//4、设置回调函数
			xmlHttpRequest.onreadystatechange = function(){
				if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
					//xmlHttpRequest.responseXML;
					//回调结果有两种，一种是text（普通文本，html或者是json），一种是xml
					var result = xmlHttpRequest.responseText;
				}
			};
		};
	};

POST请求

//1、获取xmlHttpRequest对象
			var xmlHttpRequest = new XMLHttpRequest();
			//2、打开连接
			var method = "POST";
			var url = "${pageContext.request.contextPath}/checkServlet";
			xmlHttpRequest.open(method, url);
			//3、发送，这里特别一点，因为需要设置请求头才能获得数据
			xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xmlHttpRequest.send("username="+this.value);
			//4、设置回调函数
			xmlHttpRequest.onreadystatechange = function(){
				if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
					//xmlHttpRequest.responseXML;
					//回调结果有两种，一种是text（普通文本，html或者是json），一种是xml
					var result = xmlHttpRequest.responseText;
				}
			};

注意乱码问题

获取XML文件数据：

通过调用responseXML获取对象，然后再获取xml文件中的配置信息

//1、获取xmlHttpRequest对象
			var xmlHttpRequest = new XMLHttpRequest();
			//2、打开连接
			var method = "POST";
			var url = "${pageContext.request.contextPath}/checkServlet";
			xmlHttpRequest.open(method, url);
			//3、发送，这里特别一点，因为需要设置请求头才能获得数据
			xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xmlHttpRequest.send("username="+this.value);
			//4、设置回调函数
			xmlHttpRequest.onreadystatechange = function(){
				if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
					var doc = xmlHttpRequest.responseXML;
					var name = doc.getElementsByTagName("username")[0].firstChild.nodeValue;
				}
			};

当然，如何读取xml文件需要在请求访问的url中进行处理：

response.setContentType("text/html;charset=utf-8");
		InputStream in = request.getServletContext().getResourceAsStream("/message.xml");
		BufferedReader bufr = new BufferedReader(new InputStreamReader(in));
		PrintWriter writer = response.getWriter();
		String line = null;
		while((line = bufr.readLine())!=null){
			writer.println(line);
		}
		bufr.close();

POST请求返回json对象

window.onload = function(){
		document.getElementsByName("username")[0].onblur = function () {
			//1、获取xmlHttpRequest对象
			var xmlHttpRequest = new XMLHttpRequest();
			//2、打开连接
			var method = "POST";
			var url = "${pageContext.request.contextPath}/checkServlet";
			xmlHttpRequest.open(method, url);
			//3、发送，这里特别一点，因为需要设置请求头才能获得数据
			xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xmlHttpRequest.send("username="+this.value);
			//4、设置回调函数
			xmlHttpRequest.onreadystatechange = function(){
				if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
					var doc = xmlHttpRequest.responseText;
					var objs = JSON.parse(doc);
					//转换成json对象时，得到多个对象，这时需要遍历
					for(obj in objs){
						for(key in obj){
							//获取key
							console.log(key);
							//获取value
							console.log(obj[key]);
						}
					} 
					//json对象转换成字符串
					var json = JSON.stringify(objs);
					console.log(json);
				}
			};
		};

对应的在checkServlet中需要返回符合json格式的字符串

//获取post中body的参数
		String parameter = request.getParameter("username");
		System.out.println(parameter);
		User user = new User("andy",123);
		//使用gson获取符合json格式的字符串
		Gson gson = new Gson();
		String json = gson.toJson(user);
		PrintWriter writer = response.getWriter();
		writer.print(json);
		writer.close();