对于ajax请求的详细讲解源码以及实现学习总结——超详细

2022-07-13 17:15:20

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax的最重要</title>
</head>
<body>
   对于Ajax：Asynchronous JavaScript And Xmml来实现异步请求

    作用：
        运用Ajax，通过刷新页面验证账号是否存在
            对于传统的方法：需要提交数据并刷新页面来获知用户名是否存在
            <p>实例</p>
            <h3>Tradition</h3>
            <form action="https://blog.csdn.net/miss_ll/article/details/79053608">
            输入账号
                <input type="text"  name="name" value="abc"/>
                <input type="submit" value="是否验证成功"/>
            </form>

            <h3>Ajax</h3>
            <span>输入账号：</span>
            <input type="text" id="name" name="name" onkeyup="check()" />
            <span id="checkResult"></span>

       1.Ajax的分布解析——请求和相应的图示
            对于浏览器向服务器传递的步骤;
                First:创建XMLHttpRequest
                Second:设置响应函数
                Third:设置访问页面
                Fourth:执行访问
            服务器向浏览器：
                1.调用响应函数
                2.判断是否响应成功
                3.获取相应文本
                4.显示相应文本

        2.创建XHR线程——这一步肥肠的重要
                XHR：XMLHTTPRequest
                XHR其实就是JavaScript的的一个对象，可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据的交互
                Ajax就是通过它做到无刷新的效果
        3.设置响应的函数
                XHR对象的作用是和服务器进行双向的交互，刚才的创建，对于服务器响应回来的数据，调用该怎么处理
                        运用的函数：xmlhttp01.onreadystatechange=checkResult就可以用你指定的函数checkResult来进行处理

        4.设置并发出请求
                通过  open  函数设置背后的小线程，以及将要访问的页面url,》》》xmlhttp.open("GET",url,true)就如刚才当中的代码运用send函数进行实际的访问
                在这里我进行明确的说明：xmlhttp.send(null)当中的null表示没有参数，因为参数已经通过“GET”的方式放在URL中
                那这个函数是用来干嘛的呢？
                    在运用于“POST”的，而且自己需要去进行发送参数的时候，才会使用send函数
                      eg:  xmlhttp.send("user="+useName+"&password="+pwd)

        5.处理响应信息
                function checkResult(){
                    if(xmlhttp.readyState==4 && xmlhttp.status==200){
                         document.getElementById(‘CheckResult‘).innerHtml=xmlhttp.response Text;
                    }
                }
                Specification：xmlhttp.readState 4代表的是请求已经完成（为啥是4：因为第四步骤是发出请求的步骤哦）
                                        若是0：代表的是请求未初始化     1：代表的是服务器端的连接已经建立    2：请求已接收（并不是代表完成，自己在这踩过坑）   3：请求正在处理中
                                xmlhttp.status 200代表的是响应成功（200.。。。）
                                xmlhttp.responseText：用于获取服务器端传回来的文本
                                document.getElementById(‘checkResult‘).innerHTML设置span的内容为服务器端传递回来的文本



   <script>
       var xmlhttp;
       function check(){
           var name=document.getElementById("name").value;
           var url="https://examples.bootstrap-table.com/#extensions/treegrid.html";

           xmlhttp=new XMLHttpRequest();
           xmlhttp.onreadystatechange=checkResult;//响应函数
           xmlhttp.open("GET",url,true);//设置访问的页面
           xmlhttp.send(null);//执行访问

       }

       function checkResult(){
           if(xmlhttp.readyState==4 && xmlhttp.status==200)
               document.getElementById(‘checkResult‘).innerHTML=xmlhttp.responseText;
       }

       var xmlhttp01=new XMLHttpRequest();
       document.write(xmlhttp01);

   </script>

</body>
</html>
码农公寓

相关文章
