18-ajax学习之返回数据处理xml和json

最新推荐文章于 2020-09-27 20:04:20 发布

会编程的阿强

最新推荐文章于 2020-09-27 20:04:20 发布

阅读量645

点赞数

分类专栏： JQuery和Ajax

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/50550784

版权

JQuery和Ajax 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var xmlHttpRequest=null;
	//创建Ajax引擎
	function getXmlHttpRequest() {
			if (window.ActiveXObject) {
				//ie
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} else {
				//firefox
				xmlHttpRequest = new XMLHttpRequest();
			}
	}
	//检查用户名是否重复
	function checkUserName() {
		//创建ajax引擎
		getXmlHttpRequest();
		//如果ajax引擎创建成功
		if (xmlHttpRequest) {
			//第一个参数表示请求的方式get/post
			//第二个参数指定url
			//第三个参数true表示使用异步机制
			//如果使用get方法请求，第一次进行请求，第二次从缓存里面取
			var url = "/Ajax/AjaxReturnType";
			//post提交数据
			var data="username="+$("username").value;
			xmlHttpRequest.open("post", url, true);
			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			//回调函数
			xmlHttpRequest.onreadystatechange =chuli;
			//发送请求,如果是get，写null， 可以传参数
			xmlHttpRequest.send(data);
		}
	}

	//回调函数
	function chuli() {
		if (xmlHttpRequest.readyState == 4) {
			var mes=xmlHttpRequest.responseXML.getElementsByTagName("mes");
			//<res>
			//    <mes>aaaa</mes>
			//</res>
			$("res").innerHTML=mes[0].childNodes[0].nodeValue;
		}
	}

	//$方法
	function $(id) {
		return document.getElementById(id);
	}
</script>
</head>
<body>
	用户名:(输入aaa重复)
	<input type="text" id="username" οnkeyup="checkUserName();" />
	<span id="res" style="color: red;"></span>
</body>
</html>


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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxReturnType
 */
@WebServlet("/AjaxReturnType")
public class AjaxReturnType extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxReturnType() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/xml; charset=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out=response.getWriter();
		String username=request.getParameter("username");
		if(username.equals("aaa")){
			out.print("<res><mes>用户名可以使用</mes></res>");
		}else{
			out.print("<res><mes>用户名不可以使用</mes></res>");
		}
		out.close();
	}

}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

json


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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxReturnType
 */
@WebServlet("/AjaxReturnType")
public class AjaxReturnTypeJson extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxReturnTypeJson() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/json; charset=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out=response.getWriter();
		String username=request.getParameter("username");
		if(username.equals("aaa")){
			//一个json数据
			//out.print("{'res':'该用户不可以使用','name':'张三'}");
			out.print("[{'res':'该用户可以使用1','name':'李四1'}],[{'res':'该用户可以使用1','name':'李四1'}]");
		}else{
			//多个json数据
			out.print("[{'res':'该用户可以使用2','name':'李四2'}],[{'res':'该用户可以使用2','name':'李四2'}]");
		}
		out.close();
	}

}

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var xmlHttpRequest=null;
	//创建Ajax引擎
	function getXmlHttpRequest() {
			if (window.ActiveXObject) {
				//ie
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} else {
				//firefox
				xmlHttpRequest = new XMLHttpRequest();
			}
	}
	//检查用户名是否重复
	function checkUserName() {
		//创建ajax引擎
		getXmlHttpRequest();
		//如果ajax引擎创建成功
		if (xmlHttpRequest) {
			//第一个参数表示请求的方式get/post
			//第二个参数指定url
			//第三个参数true表示使用异步机制
			//如果使用get方法请求，第一次进行请求，第二次从缓存里面取
			var url = "/Ajax/AjaxReturnTypeJson";
			//post提交数据
			var data="username="+$("username").value;
			xmlHttpRequest.open("post", url, true);
			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			//回调函数
			xmlHttpRequest.onreadystatechange =chuli;
			//发送请求,如果是get，写null， 可以传参数
			xmlHttpRequest.send(data);
		}
	}

	//回调函数
	function chuli() {
		if (xmlHttpRequest.readyState == 4) {
			//使用eval将字符串转换为json对象
			var res=eval("("+xmlHttpRequest.responseText+")");
			//res.res;
			var ress="";
			for(var i=0;i<res.length;i++){
				ress+=res[i].res+","+res[i].name;
			}
			$("res").innerHTML=ress;
		}
	}

	//$方法
	function $(id) {
		return document.getElementById(id);
	}
</script>
</head>
<body>
	用户名:(输入aaa重复)
	<input type="text" id="username" οnkeyup="checkUserName();" />
	<span id="res" style="color: red;"></span>
</body>
</html>