JavaWeb基础学习笔记18——AJAX

啊噢1231

已于 2022-02-28 16:19:05 修改

阅读量5k

点赞数

分类专栏： JavaWeb 文章标签： ajax 学习 javascript

于 2022-02-28 14:29:02 首次发布

本文链接：https://blog.csdn.net/weixin_44623055/article/details/123179447

版权

JavaWeb 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、AJAX概念：

AJAX（ASynchronous JavaScript And XML，异步的JavaScript和XML），是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页。通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。

Ajax可以提升用户的体验。

异步和同步：客户端和服务器端相互通信的基础上的同步和异步。

同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其它工作。
异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中客户端可以去进行其它的操作。

2、AJAX的实现方式

2.1、原生的JS实现方式（了解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //定义方法
        function fun() {
            //发送异步请求
            //1、创建核心对象
            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");
            }

            //建立连接
            /**
             * 参数：
             *  1、请求方式：GET、POST
             *    * get方式，请求参数在URL后拼接，send()方法为空参
             *    * post方式，请求参数在send()方法中定义
             *  2、请求的URL；
             *  3、同步或异步请求：异步为true，同步为false
             */
            xmlhttp.open("GET", "ajaxServlet?username=tom", true);

            //发送请求
            xmlhttp.send();

            //接收并处理来自服务器的响应结果
            //获取方式：xmlhttp.responseText
            //什么时候获取：当服务器响应成功后再获取

            //当xmlhttp对象的就绪状态改变时，会触发onreadystatechange事件
            xmlhttp.onreadystatechange = function () {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if(xmlhttp.readyState==4 && xmlhttp.status==200) {
                    //获取服务器的响应结果
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
        }
    </script>
</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">
<div id="myDiv"></div>

</body>
</html>

2.2、JQuery实现方式

JQuery的实现方式：
    1、$.ajax()
        语法：$.ajax(url,[settings]) / $.ajax({键值对})
    2、$.get()：发送get请求
        语法：$.get(url,[data],[callback],[type])
            参数：
                url：请求路径
                data：请求参数
                callback：回调函数
                type：响应结果的类型
    3、$.post()：发送post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-JQuery实现方式1_ajax</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun() {
            //使用$.ajax()发送异步请求
            $.ajax({
                url: "ajaxServlet", //请求路径
                type: "POST", //请求方式
                // data:"username=jack&age=23", //请求参数
                data: {"username": "jack", "age": 23}, //请求参数
                success:function (data) {
                    alert(data);
                }, //响应成功后的回调函数
                error:function () {
                    alert("出错了..")
                }, //表示如果请求响应出现错误，会执行的回调函数
                dataType:"text" //设置接收到响应数据的格式
            });

        }
    </script>
</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">
<div id="myDiv"></div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-JQuery实现方式2_get_post</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //定义方法
        function fun() {
            //get方法
            // $.get("ajaxServlet", {username: "rose"}, function (data) {
            //     alert(data);
            // }, "text");
            
            //post方法
            $.post("ajaxServlet", {username: "rose"}, function (data) {
                alert(data);
            }, "text");
        }
    </script>
</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">
<div id="myDiv"></div>

</body>
</html>

啊噢1231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb基础学习笔记18——AJAX

1、AJAX概念：AJAX（ASynchronous JavaScript And XML，异步的JavaScript和XML），是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页。通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。Ajax可以提升用户的体验。异步和同步：客户端和服务器端相互通信的基础上的同步和异步。同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其它工作。异步：客户端不需要等待服务器端的响应，在服务器处理请
复制链接

扫一扫