AJAX-01-一分钟快速入门

最新推荐文章于 2024-06-14 10:23:44 发布

gmx_holic

最新推荐文章于 2024-06-14 10:23:44 发布

阅读量144

点赞数

分类专栏： JavaScript 文章标签： ajax jquery json

本文链接：https://blog.csdn.net/weixin_48672332/article/details/107000788

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

AJAX-01-一分钟快速入门

1.概述

AJAX(Asynchronous JavaScript And XML) :异步的JavaScript和XML

使用的技术：

JavaScript：用于后台发送数据给服务器，并处理服务器响应的结果
XML：用于接收服务器返回的数据，目前已被JSON代替

好处

一般网页若需要更新内容，会将整个页面全部重新加载一遍。而AJAX可以通过浏览器与服务器进行少量的数据交换，只局部更新网页的部分内容。等待服务器响应期间可进行其他操作

2.同步和异步的区别

同步方式：正常情况下，浏览器与服务器之间是串行操作，类似于Java单线程的操作。
异步方式：浏览器与服务器是并行操作，类似于Java中多线程。

3.原生JavaScript实现AJAX访问流程

用户在浏览器端由JS创建一个对象XMLHttpRequest对象
这个对象是ajax的核心对象，由它发送请求给服务器
将请求的数据发送到服务器
在服务器处理数据，从数据库中查询用户是否存在，通过XML(JSON)把数据返回
在回调函数中得到服务器返回的数据，使用HTML和CSS更新页面的信息

具体代码这里就不实现了，实际工作不会使用这种方式。

4.jQuery3.0之前使用的$.get()和$.post()方法

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

$.post(url,[data],[callback],[type])

两者使用格式一样，只是方法名和提交方式不同

参数说明：

只有第1个是必须的选项
1. url: 表示请求服务器地址
2. data: 发送给服务器的数据
    格式1：键1=值2&键2=值2
    格式2：{键:值,键:值}
3. callback：回调函数，参数是服务器返回的数据
4. type：从服务器返回的数据类型，默认是字符串类型
    取值：xml, html, script, json, text

users.json文件（模拟服务器响应的数据）

[
  {
    "id": 1,
    "name": "Tom",
    "password": "123"
  },
  {
    "id": 2,
    "name": "Jack",
    "password": "456"
  },
  {
    "id": 3,
    "name": "Rose",
    "password": "789"
  }
]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册判断</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
用户名：<input type="text" id="user"> <span id="info"></span>
<script type="text/javascript">
    /*
    用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。
    user.json模拟服务器访问数据库后响应的数据，直接判断用户名，如果用户名为Tom，则表示用户已经存在，否则用户名可以注册使用。
    */
    //用户名的改变事件
    $("#user").blur(function () {
        //访问服务器获取数据，参数是服务器返回的数据，返回的类型是json格式
        let user = $("#user").val();  //得到文本框的值
        $.get(
            //请求的地址
            "json/users.json", 
            //请求传递的参数
            //"user="+user,
            //回调函数
            function (users) {
                //判断用户名是否存在
                //1.设置标记
                let exists = false;
                //2.遍历数组，查找名字是否存在
                for (let u of users) {
                    if (u == user) {
                        exists = true;  //找到
                        break;
                    }
                }
                //3.根据查找的结果显示信息
                if (exists) {  //用户存在
                    $("#info").text("用户名已经存在");
                }
                else {
                    $("#info").text("恭喜可以注册");
                }
            },
            //返回的数据类型
            "json");
    });
</script>
</body>
</html>

5.jQuery 的通用方式$.ajax()实现 AJAX

$.ajax([settings]): settings是一个JSON形式的对象

$.ajax({键:值,键:值}) 属性名称	解释
url	服务器访问地址
async	默认是异步，取值是true，设置为false表示同步
method	GET或POST方法
data	发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值}
dataType	服务器返回的数据类型取值：xml, html, script, json, text
success	服务器正常响应的回调函数，参数就是服务器返回的数据
error	服务器出现异常的回调函数，参数是XMLHttpRequest对象

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username"/></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password"/></td>
        </tr>
        <tr>
            <!--登录按钮是一个普通按钮-->
            <td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    //登录按钮的点击事件
    $("#btnLogin").click(function () {
        //1.获取用户输入的用户名和密码
        let username = $("#username").val();
        let password = $("#password").val();
        //2.使用$.ajax访问服务器
        $.ajax({
            url: "json/users.json",
            //服务器正常响应的回调函数，参数就是返回的用户数据
            success: function (users) {
                let exists = false;
                //遍历数组中每个用户
                for (let user of users) {
                    //比较用户名和密码是否相同
                    if (user.name == username && user.password == password) {
                        exists = true;
                        break;
                    }
                }
                //输出登录成功或失败
                if (exists) {
                    alert("登录成功，欢迎您：" + username);
                }
                else {
                    alert("登录失败，请重试");
                }
            },
            dataType: "json"   //指定返回数据类型是json
        })
    });
</script>
</body>
</html>

6.jQuery3.0新增的$.get()和$.post()方法

$.get([settings])
$.post([settings])

settings是一个JSON形式的对象

代码同$.ajax，只需修改方法名即可

gmx_holic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX-01-一分钟快速入门

AJAX-01-一分钟快速入门1.概述AJAX(Asynchronous JavaScript And XML) :异步的JavaScript和XML使用的技术：JavaScript：用于后台发送数据给服务器，并处理服务器响应的结果XML：用于接收服务器返回的数据，目前已被JSON代替好处一般网页若需要更新内容，会将整个页面全部重新加载一遍。而AJAX可以通过浏览器与服务器进行少量的数据交换，只局部更新网页的部分内容。等待服务器响应期间可进行其他操作2.同步和异步的区别同步方式：正
复制链接

扫一扫