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>

　　效果如下：界面很垃圾。

Ajax以及类似百度搜索框的demo的更多相关文章

  1. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  2. 使用DWR实现自动补全 类似百度搜索框的自动显示效果

    使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引 ...

  3. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  4. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  5. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  6. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  7. window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

    --------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...

  8. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  9. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

随机推荐

  1. mapreduce 关于小文件导致任务缓慢的问题

    小文件导致任务执行缓慢的原因: 1.很容易想到的是map task 任务启动太多,而每个文件的实际输入量很小,所以导致了任务缓慢 这个可以通过 CombineTextInputFormat,解决,主要 ...

  2. hrtimer 高精定时器使用例子

    在kernel,有个线程每个十秒往上层系统上报battery及USB的状态信息. 加入直接sleep 10 秒的话,插入USB的时候不能及时更新状态,这个时候就可以使用 hrtimer + wait ...

  3. ASP.NET MVC Framework

    ASP.NET MVC Framework是微软在ASP.NET中所添加的一组类库,这组类库可以使用Model-View-Controller的设计模式来开发ASP.NET的应用程序.它与现有的ASP ...

  4. c#的Marshal

    补充过程中~ 感觉应该是C#调用非托管的比较专门的class 例1. public struct ImageDataMsg { public char DataType; public int Srv ...

  5. 牛人眼中如何精通spring?

    现在市场上,spring框架很火,很多公司面试题直接将spring中某个api拿出来考面试人员,我去东南融通就遇到了这个情况,我拒绝做这些没有水准的试题,如果公司非让让我做,我想这样的公司也不值得我来 ...

  6. 使用 RMI + ZooKeeper 实现远程调用框架

    目录[-] 1 发布 RMI 服务1.1 定义一个 RMI 接口1.2 编写 RMI 接口的实现类1.3 通过 JNDI 发布 RMI 服务2 调用 RMI 服务3 RMI 服务的局限性4 使用 Zo ...

  7. CF 191 div2

    A.数据量很小,直接爆搞. #include <iostream> #include <cstdio> #include <algorithm> #include ...

  8. java.lang.NoSuchMethodError: javax.persistence.OneToMany.orphanRemoval()Z

    我现在用的是hibernate3.6final,出现了下面这个异常:(当我使用@ManyToOne时,不会出现异常,而且用@ManyToMany也正常) Caused by: java.lang.No ...

  9. Sharepoint 2013 启用搜做服务

    参考文件: http://www.cnblogs.com/jianyus/archive/2013/02/04/2891801.html 1. 创建好网站集,进入网站内容,点击搜素,会出现如下错误:( ...

  10. kali linux

    1. Kali 2.0使用SSH进行远程登录  http://jingyan.baidu.com/article/eae07827a3e6bc1fec5485e3.html 一.配置SSH参数修改ss ...