AJAX异步刷新

最新推荐文章于 2023-02-01 22:08:44 发布

光速奔跑

最新推荐文章于 2023-02-01 22:08:44 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/weixin_43738352/article/details/86583602

版权

AJAX异步刷新

原生js实现AJAX异步刷新

get请求

实现ajax可以分为步。
第一步获取实现AJAX的核心对象xmlHttpRequest。
第二步调用xmlHttpRequest对象的open方法。传入请求方式和请求的地址
第三步调用send方法。发送请求
第四部抒写回调函数，处理servlet那边返回的数据
实际代码如下：

<body>
用户名：<input type="text" onblur="show()" id="inputId"><span id="spanID"></span>
</body>
<script src="js/jquery.js"></script>
<script>
    function show() {
        //获取input中输入的值
        var userName = document.getElementById("inputId").value;
        //获取实现AJAX的核心对象xmlHttpRequest
        var xmlHttpRequest = new XMLHttpRequest();
        //连接服务器，使用open方法（请求方式，请求路径（一般跳转到servlet里面做处理））
        xmlHttpRequest.open("GET","userServlet?userName="+userName);
        //发送请求
        xmlHttpRequest.send();
        //接受返回
        xmlHttpRequest.onreadystatechange=function () {
            //判断是否成功。
            //0->（未初始化）：还没有调用 open() 方法。
            //1->（载入）：已调用 send() 方法，正在发送请求。
            //2->（载入完成）：send() 方法完成，已收到全部响应内容。
            //3->（解析）：正在解析响应内容。
            //4->（完成）：响应内容解析完成，可以在客户端调用。
            //200->表示成功
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                //接受servlet返回的数据
                var flag=xmlHttpRequest.responseText;
                //判断返回的是否为true，做出对应的提示
                if(flag=="true"){
                    document.getElementById("spanID").innerHTML="用户名可用";
                }else{
                    document.getElementById("spanID").innerHTML="用户名不可用";
                }
            }

        }
    }

post请求

post请求基本和get差不多。但在使用open方法的时候有些不同，不能在路径后面不能直接拼接数据，需要在send方法中传入数据。还有一点，我们还需要在open和send方法之间调用setRequestHeader方法，设置请求头信息。
实际代码如下：

<body>
用户名：<input type="text" onblur="show()" id="inputId"><span id="spanID"></span>
</body>
<script src="js/jquery.js"></script>
<script>
    function show() {
        //获取input中输入的值
        var userName = document.getElementById("inputId").value;
        //获取实现AJAX的核心对象xmlHttpRequest
        var xmlHttpRequest = new XMLHttpRequest();


        //连接服务器，使用open方法（请求方式，请求路径（一般跳转到servlet里面做处理））
        xmlHttpRequest.open("POST","userServlet");
        //设置请求头的信息。格式固定
        xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //发送请求
       xmlHttpRequest.send("userName="+userName); 


        //接受返回
        xmlHttpRequest.onreadystatechange=function () {
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                //接受servlet返回的数据
                var flag=xmlHttpRequest.responseText;
                //判断返回的是否为true，做出对应的提示
                if(flag=="true"){
                    document.getElementById("spanID").innerHTML="用户名可用";
                }else{
                    document.getElementById("spanID").innerHTML="用户名不可用";
                }
            }

        }
    }
</script>

使用jQuery实现AJAX异步刷新

jQuery中可以使用ajax方法，来进行实现，比原生的方便很多。并且如何请求方式都可以这样用。

<body>
用户名：<input type="text" onblur="show()" id="inputId"><span id="spanID"></span>
</body>
<script src="js/jquery.js"></script>
<script>
    function show() {
        $(document).ready(function () {
            //获取input中输入的值
            var userName=$("#inputId").val();
            //调用jQuery中ajax方法
            //url->跳转地址
            //type->请求方式，例如get，post
            //dataType->返回类型，例如text，json，xml
            //success->回调函数
            //error->出了异常调用的方法
            $.ajax({
                "url":"userServlet",
                "type":"GET",
                "dataType":"text",
                "data":"userName="+userName,
                "success":callBack,
                "error":function () {
                    alert("出现异常")
                }
            });
            //回调函数的方法体
            function callBack(data) {
                if(data=="true"){
                    document.getElementById("spanID").innerHTML="用户名可用";
                }else{
                    document.getElementById("spanID").innerHTML="用户名不可用";
                }
            }
        })
    }

jQuery中还有一个简写的方法。get(地址，数据，回调方法)

<body>
用户名：<input type="text" onblur="show()" id="inputId"><span id="spanID"></span>
</body>
<script src="js/jquery.js"></script>
<script>
    function show() {
        $(document).ready(function () {
            //获取input中输入的值
            var userName=$("#inputId").val();
            //参数分别是，请求的地址，数据，回调方法
            $.get("userServlet","userName="+userName,callBack);
            //回调函数的方法体
            function callBack(data) {
                if(data=="true"){
                    document.getElementById("spanID").innerHTML="用户名可用";
                }else{
                    document.getElementById("spanID").innerHTML="用户名不可用";
                }
            }
        })
    }

光速奔跑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX异步刷新

AJAX异步刷新原生js实现AJAX异步刷新get请求实现ajax可以分为步。第一步获取实现AJAX的核心对象xmlHttpRequest。第二步调用xmlHttpRequest对象的open方法。传入请求方式和请求的地址第三步调用send方法。发送请求第四部抒写回调函数，处理servlet那边返回的数据实际代码如下：&lt;body&gt;用户名：&lt;input ...
复制链接

扫一扫