Ajax以及类似百度搜索框的demo
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>
效果如下：界面很垃圾。
