AJAX快速入门

卒获有所闻

已于 2022-08-22 12:14:34 修改

阅读量129

点赞数 1

文章标签： ajax javascript 前端

于 2022-08-22 12:14:13 首次发布

本文链接：https://blog.csdn.net/weixin_54232666/article/details/126462542

版权

一、对AJAX了解

1、什么是AJAX

即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

2、同步与异步的区别

同步提交：

同步请求是指当前发出请求后，浏览器什么都不能做，
必须得等到请求完成返回数据之后，才会执行后续的代码，
相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

异步提交：

默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

3、AJAX 的优点

AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。
异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
前端和后端负载平衡
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本

4、AJAX的缺点

AJAX的安全问题，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能

5、AJAX的参数

我们使用ajax发送请求是可以携带参数的，参数就是和后台交互的时候给他的一些信息

携带参数get和post两种常见的方式的区别：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

但这些情况要使用post：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

二、AJAX使用

1、$.ajax

jQuery 调用 ajax 方法格式：$.ajax({});

参数：

url：请求地址
type：请求方式（get或post）
data：发送到服务器的数据（将自动转换为请求字符串格式）发送到服务器的数据，格式是json格式或者json字符串格式。如果是 GET 请求，系统就通过 url 传递；如果是 POST 请求，系统就通过设置请求体传递。
success：请求成功的回调函数，该回调函数中的第一个参数是服务器返回的数据（拿到的只是数据），它会自动根据服务端响应的 Content-type 自动转换为对象，如果服务端没有设置响应头Content-type，返回的还是字符串类型的数据。

<script src="js/jquery-3.6.0.js"></script>
<script>
    $.ajax({
        type: "get",        // 请求方式
        url: "js/data.txt", // 请求路径
        dataType: "json",   // 预期返回一个 json 类型数据
        success: function (data) {   // data是形参名，代表返回的数据
            console.log(data);
        }
    });
</script>

看浏览器控制台输出

把查询出来的数据展示在页面中，即放入到 body 标签中

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$.ajax</title>
    </head>
    <body>
        <button id="bt">查询数据</button>
    </body>

    <script src="js/jquery-3.6.0.js"></script>
    <script>

        $('#bt').click(function () {
            $.ajax({
                type: "get",        // 请求方式
                url: "js/data.txt", // 请求路径
                dataType: "json",   // 预期返回一个 json 类型数据
                success: function (data) {   // data是形参名，代表返回的数据
                    // Dom 操作
                    // 创建 ul
                    var ul = $('<ul></ul>');
                    // 遍历 data
                    for (let i = 0; i < data.length; i++) {
                        // 创建 li
                        var li = '<li>' + data[i].userName + '</li>';
                        // 将 li 追加到 ul 中
                        ul.append(li);
                    }
                    // 将 ul 追加到 body 中
                    $("body").append(ul);
                }
            });
        });
    </script>
</html>

2、$.get

这是一个简单的 GET 请求功能以取代复杂 $.ajax。

请求成功时可调用回调函数，如果需要在出错时执行函数，请使用 $.ajax

语法：

$.get("请求地址","请求参数",function(形参){
    
});

请求 json 文件，忽略返回值

$.get('js/data.json');

请求 json 文件，传递参数，忽略返回值

$.get('js/data.json',{name:'tom',age:100});

请求 json 文件，拿到返回值，请求成功后可拿到返回值

$.get('js/data.json',function(data){
    console.log(data);
});

请求 json 文件, 传递参数，拿到返回值

$.get('js/data.json',{name:'tom',age:19},function(data){
    console.log(data);
});

3、$.post

语法：

$.post("请求地址","请求参数",function(形参){
    
});

$.getJSON和$.get、$.post的用法是一致的，但是区别在于，$.getJSON 只能获取 json 格式的数据，其他的无法获取，而 $.get 和 $.post都可以获取。

卒获有所闻

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX快速入门

java后端开发想学习ajax，这一篇就够了
复制链接

扫一扫