json的初步认识
关于智能搜索框慕课链接:http://www.imooc.com/learn/678
- 一：前端主要代码
1:界面搜索框
<div id="mydiv">
<input type="text" id="keyword" style="width: 300px;"
onkeyup="getInputElement()"> <input type="button" id="sub"
value="百度一下">
<div id="div2">
<table border="0" bgcolor="#FFFAFA" id="tab" cellpadding="0" cellspacing="0" width="300px;">
<tbody id="tabtb">
</tbody>
</table>
</div>
</div>
2：前端样式
<style type="text/css">
#mydiv {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
}
</style>
3:前端js
- 主要函数
var url = "myajax?keyword=" + escape(contents.value);
xhr.open("GET", url, true);
xhr.send(null);
- ajax状态码
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了 - http响应状态码
1 ** 信息，服务器收到请求，需要请求者继续执行操作
2 ** 成功，操作被成功接收并处理
3 ** 重定向，需要进一步的操作以完成请求
4 ** 客户端错误，请求包含语法错误或无法完成请求
5 ** 服务器错误，服务器在处理请求的过程中发生了错误 - *js代码
<script type="text/javascript">
//声明全局XMLHttpRequest-->xhr
var xhr;
function getInputElement() {
var contents = document.getElementById("keyword");
if (contents.value == "")
return;
else {
xhr = getMyXHR();
if (xhr != null) {
//调用回调函数，判断后端的数据交互状态
xhr.onreadystatechange = state_Change;
//新建url，escape:防止中文乱码
var url = "myajax?keyword=" + escape(contents.value);
xhr.open("GET", url, true);
xhr.send(null);
} else {
alert("Your browser does not support XMLHTTP.");
}
}
}
//创建XHR对象，使其对服务器传值
function getMyXHR() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for all new browsers
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
//回调函数，在后端代码相应之后调用
function state_Change() {
if (xhr.readyState == 4) {// 4 = "loaded"
if (xhr.status == 200) {// 200 = OK
var result = xhr.responseText;
//var json = JSON.parse("(" + result + ")");
var json = eval("(" + result + ")");
setContexts(json);
} else {
alert("Problem retrieving XML data");
}
}
}
//设置内容显示框
function setContexts(contents) {
clearData();
var size = contents.length;
for (var i = 0; i < size; i++) {
//循环动态增加节点
var nextNode = contents[i];
var tr = document.createElement("tr");
var td = document.createElement("td");
tr.setAttribute("border", "0");
tr.setAttribute("bgcolor", "#FFFAFA");
//为鼠标滑动增加事件
td.onmouseover = function() {
this.className = 'mouseOver';
}
td.onmouseout = function() {
this.className = 'mouseOut';
}
var text = document.createTextNode(nextNode);
//在td中中附加text
td.appendChild(text);
//在tr中附加td
tr.appendChild(td);
//在tbody中附加tr
var tab = document.getElementById("tabtb").appendChild(tr);
}
}
//清除数据
function clearData() {
var tab = document.getElementById("tabtb");
var size=tab.childNodes.length;
for(var i=size-1;i>=0;i--)
tab.removeChild(tab.childNodes[i]);
}
</script>
- 4：全部前端代码
<%@ 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>
<style type="text/css">
#mydiv {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
}
.mouseOver
{
background-color: #EDEDED;
}
.mouseOut
{
background-color: #FFF;
}
</style>
</head>
<body>
<div id="mydiv">
<input type="text" id="keyword" style="width: 300px;"
onkeyup="getInputElement()"> <input type="button" id="sub"
value="百度一下">
<div id="div2">
<table border="0" bgcolor="#FFFAFA" id="tab" cellpadding="0" cellspacing="0" width="300px;">
<tbody id="tabtb">
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
//声明全局XMLHttpRequest-->xhr
var xhr;
function getInputElement() {
var contents = document.getElementById("keyword");
if (contents.value == "")
return;
else {
xhr = getMyXHR();
if (xhr != null) {
//调用回调函数，判断后端的数据交互状态
xhr.onreadystatechange = state_Change;
//新建url，escape:防止中文乱码
var url = "myajax?keyword=" + escape(contents.value);
xhr.open("GET", url, true);
xhr.send(null);
} else {
alert("Your browser does not support XMLHTTP.");
}
}
}
//创建XHR对象，使其对服务器传值
function getMyXHR() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for all new browsers
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
//回调函数，在后端代码相应之后调用
function state_Change() {
if (xhr.readyState == 4) {// 4 = "loaded"
if (xhr.status == 200) {// 200 = OK
var result = xhr.responseText;
//var json = JSON.parse("(" + result + ")");
var json = eval("(" + result + ")");
setContexts(json);
} else {
alert("Problem retrieving XML data");
}
}
}
//设置内容显示框
function setContexts(contents) {
clearData();
var size = contents.length;
for (var i = 0; i < size; i++) {
//循环动态增加节点
var nextNode = contents[i];
var tr = document.createElement("tr");
var td = document.createElement("td");
tr.setAttribute("border", "0");
tr.setAttribute("bgcolor", "#FFFAFA");
//为鼠标滑动增加事件
td.onmouseover = function() {
this.className = 'mouseOver';
}
td.onmouseout = function() {
this.className = 'mouseOut';
}
var text = document.createTextNode(nextNode);
//在td中中附加text
td.appendChild(text);
//在tr中附加td
tr.appendChild(td);
//在tbody中附加tr
var tab = document.getElementById("tabtb").appendChild(tr);
}
}
//清除数据
function clearData() {
var tab = document.getElementById("tabtb");
var size=tab.childNodes.length;
for(var i=size-1;i>=0;i--)
tab.removeChild(tab.childNodes[i]);
}
</script>
</html>
- 二：servlet的web配置
- web配置
<?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_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>struts-web</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>myajax</servlet-name>
<servlet-class>com.control.MyAjax</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>myajax</servlet-name>
<url-pattern>/myajax</url-pattern>
</servlet-mapping>
</web-app>
- 三：后端代码
-servlet代码
1：放入示例数据代码
private static List<String> list = new ArrayList<String>();
static {
for (int i = 0; i < 10; i++) {
list.add("a" + i);
}
for (int i = 0; i < 5; i++) {
list.add("b" + i);
}
}
2：重写doGet方法（也可以重写doPost方法，取决于js时的运用）
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String keyword = req.getParameter("keyword");
List<String> result=getDate(keyword);
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.getWriter().write(JSONArray.fromObject(result).toString());
}
3：数据的判断填充
public List<String> getDate(String keyword)
{
List<String> tmpList=new ArrayList<String>();
for (int i = 0; i < list.size(); i++) {
if(list.get(i).contains(keyword))
tmpList.add(list.get(i));
}
return tmpList;
}
4:全部后端代码
package com.control;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class MyAjax extends HttpServlet {
private static List<String> list = new ArrayList<String>();
static {
for (int i = 0; i < 10; i++) {
list.add("a" + i);
}
for (int i = 0; i < 5; i++) {
list.add("b" + i);
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String keyword = req.getParameter("keyword");
List<String> result=getDate(keyword);
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.getWriter().write(JSONArray.fromObject(result).toString());
}
public List<String> getDate(String keyword)
{
List<String> tmpList=new ArrayList<String>();
for (int i = 0; i < list.size(); i++) {
if(list.get(i).contains(keyword))
tmpList.add(list.get(i));
}
return tmpList;
}
}
json 依赖jar包
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
