ajax与json

最新推荐文章于 2022-03-30 15:50:26 发布

super__丹

最新推荐文章于 2022-03-30 15:50:26 发布

阅读量223

点赞数 1

文章标签： ajax json 原生js实现ajax jquery实现ajax

本文链接：https://blog.csdn.net/weixin_43951534/article/details/90050720

版权

在这里插入图片描述
Ajax最初是由 Google公司在开发Google地图的使用，后来被大量使用
AJAX应用程序与浏览器和平台无关的

js原生AJAX

代码执行顺序
1.创建
2.打开
3.发送
4.设置属性

1 创建XMLHttpRequest对象
2 然后用这个对象操作open()方法即 XMLHttpRequest.open(“post”,url,true);
3 用这个对象操作send()方法
4 用这个对象操作onreadystatechange这个属性即XMLHttpRequest.onreadystatechange=callback; //指定响应函数
onreadystatechange=函数名; //注意这里直接加函数名，而不是function()，否则函数将无法正常执行

具体操作如下：
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<button onclick="fun()">点击</button>
<p id="uname"></p>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    function fun() {
    //1.创建xmlhttprequest对象
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.open()
        xmlhttp.open("GET", "/AjaxServlet?uname=lilei", true);
        //3.send()
        xmlhttp.send();
        //4.设置回调函数
        xmlhttp.onreadystatechange=function() {
             if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                 var message = xmlhttp.responseText;
                 $("#uname").html(message);
             }
         }
    }

</script>
</html>

servlet代码

public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String uname = request.getParameter("uname");
        System.out.println(uname);
        PrintWriter writer = response.getWriter();
        writer.write(uname);
    }
}

效果图：
在这里插入图片描述

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

jQuery实现AJAX

jQuery实现AJAX是使用了json格式来展现的
json是什么？
在这里插入图片描述

格式：
{
	key:value,
	key:value,
	key:value
}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<select id="select">
    <option>请选择</option>
</select>
<table id="table" border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>地址</td>
    </tr>
</table>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    //定义json对象
    var user = {
        name: "张三",
        age: 23,
        address: "湖北武汉"
    }
    //定义数组
    var city = ["湖北", "北京", "上海", "广州"]
    //定义对象数组
    var users = [{
        name: "李四",
        age: 43,
        address: "湖北荆门"
    }, {
        name: "王五",
        age: 13,
        address: "湖北十堰"
    }, {
        name: "赵柳",
        age: 22,
        address: "湖北荆州"
    }];
    $(function () {
        //定义json对象
        $("#table").append("<tr><td>" + user.name + "</td><td>" + user.age + "</td><td>" + user.address + "</td></tr>");
        //遍历json数组
        $(city).each(function (i) {
            $("#select").append("<option>" + this + "</option>");
        });
        //遍历对象数组
        $(users).each(function () {
            $("#table").append("<tr><td>" + this.name + "</td><td>" + this.age + "</td><td>" + this.address + "</td></tr>");
        })
    })
</script>
</html>

效果图：
在这里插入图片描述

案例：使用ajax异步验证该用户名是否被注册
使用两种方法实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form action="#" method="get">
    <tr>
        <td>用户名:</td>
        <td><input type="text" id="uname">&nbsp;<span id="span"></span></td>
    </tr>
</form>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    /*//方法一   原生js实现ajax
    $("#uname").blur(function () {
        var $uname = $("#uname").val();
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var url = "/RegisterServlet?uname="+$uname;
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                var message = xmlhttp.responseText;
                if (message==0){
                    $("#span").html("该用户已被注册。").css("color","red");
                }else {
                    $("#span").html("放心注册。").css("color","green");
                }

            }
        }
    });*/

    //方法二   使用jQuery实现ajax
    $("#uname").blur(function () {
        var $uname = $("#uname").val();
        $.ajax({
            url:"/RegisterServlet",
            type:"get",
            dataType:"html",
            data:{
                uname:$uname
            },
            success:function (data) {
                if (data==0){
                    $("#span").html("该用户已被注册。").css("color","red");
                }else {
                    $("#span").html("放心注册。").css("color","green");
                }
            }
        })
    });

</script>
</html>

public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset=UTF-8");
        String uname = request.getParameter("uname");
        PrintWriter writer = response.getWriter();
        if ("admin".equals(uname)){
            writer.write("0");
        }else{
            writer.write("1");
        }
        writer.flush();
        writer.close();
    }
}

效果图：
在这里插入图片描述

使用ajax的好处在于可以异步刷新页面，用户体验感较好。

super__丹

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax与json

Ajax最初是由 Google公司在开发Google地图的使用，后来被大量使用AJAX应用程序与浏览器和平台无关的js原生AJAX代码执行顺序1.创建2.打开3.发送4.设置属性1 创建XMLHttpRequest对象2 然后用这个对象操作open()方法即 XMLHttpRequest.open(“post”,url,true);3 用这个对象操作send()方法4 ...
复制链接

扫一扫