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. 向ibus-table-wubi里添加属于自己的输入法（98五笔）

    写在前面: 第三步整理每行的结构相对来说算是最难的,我的方法是先用文本编码转换专家将文本编码转换成utf-8无BOM(linux下有转换命令不会用,一定要是无BOM否则会在linux下打开乱码),再用 ...

  2. java中文乱码问题

    •ASCII ØASCII使用7个比特(bit)进行字符编码,最多可以表示的字符数量为27(128)个字符,这些字符包括了大小写英文字母.阿拉伯数字.标点符号.控制字符和其他符号.每个字符用一个字节表 ...

  3. golang ODBC 访问access数据库（问题解决之心理路程）

    最近项目需要,需要操作access,以前是用VC++ OLE访问,网络用ACE库,感觉很庞大...决定用go试试 网上用的最多的就是这个https://github.com/weigj/go-odbc ...

  4. 记NOIP分数出来前

    咩~成绩还没有出来呢!但是拿到了每个人的程序,还有一堆民间的数据.我测了好多不同的数据,基本上D1T1,D2T1,D2T2的都是暴力解决掉的,没有什么问题,唯一就是D1T2的link那一题,写的时候2 ...

  5. 第三章 线性表（C#实现）

    1.线性表 概念::零个或多个数据元素的有序序列. 描述: 2.线性表的抽象数据类型: ADT线性表 Data:线性表的数据对象集合为{a1,a2,...,an},每个元素的类型均为DataType. ...

  6. CodeForces 150B- Quantity of Strings 推算..

    假设 k = 5 , n>k ,   (1,2,3,4,5)  -> 1=5,2=4,3任意 (2,3,4,5,6) -> 2=6,3=5,4任意...综合上面的可得出1=3=5,2 ...

  7. python 面试相关

    python单例模式: Python真的需要单例模式吗?我指像其他编程语言中的单例模式. 答案是:不需要!  因为,Python有模块(module),最pythonic的单例典范.模块在在一个应用程 ...

  8. CSS样式中ClearBoth的理解

    在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位 ...

  9. 3.3 用NPOI操作EXCEL－－生成一张工资单

    这一节,我们将综合NPOI的常用功能(包括创建和填充单元格.合并单元格.设置单元格样式和利用公式),做一个工资单的实例.先看创建标题行的代码: //写标题文本 HSSFSheet sheet1 = h ...

  10. [译]MDX 介绍

    关于MDX MDX (Multi Dimensional eXpression language) 是非常强大的工具,可以将你的多维数据库/cube 发挥到极致. 本文会覆盖MDX基础,并且希望能使你 ...