AJAX.js

初识AJAX

URL地址: 统一资源定位符,用于标识互联网上每个资源唯一存放位置。
URL组成 :

      1. 客户端与服务之间的通讯协议
      2. 该资源的服务器名称
      3. 资源在服务器上的具体存放位置

通信过程:
请求
处理
响应

​ 网页中请求数据
​ let xhrObj = new XMLHttpRequest();
​ js 成员可以通过它请求服务器上的数据资源
————————————————————————​

​ 客户端请求服务器时
​ 用get 和 post
​ get 用于从服务器获取资源
​ post 向服务器提交资源

————————————————————————​

AJAX : 在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式。

​ 实先数据交互

————————————————————————​

​ 应用场景

​ 动态检测用户名查重

​ 搜索提示

​ 动态刷新表格数据

---

Jquery中的AJAX

GET请求

get 用于从服务器获取资源

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

url :	地址
data:	请求资源要携带的参数 可选
callback :	请求成功时的回调函数 可选

//<button id="btnGET">按钮</button>
$(function () {
      //on可以注册多个事件
            $('#btnGET').on('click', function () {
                       //res 接受服务器返回的数据
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
   
                    console.log(res);
                })
            })
            //带参数
            $('#btnGET1').on('click', function () {
              //请求id 为1的参数信息    //res 接受服务器返回的数据
                $.get('http://www.liulongbin.top:3006/api/getbooks', {
    id: 1 }, function (res) {
   
                    console.log(res);
                })
            })
        })

post请求

post 向服务器提交资源

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

url :	地址
data:	要提交的数据 可选
callback :	数据提交成功时的回调函数 可选

//<button id="btnPOST">按钮</button>
$(function () {
   
            $('#btnPOST').on('click', function () {
   
                $.post('http://www.liulongbin.top:3006/api/addbook',  //d地址
                    {
    bookname: '请w求', author: '吴', publisher: '上海w河南' },  //提交的数据
                    function (res) {
      //回调函数
                        console.log(res);
                    }
                )
            })
        })

JQ独有的AJAX

$.ajax(type,url,[data],[callback]) 功能综合的函数

type:	请求方式,例如 get和post type:‘get’
url :	地址
data:	携带的数据
success:	请求成功时的回调函数 可选

GET请求

比如登录如果密码错误result.success的值就是false一般还会有一个msg=‘密码错误’ 如果密码和账号正确就会返回result.success=true执行后续的代码。这个数据结构是前后端一起协商定义的格式

//<button id="btnGET">按钮</button>
$(function () {
   
            $('#btnGET').on('click', function () {
   
                $.ajax({
   
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {
   
                        id: 1
                    },
                    success: function (res) {
   //success  请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
                        console.log(res);
                    }
                });
            });
        });

POST请求

//<button id="btnPOST">POST按钮</button>
$(function () {
   
            $('#btnPOST').on('click', function () {
   
                $.ajax({
   
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
   
                        bookname: '我请求',
                        author: '我吴',
                        publisher: '我我河南'
                    },
                    success: function (res) {
   
                        console.log(res);
                    }
                });
            });
        });

---

接口

使用AJAX请求数据时, 被请求的URL地址, 就叫数据接口 ( 简称接口 ) . 同时每个接口必需有请求方式。

例如:

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口 ( GET请求 )

http://www.liulongbin.top:3006/api/addbook 添加图书的接口 ( POST请求 )

接口请求过程

用户与网页交互 → ← 网页发起请求 → 服务器响应请求 ↓

​ ←返回数据

接口测试工具 : PostMan Apipost

GET接口测试

新建接口 选择GET 输入接口

查询 di为 1的请求

发送请求

输出

POST接口测试

与GET相似 但是要在Body下选择 x-www-from-urlencoded 。

接口文档

接口的说明文档

文档组成：

1. 接口名称: 用来表示各个接口的简单说明, 如登录接口, 获取图书列表接口。
2. 接口URL: 接口的调用地址。
3. 接口的调用方式: 如GET和POST。
4. 参数格式: 接口需要传递的参数, 每个参数必需包括: 参数名称 、参数类型 、是否必选 、参数说明这4项内容。
5. 响应格式：接口的返回值的详细描述，一般包括数据名称、数据类型、说明这3项。
6. 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。

---

from表单

表单在网页中主要负责数据采集功能。HTML from 标签，就是用于采集用户输入信息，并通过标签的提交操作，把采集到的信息

提交给服务器端进行处理。

表单的基本组成：

1. 表单标签 。
2. 表单域 。
3. 表单按钮。

form属性

form标签是用来采集数据，属性是用来规定如何把采集到的数据发送到服务器。

属性	值	描述
action	URL地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定一种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在发送表单数据之前如何对其进行编码
target	_blank _self _parent _top framename	规定在何处打开 action URL

action：

后端提供URL地址，负责接收提交的数据 ， 未指定URL默认当前页面。

表单提交后会立即跳转action 指定的URL地址

target ：

默认的值是 _self ，表示在相同框架中打开action URL。

值	描述
_blank	在新窗口打开。
_self	默认的值在相同框架（窗口）中打开action URL。
_parent	在父框架中打开。（很少用）
_top	在整个窗口中打开。（很少用）
framename	在指定框架打开。（很少用）

method：

规定（get或post）一种方式把表单数据提交到 action URL。

默认get 表示通过URL地址的形式，把表单数据提交到action URL。

get适用于少量简单的数据。

post：更加安全 在URL中看不到数据。

post适用于大量的复杂的、或包含文件数据上传。

enctype：

值	描述
application/x-www-form-urlencoded	发送前编码所有字符（默认）。
multipart/form-data	不对字符编码 ，在使用包含文件上传控件的表单时，必需使用该值。
text/plain	空格转换为 ‘+’ 加号，但不对特殊字符编码（很少用）。

<body>
     <form action="/login" target="_blank" method="post" enctype="application/x-www-form-urlencoded">
        <input type="text" name="email_or_mobile" />
        <input type="password" name="password" />
        <button type="submit">提交</button> <!-- submit 发送表单支持键盘提交 -->
    </form>
</body>

表单的同步提交

点击submit 按钮，触发表单提交操作，从而使页面跳转到 action URL 的行为，叫表单的同步提交。

1. 表单提交后整个页面会发生跳转，用户体验差。
2. 页面之前的状态和数据会丢失。

解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器。

AJAX提交表单数据

1. 阻止表单提交后默认的跳转行为，可调用事件对象的 event.preventDefaukt（）函数，阻止跳转。
2. 快速获取表单中的数据 JQuery提供了serialize() 函数 一次型获取表单中所有的数据。

<body>
    <form action="/login" id="f1">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">提交</button>
    </form>

    <script>

        $(function () {
     
            //第一种方式
            // $('#f1').submit(function () {
     
            //     alert(1);
            // e.preventDefault(); //阻止默认提交后跳转
            // let data = $(this).serialize();  //获取数据
            // console.log(data);
            // })

            //第二种方式
            $('#f1').on('submit', function (e) {
     
                alert(1);
                e.preventDefault();  //阻止默认提交后跳转
                let data = $(this).serialize();  //获取数据
                console.log(data);
            });
        });
    </script>
</body>

---

模板引擎

指定的模板结构和数据， 自动生成一个完整的HTML页面

模板引擎优点:

1. 减少了字符串的拼接操作。
2. 使代码结构清晰。
3. 便于阅读。

art-template模板引擎

1. 下载后导入 在 window 全局,多一个函数, 叫做template(‘模板ID’,需要渲染的数据对象)。
2. 定义数据。
3. 定义模板， 模板的HTML 结构 ,必需定义到 script 中 ↓
4. 调用函数templatel。 ↓
5. 渲染HTML结构。 ↓

 <script type="text/javascript">
     //都有一个type属性
     //type="text/javascript"   默认将script内的代码当成js代码
     //type="text/html"         模板结构应写这里
</script>

<head>
    <!-- 1. 导入模板引擎 -->
    <!-- 在 window 全局,多一个函数, 叫做template('模板ID',需要渲染的数据对象) -->
    <script src=