Ajax的响应内容的格式

最新推荐文章于 2022-01-01 12:18:42 发布

Re_view

最新推荐文章于 2022-01-01 12:18:42 发布

阅读量1.1k

点赞数

分类专栏： servlet 文章标签： Ajax

本文链接：https://blog.youkuaiyun.com/Re_view/article/details/99066870

版权

servlet 专栏收录该内容

28 篇文章

订阅专栏

响应内容的格式

获取响应内容(ajax接受数据的三种方式)：

1. 普通字符串：responseText

普通文本数据req.responseText得到返回的文本数据

2. json(重点)：responseText

讲述数据按照json的格式拼接好的字符串，使用eval方法,将接受的对象直接转换为js认识的对象——字符串
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
举例：
服务器端：
sb.append(“var a= {name:‘朱元璋’,age:32,zhiye:‘皇帝’};
var b = [{age:1,name:‘a’},{age:2,name:‘b’},{age:3,name:‘c’}];");
客户端：
eval(xmlHttp.responseText); //利用eval函数将返回的文本转化成js对象
alert(a.name);

3. XML数据：responseXML.返回document对象

通过document对象将数据从xml中获取出来
举例：
服务器端：
response.setContentType(“text/xml;charset=utf-8”);
通过ajax写xml数据最好使用utf-8
response.getWriter().println(“朱元璋 ”);
一端完整的xml数据,有根节点、形式良好的！
客户端：
req.responseXML.getElementsByTagName(“name”)[0].firstChild.data;
xpath解析xml数据：
selectNodes、selectSingleNode(只有ie适用)

代码实现

代码实现步骤：

在当前页面内显示查询结果，考虑使用ajax
创建ajax函数
调用ajax函数发送请求到UserServlet
调用业务层获取对应的数据

<%@ 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>

 <!-- 声明js代码域 -->
 <script type="text/javascript" src="js/ajaxUtil.js"></script>
 <script type="text/javascript">
 	//获取数据
 		function getData(){
 			//获取用户请求信息
 			var name=document.getElementById("uname").value;
 			//创建ajax引擎对象
 				var ajax;
 				if(window.XMLHttpRequest){
 					ajax=new XMLHttpRequest();
 				}else if(window.ActiveXObject){
 					ajax=new ActiveXObject("Msxml2.XMLHTTP");
 				}
 			//复写onreadystatechange
 			ajax.onreadystatechange=function(){
 				//判断ajax状态码
 				if(ajax.readyState==4){
 					//判断响应状态码
 					if(ajax.status==200){
 						//获取响应数据
 						var result=ajax.responseXML;
 							eval("var u="+result);
 						//处理响应数据
 							 //获取table表格对象
 							var ta=document.getElementById("ta");
 							ta.innerHTML="";
 							var tr=ta.insertRow(0);
 							var cell0=tr.insertCell(0);
 							cell0.innerHTML="编号";
 							var cell1=tr.insertCell(1);
 							cell1.innerHTML="名称";
 							var cell2=tr.insertCell(2);
 							cell2.innerHTML="价格";
 							var cell3=tr.insertCell(3);
 							cell3.innerHTML="位置";
 							var cell4=tr.insertCell(4);
 							cell4.innerHTML="描述";
 							//插入新的行
 							var tr=ta.insertRow(1);
 							var cell0=tr.insertCell(0);
 							cell0.innerHTML=u.uid;
 							var cell1=tr.insertCell(1);
 							cell1.innerHTML=u.uname;
 							var cell2=tr.insertCell(2);
 							cell2.innerHTML=u.price;
 							var cell3=tr.insertCell(3);
 							cell3.innerHTML=u.loc;
 							var cell4=tr.insertCell(4);
 							cell4.innerHTML=u.desc;	 
 					}
 				}
 			}
 			//发送请求
 			ajax.open("get","user?name="+name);
 			ajax.send(null);
 		}
 </script>
</head>
<body>
	<h3>欢迎访问商店</h3>
	<hr>
	英雄名称：<input type="text" name="uname" value="" id="uname"/>
		   <input type="button" value="搜索" onclick="getData()">
	<hr>
	<table border="1px" id="ta">
	</table>
</body>
</html>

package com.youdian.Servlet;

import java.io.IOException;

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

import com.youdian.service.UserSrevice;
import com.youdian.serviceImp.UserSeviceImp;
import com.youdian.pojo.User;
import com.google.gson.Gson;
@WebServlet("/user")

public class UserServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置请求编码格式
		req.setCharacterEncoding("utf-8");
		//设置响应编码格式
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/xml;charset=utf-8");
		//获取请求信息
		String name=req.getParameter("name");
		System.out.println("用户请求信息为："+name);
		//处理请求信息
			//获取业务层对象
			UserSrevice us=new UserSeviceImp();
			//处理业务
			User u=us.getUserInfoService(name);
			System.out.println("查询结果为:"+u);
		//响应处理结果
			resp.getWriter().write(new Gson().toJson(u));
	}
}

部分代码解释：

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。可以把字符串转成对象使用
封装Ajax通用工具，在该代码中我使用gson包，可以直接传入字符串，不用人工一个一个打(“name:”+u.getUname()…)
document.getElementById使用
语法：Element = document .getElementById ( ID )
参数：ID――必选项。字符串 (String)
返回值：Element――对象 (Element)
根据指定的 id 属性值得到对象。返回 id 属性值等于 ID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。如果无符合条件的对象，则返回 null
注： document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才是具体的值
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML
用XmlServlet.java进行响应比较复杂，可以改为jsp进行响应

package com.youdian.Servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/xml")
public class XMLServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置请求编码格式
		//设置响应编码格式
			resp.setCharacterEncoding("utf-8");
			resp.setContentType("text/xml;charset=utf-8");
		//获取请求信息
		//处理请求信息
		//响应处理结果
			resp.getWriter().write("<user><uid>1</uid><name>张三</name><price>11.11</price></user>");
	}
}

xml.jsp:

<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<user>
	<name>张三</name>
	<pwd>123</pwd>
</user>