Ajax技术使用详解

码路漫漫任重道远

于 2024-07-30 10:58:30 发布

阅读量446

点赞数 3

文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/weixin_64922330/article/details/140791446

版权

AJAX介绍

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。

一般的网页如果需要更新内容，必需重新加载个页面。

而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。

应用场景

1、在线视频、直播平台等…评论实时更新、点赞、⼩礼物、…

2、会员注册时的信息验证，⼿机号、账号唯⼀

3、百度关键搜索补全功能

JQuery的GET方式实现AJAX

核心语法：$.get(url,[data],[callback],[type]);

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

代码实现

 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

    <title>用户注册</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>

    <form autocomplete="off">

        姓名：<input type="text" id="username">

        <span id="uSpan"></span>

        <br>

        密码：<input type="password" id="password">

       <br>

        <input type="submit" value="注册">

    </form>

</body>


<script>

    //1.为用户名绑定失去焦点事件

    $("#username").blur(function () {

        var username = $("#username").val();

        //2.jQuery的GET方式实现AJAX

        $.get(

            //请求的资源路径

            "userServlet",

            //请求参数

            "username=" + username,

            //回调函数

            function (data) {

                //将响应的数据显示到span标签

               $("#uSpan").html(data);

            },

            //响应数据形式

            "text"

        );

    });

</script>

</html>

JQuery的POST方式实现AJAX

核心语法：$.post(url,[data],[callback],[type]);

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的POST方式实现AJAX
        $.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>
</html>

JQuery的通用方式实现AJAX

核心语法：$.ajax({name:value,name:value,…});

url：请求的资源路径。

async：是否异步请求，true-是，false-否 (默认是 true)。

data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

type：请求方式，POST 或 GET (默认是 GET)。

dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

success：请求成功时调用的回调函数。

error：请求失败时调用的回调函数。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的通用方式实现AJAX
        $.ajax({
            //请求资源路径
            url:"userServletxxx",
            //是否异步  一般不写
            async:true,
            //请求参数
            data:"username="+username,
            //请求方式
            type:"POST",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //请求失败后调用的回调函数  一般也不写
            error:function () {
                alert("操作失败...");
            }
        });
    });
</script>
</html>