Ajax异步通信

时间:2022-02-15作者:klpeng分类:Java技术浏览:357评论:0

Ajax概述

1.作用介绍(理解)

Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

2.适用场景(理解)

检查用户名是否已经被注册

省市二联下拉框联动

内容自动补全

3.同步请求和异步请求的概念

例如 要发送三个请求:

​ 1).请求获取学员信息;

​ 2).请求获取课程信息;

​ 3).请求获取老师信息;

A).同步:发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,会处于一直等待过程中。(卡死)

​ 1).发送请求,获取学员信息:

​ 2).学员信息返回

​ 3).发送请求,获取课程信息;

​ 4).课程信息返回

​ 5).发送请求,获取老师信息;

​ 6).老师信息返回。

B).异步:发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。通过回调函数可以获取到请求的结果。

​ 1). 发送请求,获取学员信息:

​ 2). 发送请求,获取课程信息;

​ 3). 发送请求,获取老师信息;

​ 4). 学员信息返回

​ 5). 课程信息返回

​ 6). 老师信息返回

Jquery的Ajax插件

jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中 经常使用的有三种:

请求方式 语法
GET请求 $.get(url, [data], [callback], [type])
POST请求 $.post(url, [data], [callback], [type])
AJAX请求 $.ajax([settings])

1.get请求方式

概述

通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能,如需复杂的ajax参数设置请使用$.ajax。

语法

jQuery.get(url, [data], [callback], [type])

其中,参数说明如下:

参数名称 解释
url 请求的服务器端url地址
data 发送给服务器端的请求参数,格式可以是key=value
callback 回调函数,服务器响应成功后,AJAX自动调用函数
type 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery框架封装的ajax的get请求方式</title>
    <!--导入jQuery的外部js文件-->
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        /*
            需求:当点击页面按钮时,触发函数,
                 在函数中,使用Ajax获取服务器上的一个文件中的数据,并显示到当前的页面的div中
         */
        //定义页面的加载事件:让页面先加载出来,在使用页面中的元素
        $(function () {
            /*
                使用jQuery框架封装的ajax的get请求方式
                jQuery.get(url, [data], [callback], [type])
                $.get(url, [data], [callback], [type])
                url:请求服务器的路径,必须
                data:发送到服务器的数据 格式:k=v&k=v
                callback:回调函数,服务器给客户端返回数据成功,会自动执行回调函数
                type:预设服务器返回的数据类型(text(默认),json)
             */
            //获取id是but的按钮,给按钮添加一个鼠标点击事件
            $("#but").click(function () {
                //在事件的响应函数中,发送ajax的get请求方式
                $.get(
                    "data/demo01.txt",
                    "username=jack&password=1234",
                    function (data) {//回调函数,服务器返回的数据会自动赋值给回调函数的变量data
                        //alert(data);
                        //获取id是myDiv的对象,设置标签体为服务器返回的数据
                        $("#myDiv").html(data);
                    },
                    "text"
                );
            });
        });
    </script>
</head>
<body>
    <input id="but" type="button" value="发送异步ajax请求"/>
    <div id="myDiv"></div>
</body>
</html>

2.ajax请求方式

概述

通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。

语法

jQuery.ajax([settings])
其中,settings是一个js字面量形式的对象,格式是{name:value,name:value… …},常用的name属性名如下:

属性名称 解释
url 请求的服务器端url地址
async (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false
data 发送到服务器的数据,可以是键值对形式 k=v&k=v
type (默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET”
dataType 预期服务器的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
success 请求成功后的回调函数
error 请求失败时调用此函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery封装的ajax底层方式请求服务器</title>
    <!--引入jQuery文件-->
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        /*
            需求:当点击页面按钮时,触发函数,
                 在函数中,使用Ajax获取服务器上的一个文件中的数据,并显示到当前的页面的div中
         */
        //页面加载事件
        $(function () {
           /*
                 使用jQuery封装的ajax底层方式请求服务器
                 jQuery.ajax(url,[settings])
                 $.ajax(url,[settings])
                 ajax方式设置的参数,都是以键值对的方式设置的
                 格式:
                    $.ajax({
                        url:请求服务器的路径,
                        async:设置异步提交方式(true:异步方式(不写默认);false:同步方式),
                        data:发送到服务器的数据,格式k=v&k=v,
                        type:设置请求服务器的方式get(不写默认),post,
                        dataType:预设服务器返回的数据类型(text,json),
                        success:请求服务器成功的回调函数,
                        error:请求服务器失败的回调函数,
                        ...
                    });
            */
           //获取id是but的按钮,给按钮绑定一个鼠标点击事件
            $("#but").click(function () {
               //在事件的响应函数中发送ajax请求
               $.ajax({
                   url:"data/demo02.txt",
                   data:"username=jack&password=1234",
                   type:"get",
                   dataType:"text",
                   success:function (data) {//请求服务器成功的回调函数,会把服务器返回的数据赋值给data
                       //把服务器返回的数data放到div的标签体中
                       $("#myDiv").html(data);
                   },
                   error:function () {
                       $("#myDiv").html("请求服务器失败!");
                   }
               });
            });
        });
    </script>
</head>
<body>
    <input id="but" type="button" value="发送异步ajax请求"/>
    <div id="myDiv"></div>
</body>
</html>

3.ajax预设服务器返回json格式的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送jQuery的ajax请求</title>
    <!--引入jQuery-->
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        //页面加载事件
        $(function () {
            //给id是but的按钮绑定鼠标点击事件
            $("#but").click(function () {
                //发送jQuery的ajax请求
                $.ajax({
                   url:"data/demo02.json",
                   dataType:"json",
                   success:function (data) {
                       //alert(data);//返回json本质是一个对象[object Object]
                       //对象名.属性名,获取属性
                       alert(data.firstname);
                       alert(data.lastname);
                       alert(data.age);
                   },
                   error:function () {
                       alert("请求服务器失败!")
                   }
                });
            });
        });
    </script>
</head>
<body>
<input id="but" type="button" value="发送异步ajax请求"/>
</body>
</html>

demo02.json

{
  "firstname": "张",
  "lastname": "三丰",
  "age": 100
}
打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢