Ajax以及类似百度搜索框的demo

最新推荐文章于 2021-10-24 11:48:08 发布

weixin_33726943

最新推荐文章于 2021-10-24 11:48:08 发布

阅读量115

点赞数

文章标签： json java 数据库

本文介绍如何通过Ajax技术从服务器获取JSON格式的数据，并在客户端解析这些数据以获取特定属性值的过程。包括了基本的Ajax请求实现、JSON对象与字符串的相互转换，以及在不同浏览器环境下对XMLHttpRequest的兼容性处理。此外，还展示了如何利用类似百度搜索框的事件机制进行AJAX调用，实现动态数据加载的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

public class Ajax01 extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		JSONObject jo = new JSONObject();
		jo.put("mingzi", "chenchunqiu");
		jo.put("age", 33);
		out.print(jo);//把信息发送到前台，便于前台ajax对象XMLHttpRequest的resonpseText属性获取到jsonStr,即获取到json字符串
		out.close();
	}
}

function loadInfo(){
		//步骤1.获取xml对象
		var xhr ;//new XMLHttpRequest();
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			xhr=new ActiveXObject("Microsoft.XMLHTTP");
		}
		//发送请求
		xhr.open("get", "getAjax01", true);
		
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				alert(xhr.responseText);//xhr.responseText()获取的是json字符串
				//JSON.stringify(jsonobj); //可以将json对象转换成json对符串 
				var jsonObj = eval('(' + xhr.responseText + ')');//可以将json字符串转换成json对象,注意需要在json字符
				//外包裹一对小括号,JSON.parse(jsonstr);这种方式也可以把json字符串转换成json对象。因为下面要
				//用的.age这种.属性的方式访问属性值，所以需要转换成json对象。
				alert("姓名："+jsonObj.mingzi);
				alert("年龄："+jsonObj.age);		
		}
		}
		
		xhr.send(null);
	}

　　扩展，类似百度搜索框风格的ajax实现。

　　百度搜索框绑定的js事件：onkeyup()事件。

<script type="text/javascript">
	function getXhr(){
		var xhr;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else {
			//ie浏览器
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		return xhr;
	}
	/*
		1.录入搜索内容
		2.js中得到值，然后ajax中发送，service中进行查询，然后返回jsonStr,
		3.ajax中转换为jsonObj,得到jsonObj的值。
	*/
	function doSearch(){
		var xhr = getXhr();
		var sousuo = document.getElementById("sousuo").value;//获取输入框的值
		xhr.open("get","getSearch?sousuoValue="+sousuo+"",true);
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				var jsonStr = xhr.responseText;
				//var jsonObj = JSON.parse(jsonStr);这种方式在ie中不支持，chrome中可以正常使用
				var jsonObj = eval('(' + jsonStr + ')');//这种转换方式在ie11，chrome中都可以正常使用。
				//eval('(' + jsonstr + ')');
				var keyValue = jsonObj.keyValue;//获取json对象的keyValue,属性。
				//alert("keyValue:"+keyValue);
				document.getElementById("sousuoFhz").value = keyValue;
				document.getElementById("sousuo").focus();//使搜索框获得焦点
			}
		}
		xhr.send(null);
		
	}
</script>

<body>
	失去焦点值：<input type="text" onclick="getAjax()" id="a" /></br>
	userName:<input type="text" onblur="checkName()" id="userName" /><span class="tishi" id="span"></span></br>
	password:<input type="text" onblur="checkPassWord()" id="password" /></br>
	
	<div align="center">
　　　　<!--搜索框事件，onkeyup--> 
　　　　<input type="text" id="sousuo" onkeyup="doSearch()" /> <input type="button" value="搜索" /></br>
 　　　 <input type="text" id="sousuoFhz" /> 
　　</div> 
</body>

　　Java代码：

public class GetSearch extends HttpServlet{
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setCharacterEncoding("utf-8");
		System.out.println("开始了。。。");
		PrintWriter out = response.getWriter();
		JSONObject jsonObj = new JSONObject();
//		jsonObj.put("", value)
		String sousuoValue = request.getParameter("sousuoValue");
		DBUtil util = new DBUtil();
		Connection conn= util.getConnection2();
		PreparedStatement prep = null;
		ResultSet rst = null;
		String aac003 = "";
		try {
			prep = conn.prepareStatement("select aac003 from ac01 where aac002 like '%"+sousuoValue+"%'");
			rst = prep.executeQuery();
			if(rst.next()){
				aac003 = rst.getString("aac003");
				System.out.println("姓名："+aac003);
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			System.out.println("获取prep失败");
		}
		jsonObj.put("keyValue", aac003);
		out.print(jsonObj);//向前台传递后台获取到的值
		try {
			rst.close();
			prep.close();
			conn.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
}

　　DBUtil代码

/**
	 * 返回一个Connection,非空
	 * add by weiyongle 0113
	 * @return
	 */
	public Connection getConnection2(){
		String driverName = "oracle.jdbc.driver.OracleDriver";
		String url = "jdbc:oracle:thin:@10.162.128.131:1521/ybrsjhk";
		String username = "dgsbkf_ggyw";
		String pwd = "aa";
		
		try {
			Class.forName(driverName);
			conn = DriverManager.getConnection(url,username,pwd);
			
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
		return conn;
	}

　　web.xml代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <servlet>
  	<servlet-name>getSearch</servlet-name>
  	<servlet-class>com.java1234.web.GetSearch</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>getSearch</servlet-name>
  	<url-pattern>/getSearch</url-pattern>
  </servlet-mapping>
</web-app>

　　效果如下：界面很垃圾。