Ajax的介绍和使用
什么是Ajax
实例(搜索关键字,出来下拉框)
index.jsp
SearchServlet
什么是Ajax
Ajax 全名 async javascript and XML(异步JavaScript和XML)
是前后台交互的方法,也就是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具
Ajax是在不重新加载整个页面的状态下与服务器交换数据并更新部分网页的技术
是一个默认异步执行机制的方法(同步:async=false,异步:async=true)
同步请求(async=false):
同步请求是指当前发出请求后,浏览器什么都不能做
必须等到请求完成返回数据之后,才能执行后续的代码
也就是说,当运行到Ajax的时候,代码停止加载,页面进入假死状态,当Ajax执行完后页面才会解除假死状态
异步请求(async=true):
Ajax默认异步,异步请求是指发出请求的同时,浏览器还可以做任何事
Ajax发送请求不会影响页面的运行和用户的操作,相当于是在两条线上,各走各的,互不影响
Ajax不需要插件的支持,原生的js就能使用
实例(搜索关键字,出来下拉框)
我使用表格换掉了下拉框

index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>绥彼岸</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input id="keyWord" name="keyWord" οnkeyup="search()">
<ul id="list">

</ul>
<script>
    function search(){
        //得到输入框的值
        let keyWord=$("#keyWord").val()
        //发送到负责检索商品名称的servlet
        $.get("search.do",{keyWord},(resp)=>{
            //清空原来的选项
            $("#list").empty()
            //resp现在是从字符串变成了数组
            for(let n of resp){//foreach
                $("#list").append("<li>"+n+"</li>")
            }
        },"json");
    }

    //json
    //对象的字符串格式,json有固定的格式
    //将对象变成json
    //将json还原为对象
</script>
</body>
</html>

更多推荐

java Ajax