AJAX（JavaScript、JQuery）、使用AJAX完成用户名的异步请求校验 、使用JQ完成用户名异步校验 、使用JQ完成仿百毒搜索提示的效果

案例一：使用AJAX完成用户名的异步校验

一，需求分析

​ 我们有一个网站，网站中都有注册的页面，当我们在注册的页面中输入用户名的时候，这个时候会提示，用户名是否存在。

二，技术分析

1. AJAX的概述

1.1 什么是AJAX

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

• 异步的请求

1.2什么是异步

• 同步

• 异步

  

1.3为什么要学习AJAX

​ 提升用户的体验。异步

​ 将部分的代码，写到客户端浏览器。

​ 实现页面局部刷新。

 

2. js的Ajax入门(了解)

2.1步骤

​ 第一步：创建异步请求对象。

​ 第二步：打开连接。

​ 第三步：发送请求。

​ 第四步：设置监听对象改变所触发的函数,处理结果

2.2 GET请求方式的入门

<script>
        function AjaxDemo() {
        //1.创建xmlHttpRequest对象
            var xmlHttp = null;
            if (window.XMLHttpRequest) {// all modern browsers
                xmlHttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {// for IE5, IE6
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        //2.打开连接
            xmlHttp.open("GET","${pageContext.request.contextPath}/demo02?username=zs&password=123456");
        //3.发送请求
            xmlHttp.send();
        //4.设置对象状态发生改变所触发的函数
            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                   
                    var result = xmlHttp.responseText;
                    alert(result);
                }
            };
        }
</script>

2.3  POST请求方式的入门

<script>
    function AjaxDemo() {
        //1.创建xmlHttpRequest对象
        var xmlHttp = null;
        if (window.XMLHttpRequest) {// all modern browsers
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {// for IE5, IE6
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.打开连接
        xmlHttp.open("POST", "${pageContext.request.contextPath}/demo03");
        //设置请求参数的mime类型
        xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");