JQuery中Ajax操作实现

首先引入一个概念什么是Ajax?
我们可以根据他的命名Ajax(Aynchronous JavaScript And XML),翻译过来就是异步的JavaScript与XML。

什么是异步的？
客户端不需要等待服务端的响应。在服务器处理请求的过程中，客户端可以进行其他操作。
实例：例如百度的搜索自动补全，还有注册的时候提醒你用户名已经被注册过。这些不重新加载整个页面的情况下，对网页的某部分进行更新

Jauery实现Ajax有三种方式：$.ajax(), $.get(), $.post()

1. $.ajax()

    * 语法：$.ajax({键值对})；
   
    * 使用$.ajax()发送异步请求
   
      ```javascript
       $.ajax({
      		                url:"ajaxServlet1111" , // 请求路径
      		                type:"POST" , //请求方式
      		                //data: "username=jack&age=23",//请求参数
      		                data:{"username":"jack","age":23},
      		                success:function (data) {
      		                    alert(data);
      		                },//响应成功后的回调函数
      		                error:function () {
      		                    alert("出错啦...")
      		                },//表示如果请求响应出现错误，会执行的回调函数
      		
      		                dataType:"text"//设置接受到的响应数据的格式
      		            });
      ```
   

2. $.get()：发送get请求

    * 语法：$.get(url,[data],[callback],[type])
      * 参数：
        * url：请求路径
        * data：请求参数
        * callback：回调函数（响应成功后要执行的）
        * type：响应结果的类型
   

3. $.post()：发送post请求

    * 语法：$.get(url,[data],[callback],[type])
      * 参数：
        * url：请求路径
        * data：请求参数
        * callback：回调函数（响应成功后要执行的）
        * type：响应结果的类型
   

一个简单案例加深一下理解：只给出前端的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.3.1.min.js"></script>


    <script>
        //在页面加载完成后
        $(function () {
           //给username绑定blur事件
           $("#username").blur(function () {
               //获取username文本输入框的值
               var username = $(this).val();
               //发送ajax请求
               //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名已存在"}
               //                         {"userExsit":false,"msg":"用户名可用"}
               $.get("findUserServlet",{username:username},function (data) {
                   //判断userExsit键的值是否是true

                   // alert(data);
                   var span = $("#s_username");
                   if(data.userExsit){
                       //用户名存在
                       span.css("color","red");
                       span.html(data.msg);
                   }else{
                       //用户名不存在
                       span.css("color","green");
                       span.html(data.msg);
                   }
               });

           }); 
        });

    </script>
</head>
<body>


    <form>

        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span>
        <br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册"><br>

    </form>

</body>
</html>