servlet+ajax实现智能搜索框提示

最新推荐文章于 2021-12-05 12:08:02 发布

清博学院

最新推荐文章于 2021-12-05 12:08:02 发布

阅读量144

点赞数

分类专栏：人工智能文章标签： ajax javascript json

原文链接：http://www.qingboit.com/nd.jsp?id=10#_np=2_367

版权

人工智能专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客探讨了在客户端使用JavaScript进行异步请求，通过GET方式提交关键字到后台，后台返回JSON数组。客户端利用JSON.parse()进行安全解析，避免了eval()可能带来的安全风险。文章还详细介绍了JSON.parse()与eval()的区别，并展示了如何使用原生JavaScript实现AJAX异步请求及数据显示。同时，文中给出了服务器端处理关键字并返回数据的示例代码。

摘要由CSDN通过智能技术生成

在搜索框输入关键字
异步提交给后台
后台返回json数组
客户端解析json生成dom客户端异步代码实现：

function getMoreContents()//获得用户关键字相关联的函数其实就是异步处理函数
{
var content=document.getElementById("keyword");
if(content.value="")
{
return;
}
xmlHttp=createxmlHttpRequest;
var url="index.jsp?keyword"+escape(content.value);
xnlHttp.open("GET",url,true);
//回调函数
xmlHttp.onreadyStateChange=callback;
xmlHttp.send(null);

}
//回调函数
function callback()
{
if(xmlHttp.readyState==4){
if(xmlHttp.readyState==200){
var result=xmlHttp.responseText;
//解析获得数据
var json=JSON.parse(result);//js对象

JSON.parse()和eval()之间的区别

JSON.parse()会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
而eval()则可以解析任何字符串，eval是不安全的。
比如下面的字符串：

var str = 'alert(1000.toString())';
eval(str);
JSON.parse(str);

用eval可以解析，并且会弹出对话框，而用JSON.parse()则解析不了。
其实alert并没有什么坏处，可怕的是如果用恶意用户在json字符串中注入了向页面插入木马链接的脚本，用eval也是可以操作的，而用JSON.parse()则不必担心这个问题。

//然后要给服务器端发送数据 ajax异步发送数据 原生js实现

//创建xmlHttp对象
function createxmlHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}

//显示内容
function setContext(json)
{
$.each(json,function(index,value){
var li="<li>"
li+=value+"</li>";
$("ul").append(li);
});
}

服务器端：

//获得关键字返回数组
//匹配的数据在哪里？？？我是自己写的一个数组
public List<String> getDate(String key)
{
List<String> list=new ArrayList<string>();
for(String data:datas){
if(data.contains(keyword)){
list.add(data);
}
}
return data;
}

Gson gson=new Gson();
String json=gson.toJson(data);
response.getWriler().writer(json.toString());