1、初识AJAX

1、概要

google suggest

 

A：通过发送请求到服务器上获取相关数据。

B：发送方式：通过URL、超链接、表单验证

C：将请求的数据发送给服务器获得相关数据

它是浏览器提供的一套方法，可以实现页面无刷新更新局部数据，提高用户浏览网站应用的体验。

2、传统网站存在的问题

• 网速慢的情况下，页面加载时间长，用户只能等待

• 表单提交后，如果一项内容不合格，需要重新填写所有表单内容

• 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

3、Ajax的应用场景

• 页面上拉加载更多数据

  ：页面下拉到底部出现“加载更多数据”，当我们触发超链接后向服务器发送请求获得HTML+css+JS代码对页面底部代码进行局部更新数据，页面其他部分不被重载，减少用户交互等待时间

• 列表数据无刷新分页

  ：点击下拉菜单项页面不实现重载只是向服务器发送请求获取数据更新页面部分内容

• 表单项离开焦点数据验证

  ：表单失去焦点即向服务器发送请求，获得相关数据去做表单验证名字查重

• 搜索框提示文字下拉列表

  ：获取服务器中相匹配的数据，等待客户端用户触发，提高网站浏览的便捷度，美化交互效果

4、使用ajax方法获取接口数据

 <script src="../jQuery原生源码.js"></script>
    <script>
        // 利用jQuery中的ajax方法去获取接口中存储的数据
        $.ajax(
            {
                // 获取数据接口的地址
                url:"https://jsonplaceholder.typicode.com/users",
                // 获取数据的方法
                type:"GET",
                // 定义获取的数据类型
                dataType:"json",
                // data属性是我们去从接口数据中筛选数据的
                data:{id:"5"},
                // 如果上述内容获取成功通过使用此方法去获得数据
                success:function(data){
                    // data参数是请求成功以后的传过来的数据
                    console.log(data);
                }
            }
        );
        // 现在我们可以通过ajax方法去从服务器中获取相关数据了，
        // 接下来就可以利用这些数据去进行其他操作了
    </script>