ajax入门 json格式（①异步校验用户名是否存在 ②站内搜索）

最新推荐文章于 2022-01-29 17:08:09 发布

佛系

最新推荐文章于 2022-01-29 17:08:09 发布

阅读量377

点赞数

分类专栏： JavaWeb 文章标签： ajax入门 json对象格式异步校验用户名是否存在站内搜索

本文链接：https://blog.csdn.net/weixin_41667774/article/details/79372655

版权

JavaWeb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Ajax

一、Description

AJAX：Asynchronous(异步的) Javascript And XML
1.什么是同步，什么是异步
同步现象：客户端发送请求到服务器，当服务器端返回响应前，客户端一直处于等待卡死状态。当服务器端返回响应后，页面会被刷新。用户体验不好。
异步现象：客户端发送请求到服务器，当服务器返回响应前，客户端可以随意做其他事情。当服务器端返回响应后，只会刷新局部页面，用户体验较好。
2.ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以进行其他任意操作，直到服务器端将数据返回给Ajax引擎，会触发你设置的事件，执行自定义的js逻辑代码完成页面的某种功能。

Ajax：只刷新局部页面的技术
- JavaScript：更新局部的网页
- XML：一般用于请求数据和响应数据的封装
- XMLHttpRequest对象：发送请求到服务器并获得返回结果
- 异步：发送请求后不等返回结果，由回调函数处理结果
- CSS：美化页面样式

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力

方法
open(method,url,async);建立与服务器的连接 “get|post”,”url?name=tom”,”true|false”(默认异步为true)
send(content); 发送请求一般get为null;post即带参数传过去
setRequestHeader(header,value);设置请求的头信息
常用属性
readyState:类型short；只读（客户端的状态）
responseText:类型String;只读
responseXML:类型Document;只读
status：类型short;只读（服务器端状态）
事件处理器
onreadystatechange

js的原生Ajax技术

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据

Demo(比较同步与异步的区别以及体验一下原生js的Ajax)
ajax.html:

<script type="text/javascript">
    //js原生ajax引擎
    function  fn1() {
        //1.创建XMlHttpRequest
        var xhr = new XMLHttpRequest();
        //2.绑定监听事件
        xhr.onreadystatechange=function () {
            //5.接收数据
            if (xhr.readyState==4&&xhr.status==200){
                var result = xhr.responseText;
                document.getElementById("span1").innerHTML=result;
            }
        }
        //3.建立连接
        xhr.open("GET","/servlet/ajaxServlet",true);
        //4.发送请求
        xhr.send();
    }

    function  fn2() {
        //1.创建XMlHttpRequest
        var xhr = new XMLHttpRequest();
        //2.绑定监听事件
        xhr.onreadystatechange=function () {
            //5.接收数据
            if (xhr.readyState==4&&xhr.status==200){
                var result = xhr.responseText;
                document.getElementById("span2").innerHTML=result;
            }
        }
        //3.建立连接
        xhr.open("GET","/servlet/ajaxServlet",false);
        //4.发送请求
        xhr.send();
    }
</script>
<body>
    <input type="button" value="异步请求" onclick="fn1()"><span id="span1" ></span>
    <br/>
    <input type="button" value="同步请求" onclick="fn2()"><span id="span2" ></span>
    <br/>
    <input type="button" value="异步互不干扰" onclick="alert()">
</body>

AjaxServlet.java

 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //睡眠5秒钟，比较同步与异步的区别
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        resp.getWriter().write(Math.random()+"");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doGet(req,resp);
    }

==》小结如下：
在客户端执行操作时，同步只能卡死等待客户端响应，而异步可以随意做其他任何事情。
点击同步请求按钮时，线程睡眠5秒期间，客户端处于卡死状态，点击异步互不干扰按钮，没有反应，一定等数据显示以后，才弹框
这里写图片描述
点击异步请求按钮时，线程睡眠5秒期间，客户端可以随意干其他事情，点击异步互不干扰按钮，触发事件，弹框。

三、json数据格式

1)对象格式：{“key1”:obj,"key2":obj,"key3":obj}
2)数组/集合格式：[obj,obj,obj,obj...]
例：①user对象用json数据格式来表示：

{"username":"张三","password":"12345","age":12}

②List< Product>用json数据格式来表示

[
     {"name":"小米","price":2300},
     {"name":"苹果","price":8900},
     {"name":"华为","price":5000}
]

注意：
1)对象格式和数组格式可以互相嵌套
2)json格式中key是字符串，value是Object

DemoCode:
①案例一

<script language="JavaScript">
    /**
     * 案例一
     *  {key:value,key:value}
     *  
     * class Person{
     *    String firstname = "张";
     *    String lastname = "三丰";
     *    Integer age = 100;
     * }
     * 
     * Person p = new Person();
     * System.out.println(p.firstname);
     */
    var person = {"firstname":"张","lastname":"三丰","age":100};
    //取出firstname
    alert(person.firstname);
    //取出age
    alert(person.age);
 </script>

②案例二
数组或者list中存放的可以是对象格式：

<script language="JavaScript">
    /**
     * 案例二
     *  [{key:value,key:value},{key:value,key:value}]
     *  
     */
     var list = [
                  {"firstname":"张","lastname":"三丰","age":100},
                  {"firstname":"胡","lastname":"四丰","age":60}
                ];
     //取出张
    alert(list[0].firstname);
    //取出胡的age
    alert(list[1].age);
  </script>

③案例三
在对象json格式value是obj类型，所以可以为任何类型，包括list

<script language="JavaScript">
   /**
     * 案例三
     * {
     *   "param":[{key:value,key:value},{key:value,key:value}]
     * }
     *  
     *    json的格式嵌套
    *    json有两种格式：
    *    1.对象格式：{"key1":obj,"key2":obj,"key3":obj}
    *    2.数组/集合格式：[obj,obj,obj]
     */

     var telephone = {
         "phone":[
                   {"name":"小米","price":2000},
                   {"name":"华为","price":4000}
                ]
   };
     //取出华为
    alert(telephone.phone[1].name);

  </script>

④案例四：
案例四实质上与案例三相同，都是强调json对象格式中value可以是obj类型

 <script language="JavaScript">
   /**
     * 案例四
     * {
     *   "param1":[{key:value,key:value},{key:value,key:value}],
     *   "param2":[{key:value,key:value},{key:value,key:value}],
     *   "param3":[{key:value,key:value},{key:value,key:value}]
     * }
     *  
     *  
     */
     var za = {
       "phone":[
                 {"name":"小米","price":2000},
                 {"name":"华为","price":4000}
              ],
       "frigde":[
                 {"name":"海尔","price":2000},
                 {"name":"西门子","price":4000}
                ],
       "food":[
                 {"name":"好丽友","price":"中等"},
                 {"name":"坚果","price":120}
              ]
   };
     //取出坚果
   alert(za.food[1].name);
    //取出中等
    alert(za.food[0].price);
   //取出西门子
    alert(za.frigde[1].name);
  </script>

⑤案例五（即为对象格式和list格式的嵌套）

<script language="JavaScript">
    /**
     * 案例五
     * {
     *   "param1":"value1",
     *   "param2":{},
     *   "param3":[{key:value,key:value},{key:value,key:value}]
     * }
     *  
     *  
     */
     var dxqiantao = {
         "key1":"value1",
         "person":{"firstname":"老王","age":30,"lastname":"老张"},
         "listperson":[
                         {"firstname":"老王","age":50,"lastname":"老张"},
                         {"firstname":"老卢","age":10,"lastname":"老赵"}
                      ]
    };
     //取出老王
    alert(dxqiantao.listperson[0].firstname);
    alert(dxqiantao.person.firstname);
    //取出value1
    alert(dxqiantao.key1);
    //取出老张
    alert(dxqiantao.person.lastname);
  </script>

Jquery的Ajax技术（重要）

$.ajax({
            option1:value,
            option2:value,
            option3:value
           ...
});

async:默认是true代表异步
url:请求服务器端地址
type:请求方式 get/post
data:发送到服务器端的参数，建议用json格式
dateType:服务器端返回的数据类型，常用text和json
success:成功响应执行的函数
error:失败响应执行的函数
例：

$(function () {
        $("#tijiao").click(function () {
            var name = $("#email").val();
            var pwd = $("#password2").val();
            $.ajax({
                //跨域
                url:"http://localhost:8083/home/register",
                type:"post",
                data:{"name":name,"pwd":pwd},
                success:function (data) {
                    window.location.href="http://localhost:8080/home/login.html";
                },
                error:function () {
                    alert("error");
                }


            });
        });
    })

Demo1: 异步校验用户名是否存在
思路如图：
这里写图片描述

Code
register.jsp

<script type="text/javascript">
    /*失去焦点执行功能
    * 为输入框绑定onblur事件=function(){
    * 1.获取表单数据
    * 2.通过ajax引擎将数据提交到后台校验
    * 3.获取ajax返回值
    * } 
    * */
    $(function () {//加载页面
        //为输入框绑定事件
        $("#username").blur(function () {
            //1.失去焦点获得输入框的内容
            var usernameInput = $("#username").val();
            //2.去服务器校验该用户是否存在===》ajax
            $.ajax({
                    url:"/servlet/checkUsernameServlet",
                    type:"post",
                    async:true,
                    dataType:"json",
                    data:{"username":usernameInput},
                    success:function (data) {
                        var isExist = data.isExist;
                        alert(isExist);
                        //3.根据返回的isExist动态显示信息
                        var  userInfo = "";
                        if(isExist){
                            userInfo="该用户名已存在";
                        }else {
                            userInfo="该用户名可以使用";
                        }
                        $("#userInfo").html(userInfo);
                    }
            });

        })
    });
</script>

CheckUsernameServlet.java

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         req.setCharacterEncoding("UTF-8");
            //1.获取表单对象
         String userName = req.getParameter("username");
         //2.调用业务逻辑
        CheckUsernameService cus = new CheckUsernameServiceImpl();
        boolean isExist = cus.checkUsername(userName);
        resp.getWriter().write("{\"isExist\":"+isExist+"}");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }

CheckServiceImpl.java

 public boolean checkUsername(String userName) {
        CheckUsernameDao cud = new CheckUsernameDaoImpl();
        try {
            Long isExist = cud.checkUsername(userName);
            return isExist>0?true:false;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return false;
    }

CheckUsernameDaoImpl.java

public class CheckUsernameDaoImpl implements CheckUsernameDao{
    public Long checkUsername (String userName) throws Exception{
        QueryRunner qr = new QueryRunner(DBCPUtil.getDataSource());
       Long count = qr.query("select count(*) from user where username = ?",new ScalarHandler<Long>(1),userName);
        return count;
    }
}

Demo2 站内搜索

这里写图片描述

只展示重要代码：
关于前端页面的修改：
①增加一个div，定位为position，显示查询到的商品
②添加onmouseover onmouseout onclick事件

 content += "<div style='padding: 5px;cursor:pointer'onmouseover='overFn(this)' onmouseout='outFn(this)' onclick='clickFn(this)' '>" + data[i] + "</div>";
  function overFn(obj) {
                        $(obj).css("background","#DBEAF9");
                    }
                    function outFn(obj) {
                       $(obj).css("background","#fff");
                    }
                    function clickFn(obj) {
                        $("#searchName").val($(obj).html());
                        $("#showDiv").css("display","none");
                    }

header.jsp

<script type="text/javascript">
                    //键盘抬起事件
                    $(function () {
                        $("#searchName").keyup(function () {

                            //1.获取输入框的值
                            var  searchName = $("#searchName").val();
                            var content="";
                            //2.根据输入的数据到数据库进行模糊查询---columnlist
                            $.ajax({
                                url:"/servlet/searchNameServlet",
                                type:"post",
                                data:{"searchName":searchName},
                                dateType:"json",
                                async:true,
                                success:function (data) {
                                    //3.根据返回的商品名称显示在showDiv中
                                    //["小米手机"，"oppo手机","苹果手机"]
                                      // ["小米手机"]
                                       if(data.length>0){
                                           for (var i=0;i<data.length;i++){
                                               content+="<div>"+data[i]+"</div>";
                                           }
                                           $("#showDiv").html(content);
                                       }
                                }
                            });

                        })
                    });



                </script>

SearchNameServlet.java

 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.获取表单数据
        req.setCharacterEncoding("UTF-8");
        String searchName = req.getParameter("searchName");
        //2.调用业务逻辑
        SearchNameService sns = new SearchNameServiceImpl();
        List nameList = sns.searchName(searchName);
        //3.返回数据
        Gson gson = new Gson();
        String json = gson.toJson(nameList);
        System.out.println(json);
      resp.setContentType("text/json;charset=UTF-8");
        resp.getWriter().write(json);
    }


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }

SearchNameServiceImpl.java

public class SearchNameServiceImpl implements SearchNameService {
    public List searchName(String searchName) {
        SearchNameDao snd = new SearchNameDaoImpl();
        List nameList = null;
        try {
            nameList = snd.searchName(searchName);
            return nameList;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}

SerachNameDao.java

public class SearchNameDaoImpl implements SearchNameDao {
    public List searchName(String searchName) throws Exception {
        QueryRunner qr = new QueryRunner(DBCPUtil.getDataSource());
        //模糊查询
       List<Object> nameList =  qr.query("select * from huawei where name like ? limit 0,8",new ColumnListHandler<Object>("name"),"%"+searchName+"%");
       return nameList;

    }
}