Ajax异步通信

程序员文章站 2022-03-01 12:57:26

...

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
}

Ajax异步通信

Ajax概述

1.作用介绍(理解)

2.适用场景(理解)

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

Jquery的Ajax插件

1.get请求方式

概述

语法

2.ajax请求方式

概述

语法

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

C#用委托BeginInvoke做异步线程

详解PHP实现异步调用的4种方法

PHP与Ajax相结合实现登录验证小Demo

Android 异步获取网络图片并处理导致内存溢出问题解决方法

ListView异步加载图片实现思路(优化篇)

ListView异步加载图片实现思路

ajax的使用方法和原理，ajax包括哪些技术呢

如何使用ajax，ajax请求的五个步骤

C#基于数据库存储过程的AJAX分页实例

Android串口通信封装之OkUSB的示例代码