Ajax小小学习

缘由

百度注册页面

用户一输入，就能知道这用户名有没有注册，这坑定是到用户的数据库里面查询出来的结果，所以，它坑定是在鼠标离开那个框框之后就开始验证查询了；这，看着高大上，我也想学习这样的功能或者说是这样的技术

崇拜ing

开始了解

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。
大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax()可以不带任何参数直接使用。

开始学习

说干就干，听说Jquery很好用，而且还能整ajax，冲冲冲ing

冲冲冲

首先，魔爪伸向小破站开始白嫖，jaax+json: 白嫖的这个up.

万年的学习终于修成正果

学习jquery获取页面元素的值
-jquery基础知识

找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。jQuery 代码:$("div > p");
设置页面背景色。jQuery 代码:$(document.body).css( "background", "black" );

-jquery的选择器

查找 ID 为"myDiv"的值。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv").val();

学习ajax发送异步请求
- get请求和post请求

需求
当我们在输入框中输入完成后，鼠标拿开或者点击输入框以外的地方的时候，我们就会进行异步请求进行验证数据的可靠性，来判断输入的用户已智能提示，类似百度注册页面的验证。

核心代码如下:

<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<html>
<title>123</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<body>
<h2>ajax1</h2>
<input type="text" onblur="txt()" id="yyy"/>
<span id="hui"></span>
</body>
<script type="text/javascript">
    function txt(){
        $.post({
            url:"#",
            data:{name:$("#yyy").val()},
            success:function(data){
                alert(data);
            },
            dataType:"json"//指定数据格式为json
        });
    }
</script>
</html>

效果展示

jsp传值到servlet到servlet请求数据库来完成查询，返回知道页面上。

package com.qf.lr.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.qf.lr.dao.userdao;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/ajax")
public class Ajax_name extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
//        resp.setContentType("text/html;charset=utf-8");
        resp.setContentType("application/json;charset=utf-8");
        String name=req.getParameter("name");

        Map<String,Object> map=new HashMap<String, Object>();
        userdao dao=new userdao();
        if(dao.query(name)!=null){
            map.put("cg",true);
            map.put("msg","太奶了，用户名不可用哟！");
        }else {
            map.put("cg",false);
            map.put("msg","真棒！用户名可用");
        }
//        map=>json
        ObjectMapper mapper= new ObjectMapper();
//        将数据传递给客户端
        mapper.writeValue(resp.getWriter(),map);
    }

}

<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<html>
<title>123</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<body>
<h2>ajax1</h2>

<input type="text" onblur="txt()" id="yyy"/>
<span id="hui"></span>


</body>
<script type="text/javascript">
    function txt(){
        $.post({
            url:"ajax",
            data:{name:$("#yyy").val()},
            success:function(data){
                var span=$("#hui");
                if(data.cg){
                    span.html(data.msg);
                    span.css("color","green");
                }else{
                    span.html(data.msg);
                    span.css("color","red");
                }

            },
            dataType:"json"//指定数据格式为json
        });
    }

</script>
</html>