ajax学习（理解即可）

ajax介绍

复制代码

局部刷新技术，可以在不重新加载整个页面的情况下，针对局部的内容进行更新。

传统请求：浏览器会将服务器的响应显示的浏览器的页面中
ajax请求：浏览器只负责接受服务器给出的响应，但是浏览器不做任何处理。

ajax请求的应用场景：一个网站的所有请求都可以采用ajax请求。

原生js的ajax请求（理解）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="js_ajax" onclick="js_ajax()"><br>
<span id="mySpan" style="color: red">此处用来显示服务器响应的数据</span>
</body>

<script>

    function js_ajax() {
        //创建ajax引擎对象
        let request = new XMLHttpRequest();

        //绑定onreadystatechange事件，作为响应成功时的回调函数
        /**
         *
         *      readystate:
         *      HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，
         *      这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

                 0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
                 1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
                 2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
                 3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
                 4 Loaded HTTP 响应已经完全接收。


                status : http协议响应的状态码
                        200：表示ok
                        404： 表示 找不到资源
                        302：表示重定向的

                responseText ： 服务器给出的响应体

         */
        request.onreadystatechange=function () {
            //响应成功的回调函数
            if(request.readyState==4&&request.status==200){
                //获取响应体
                let responseText = request.responseText;
                //dom操作
                document.getElementById("mySpan").innerHTML=responseText;
            }
        }

        //通过open方法设置请求的参数
        /**
         *   method:请求的方式
         *   url:请求的地址
         *   async:是否异步，true表示异步
         *
         */
        request.open("get","demoServlet",true);

        //通过send方法发送请求
        request.send();
    }

</script>
</html>

同步异步

复制代码

同步：浏览器在还没有接受到服务器给出的响应时，浏览器处于卡死的状态。无法进行其他操作。 （java单线程）
异步：浏览器在还没有接收到服务器的响应时，浏览器的任何其他操作照样执行，不受任何影响。(ajax请求是子线程去发送的。)

企业开发：基本使用异步。

jquery的ajax

注意：需要引入jquery文件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="jquery_get" onclick="jquery_get()"><br>
    <input type="button" value="jquery_post" onclick="jquery_post()"><br>
    <input type="button" value="jquery_ajax" onclick="jquery_ajax()"><br>
    <span id="mySpan" style="color: red">此处用来显示服务器响应的数据</span>
</body>
<script src="js/jquery-2.1.0.js"></script>
<script>

    function jquery_get() {
        $.get("demoServlet",{"username":"zhangsan"},function (data) {

            //将响应体设置到myspan中
            document.getElementById("mySpan").innerHTML=data;
        });
    }

    function jquery_post() {
        $.post("demoServlet",{"username":"zhangsan"},function (data) {

            //将响应体设置到myspan中
            document.getElementById("mySpan").innerHTML=data;
        });
    }


    function jquery_ajax() {

        $.ajax({
            url:"demoServlet",
            data:{
                "username":"lisi"
            },
            async:true,
            type:"get",
            success:function (res) {
                //请求成功的回调函数，参数就是响应体
                document.getElementById("mySpan").innerHTML=res;
            }
        });
    }

</script>
</html>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        this指代当前标签对象

    -->
    用户名: <input type="text" value="" name="username" onblur="validateUsername(this.value)">
    <span id="myspan"></span>
</body>
<script src="js/jquery-2.1.0.js"></script>
<script>

    function validateUsername(username) {

        //document.getElementById("").value;

        $.ajax({
            url:"validateUsername",
            data:{
                "username":username
            },
            success:function (res) {
                //console.log(typeof(res)+":"+res);
                //这是请求成功的回调函数，res是响应体

                let myspan = document.getElementById("myspan");
                if(res=="true"){
                    //校验成功
                    //设置标签的文本值
                    myspan.innerHTML="用户名可用";
                    //修改css样式
                    myspan.style.color="green";
                }else if(res=="false"){
                    //校验失败a
                    //设置标签的文本值
                    myspan.innerHTML="用户名已存在";
                    //修改css样式
                    myspan.style.color="red";
                }
            }
        });
    }

</script>
</html>