Ajax + HTTP

最新推荐文章于 2024-07-26 09:50:12 发布

henrenzhengdere

最新推荐文章于 2024-07-26 09:50:12 发布

阅读量395

点赞数

分类专栏：前端文章标签： ajax http 服务器

本文链接：https://blog.csdn.net/m0_65552590/article/details/126127634

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

Ajax + HTTP

一、Ajax介绍

1. 客户端和服务器

上网的本质目的：通过互联网的形式来获取和消费资源

1.1 服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器

1.2 客户端

上网过程中，负责获取和消费资源的电脑，叫做客服端

2.URL地址

URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。
浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源

2.1 URL地址的组成部分

URL地址一般由三部分组成：

客户端与服务器之间的通信协议
存有该资源的服务器名称
资源在服务器上具体的存放位置

在这里插入图片描述

3.客户端与服务器的通信过程

在这里插入图片描述

注意：

客户端与服务器之间的通信过程，分为请求 - 处理 - 响应 三个步骤
网页中的每一个资源，都是通过 请求 - 处理 - 响应 的方式从服务器获取回来的

3.1基于浏览器的开发者工具分析通信过程

打开Chrome浏览器
Ctrl + Shift + l 打开 Chrome的开发者工具
切换到Network面板
选中Doc页签
刷新页面，分析客户端与服务器的通信过程

4. 服务器对外提供了那些资源

4.1 网页中常见的资源

文字内容 、Image图片、Audio音频、Video视频

4.2 数据也是资源

网页中的数据，也是服务器对外提供的一种资源 例如股票数据、各行各业的排行榜

4.3数据是网页的灵魂

HTML是网页的骨架
CSS是网页的颜值
JavaScript是网页的行为
数据则是网页的灵魂

骨架、颜值、行为皆为数据服务

数据,在网页中无处不在

4.4 网页中如何请求数据

数据,也是服务器对外提供的一种资源。只要是资源，必然要通过 请求 - 处理 - 响应 的方式从服务器获取

在这里插入图片描述

如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象

XMLHttpRequest（简称xhr）是浏览器提供的成员,通过它,可以请求服务器上的数据资源

最简单的用法：

let xhrObj = new XMLHttpRequest()

4.5 资源的请求方式

客户端请求服务器时，请求的方式有很多种,最常见的两种请求方式分别为get和post请求

get请求通常用于获取服务端资源（向服务器要资源）

例如：根据URL地址，从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资源等

post请求通常用于向服务器提交数据（往服务器发送资源）

例如：登陆时想服务器提交的登陆信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

5.Ajax

5.1 什么是Ajax

Ajax的全称是 Asynchronous JavaScript And XML（异步 JavaScipt 和XML）

通俗的理解：在网页中利用XMLHttpRequestrian对象和服务器进行数据交互的方式，就是Ajax

5.2 为什么要学Ajax

之前所学的技术，只能把网页做的更美观漂亮，或者添加一些动画效果,但是，Ajax 能让我们轻松实现网页与服务器之间的数据交互

在这里插入图片描述

5.3 Ajax的典型应用场景

用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用

在这里插入图片描述

搜索提示：当输入搜索关键字时，通过Ajax的形式，动态加载搜索提示列表

在这里插入图片描述

数据分页显示：当点击页码值的时候，通过Ajax的形式，根据页码值动态刷新表格的数据

在这里插入图片描述

数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过ajax的形式，来实现数据的交互

在这里插入图片描述

6. jQuery中的Ajax

浏览器中提供了XMLHttpRequest用法比较复杂,所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度

jQuery中发起Ajax请求最常用的三个方法如下：

$.get()
$.post()
$.ajax()

6.1 $.get()函数的语法

jQuery中$.get()函数的功能单一，专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用

**$.get()函数的语法如下: **

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

其中，三个参数各自代表的含义如下：

参数名	参数类型	是否必选	说明
`url`	`string`	`是`	要请求的`资源地址`
data	object	否	请求资源期间要`携带的参数`
callback	function	否	请求成功的`回调函数`

6.2 $.get()发起`不带参数`的请求

使用$.get()函数发起不带参数的请求时，直接提供了请求的URL地址和请求成功之后的回调函数即可

$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res) {
    console.log(res) // 这里的res是服务器返回的数据
})

6.3 $.get()发起`带参数`的请求

使用$.get()函数发起带参数的请求时，实例代码如下

$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {
    console.log(res) // 这里的res是服务器返回的数据
})

6.4 $.post()函数的语法

jQuery中$.post()函数的功能单一，专门用来发起post请求，从而想服务器提交数据

**$.post()函数的语法如下: **

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

参数名	参数类型	是否必选	说明
`url`	`string`	`是`	`提交数据的地址`
data	object	否	`要提交的数据`
callback	function	否	数据提交成功时的`回调函数`

6.5 $.post()向服务器提交数据

使用$post()向服务器提交数据的示例代码如下：

$.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }, function (res) {
          console.log(res)
        })

6.6 $.ajax()函数的语法

相比于 $. g e t () 和$ .post()函数，jQuery中提供的$.ajax()函数，是一个功能比较综合的函数，他允许我们对Ajax请求进行更详细的配置

$.ajax()函数的基本语法如下：

$.ajax({
    type: '', // 请求的方式，例如 GET 或 POST
    url: '', // 请求的URL地址
    data:{ }, // 这次请求要携带的数据
    success: function(res){
        
    } // 请求成之后的回调函数
})

6.7 使用$.ajax()发起GET请求

使用$.ajax()发起GET请求时，只需要将type属性的值设置为’GET’即可：

$.ajax({
    type: 'GET', // 请求方式
    url: 'http://www.liulongbin.top:3006/api/getbooks',
    data: {id : 1},
    success: function(res) {
        console.log(res)
    }
})

6.8 使用$.ajax()发起POST请求

使用$.ajax()发起POST时，只需要将type属性的值设置为’POST’即可：

$.ajax({
                type: 'POST', // 请求的方式
                url: 'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
                data: {  // 要提交给服务器的数据
                    bookname: '水浒传',
                    author: '施耐庵',
                    publisher: '天津图书出版社'
                },
                success: function(res) { // 请求成功之后的回调函数
                    console.log(res);
                }
            })

7.接口

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）同时，每个接口必须有请求方式

例如：

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

http://www.liulongbin.top:3006/api/addbook // 添加图书接口（POST请求）

7.2 分析接口的请求过程

通过GET方式请求接口的过程

在这里插入图片描述

通过POST方式请求过程

在这里插入图片描述

7.3 接口测试工具

（1）什么是接口测试工具

为了验证接口能否被正常访问，我们常常需要使用接口测试工具，来对数据接口进行测试

好处： 接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试

（2）下载并安装PostMan

访问postMan的官方下载网址Postman API Platform | Sign Up for Free

（3）了解PostMan界面的组成部分

PostMan界面的组成部分，从上到下从左到右，分别是：

菜单栏
工具栏
左侧历史记录与集合面板
请求页签
请求地址区域
请求参数区域
响应结果区域
状态栏

7.4 使用PostMan测试GET接口

步骤:

选择请求的方式
填写请求的URL地址
填写请求的参数
点击Send按钮发起GET请求
查看服务器响应的结果

7.5 使用PostMan测试POST接口

步骤:

选择请求的方式
填写请求的URL地址
选择Body面板并勾选数据格式
填写要发送到服务器的数据
点击Send按钮发起POST请求
查看服务器响应结果

7.6接口文档

（1）什么是接口文档

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用

（2）接口文档的组成部分

接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，一个包含一下6项内容，从而为接口的调用提供依据：

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

8. 图书列表案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <script src="../lib/jquery.js"></script>
</head>
<body style="padding: 15px;">
    <!-- 添加图书Panel面板 -->
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title">添加新图书</h3>
          </div>
          <div class="panel-body form-inline">
                
                <div class="input-group">
                    <div class="input-group-addon">书名</div>
                    <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
                </div>

                <div class="input-group">
                    <div class="input-group-addon">作者</div>
                    <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
                </div>

                <div class="input-group">
                    <div class="input-group-addon">出版社</div>
                    <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
                </div>
                <button id="btnAdd" class="btn btn-primary">添加</button>
          </div>
    </div>
    <!-- 图书的表格 -->
    
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>
    <script>
        $(function(){
            // 获取图书列表数据
            function getBookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {
                    if(res.status !== 200) return alert('获取数据失败!')
                    let rows = []
                    $.each(res.data,function(i,item) {
                        rows.push(`
                        <tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td><a href ="javascript:;" class = "del" data-id = "${item.id}">删除</a></td>
            </tr>
                        `)
                    })
                    $('#tb').empty().append(rows.join(''))
                })             
            }
            getBookList()
            // 删除操作
            $('tbody').on('click','.del',function() {
                let id = $(this).attr('data-id')
                $.get('http://www.liulongbin.top:3006/api/delbook',{id: id},function(res){
                    if(res.status !== 200) return alert('删除图书失败!')
                    getBookList()
                })
            })
            // 添加操作
            $('#btnAdd').on('click',function(){
                let bookname = $('#iptBookname').val().trim()
                let author = $('#iptAuthor').val().trim()
                let publisher = $('#iptPublisher').val().trim()
                if(bookname === '' || author === '' || publisher === ''){
                    return alert('请填写完整的图书信息！')
                }
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
                        bookname: bookname,
                        author:author,
                        publisher,publisher
                    },
                    success: function(res){
                        if(res.status !== 201){
                            return alert('添加图书失败!')
                        }
                        getBookList()
                        $('#iptBookname').val('')
                        $('#iptAuthor').val('')
                        $('#iptPublisher').val('')
                    }
                })
            })
        })
    </script>
</body>
</html>

9. 聊天机器人案例

$(function(){
    // 初始化右侧滚动条
    // 这个方法定义在scroll.js中
    resetui()


    // 为发送按钮绑定点击事件
    $('#btnSend').click(function() {
        let text = $('#ipt').val().trim()
        if(text === '') {
            return $('#ipt').val('')
        }
    // 如果用户输入了聊天内容，则将聊天内容追加到页面上显示
    $('#talk_list').append(`<li class="right_word">
    <img src="img/person02.png" /> <span>${text}</span>
  </li>`)
  $('#ipt').val('')
  // 重置滚动条的位置
  resetui()
    // 发送请求获取内容
    getMsg(text)
    })

    // 获取聊天机器人发送回来的消息
    function getMsg(text) {
        $.ajax({
            type: 'get',
            url: 'http://www.liulongbin.top:3006/api/robot',
            data: {
                spoken: text
            },
            success: function (res) {
                if(res.message === 'success') {
                    let msg = res.data.info.text
                    $('#talk_list').append(`<li class="left_word">
            <img src="img/person01.png" /> <span>${msg}</span>
          </li>`)
                    // 重置滚动条位置
                    resetui()
                    // 调用getVideo函数，把文字转换成语音
                    getVideo(msg)
                }
            }
        })
    }
    // 把文字转换成语音
    function getVideo(text) {
        $.ajax({
            type: 'get',
            url: 'http://www.liulongbin.top:3006/api/synthesize',
            data: {
                text : text
            },
            success: function (res) {
                if(res.status === 200) {
                    // 播放语音
                    $('#voice').attr('src',res.voiceUrl)
                }
            }
        })
    }
    // 为文本框绑定keyup事件
    $('#ipt').on('keyup', e => {
        if(e.keyCode === 13) {
            $('#btnSend').click()
        }
    })
  })

二、form表单 + 案例

1. form 表单的基本使用

1.1 什么是表单

表单在网页中主要负责数据采集功能.HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理

1.2 表单的组成部分

<form>
        <input type="text" name="email_or_mobile"/>
        <input type="password" name="password"/>
        <input type="checkbox" name="remember_me checked">
        <button type="submit">提交</button>
    </form>

表单由三个基本部分组成：

表单标签
表单域
表单按钮

1.3 标签的属性

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

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

action

action属性用来规定当提交表单时，向何处发送表单数据

action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据

当表单在未指定action属性值的情况下，action的默认值为当前页面的URL地址

注意

当提交表单后，页面会立即跳转到action属性指定的URL地址

target

target属性用来规定在何处打开action URL

它的可选值有5个，默认情况下，target的值是_self,表示在相同的框架中开发actionURL

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

method

method属性用来规定以何种方式把表单数据提交到action URL

他的可选值有两个，分别是get和post

默认情况下，method的值为get，表示通过URL地址的形式，把表单数据提交到actionURL

注意:

get方式合适用来提交少量的、简单的数据
post方式适合用来提交大量的、复杂的、或包含文件上传的数据
在实际开发中表单的post提交方式用的最多，很少用get。例如登陆、注册、添加数据等表单操作，都需要使用post方式来提交表单

enctype

enctype属性用来规定在发送表单数据之前如何对数据进行编码

他的可选值有三个，默认情况下，enctype的值为application/x-www-form-urlencoded,表示在发送前编码所有的字符

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

注意：

在涉及到文件上传的操作时，必须将enctype的值设置为multipart/form-data

如果表单的提交不涉及到文件上传操作，则直接将enctype的值设置为application/x-www-form-urlencoded即可

1.4 表单同步提交

什么是表单的同步提交

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

表单同步提交的缺点

..表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址用户体验差
.表单同步提交后，页面之前的状态和数据会丢失

解决方案：

表单只负责采集数据，Ajax负责将数据提交到服务器

2. 通过Ajax提交表单数据

2.1 监听表单的提交事件

在jQuery中，可以使用如下两种方式，监听到表单的提交事件：

$('#form1').submit(function(e) {
    alert('监听到了表单的提交事件')
})
$('#form1').on('submit',function(e){
    alert('监听到了表单的提交事件')
})

2.2 阻止表单的默认提交事件

$('#form1').submit(function(e) {
    alert('监听到了表单的提交事件')
    e.preventDefault()
})
$('#form1').on('submit',function(e){
    alert('监听到了表单的提交事件')
    e.preventDefault()
})

2.3 快速获取表单中的数据

serialize()函数

为了简化表单中数据的获取操作，jQuery提供了serialize()函数，其语法格式如下：

$(selector).serialize()

serialize()函数的好处：可以一次性获取到表单中的所有数据

    $(function(){
            $('#form').submit(function(e){
                alert('监听到了表单的提交事件')
                e.preventDefault()
                let data = $(this).serialize()
                console.log(data);
            })

注意：

在使用serialize()函数快速获取表单数据时，必须为每个表单元素添加name属性

2.4 综合案例（评论列表）

 function getCommentList() {
        $.ajax({
            type:'get',
            url:'http://www.liulongbin.top:3006/api/cmtlist',
            success: function(res) {
                if(res.status !== 200) {
                    return alert('获取数据失败！')
                }
                let rows = []
                $.each(res.data,(i,item) => {
                    let str = `
                    <li class="list-group-item">
                    <span class="badge" style="background-color: #F0AD4E;">${item.time}</span>
                    <span class="badge" style="background-color: #5BC0DE;">${item.username}</span>
                    ${item.content}
                </li>
                    `
                    rows.push(str)
                })
                $('#cmt-list').empty().append(rows.join(''))
            }
        })
    }
    getCommentList()
$(function(){
    $('#formAddCmt').submit(function(e){
         e.preventDefault()
        let data = $(this).serialize()
        console.log(data);
        $.post('http://www.liulongbin.top:3006/api/addcmt',data,
        function(res){
            if(res.status !== 201){
                return alert('发表评论失败！')
            }        
           getCommentList() 
           $('#formAddCmt')[0].reset()       
        })
    })
})

3. 模板引擎 + 案例

3.1 什么是模板引擎

模板引擎，顾明思义，他可以根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面

在这里插入图片描述

3.2 模板引擎就好处

减少了字符串的拼接操作
使代码结构更清晰
使代码更易与阅读与维护

3.3 art-template模板引擎

art-template是一个简约、超快的模板引擎

中文地址：http://aui.github.io/art-template/zh-cn/docs/installation.html

（1）art-template的使用步骤

导入art-template
定义数据
定义模板
调用template函数
渲染HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入模板引擎 -->
    <script src="../../lib/template-web.js"></script>
    <script src="../../lib/jquery.js"></script>
</head>
<body>
    <div id="container"></div>
    <!-- 3.定义模板 -->
    <script type="text/html" id="tpl-user">
        <h1>我叫:{{name}}今年{{age}}岁了</h1>
    </script>
    <script>
        // 2. 定义需要渲染的函数
        let data = {
            name: 'zs',
            age: 20
        }
        //4. 调用template函数
        let htmlStr = template('tpl-user',data)
        console.log(htmlStr);
        // 5. 渲染HTML结构
        $('#container').html(htmlStr)
    </script>
</body>
</html>

（2）标准语法 - 输出

{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

在{{}} 语法中，可以进行变量的输出、对象属性的输出三元表达式、逻辑或输出、加减乘除等表达式输出

（3）标准语法 - 原文输出

{{@ value}}

如果要输出的value值中,包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染

（4）标准语法 - 条件输出

如果要实现条件输出，则可以在{{}}中使用if…else if …/if的方式，进行按需输出

{{if value}}按需输出的内容{{/if}}
{{if v1}}按需输出的内容{{else if v2}}按需输出的内容{{/if}}

（5）标准语法 - 循环输出

如果哟啊实现循环输出，则可以在{{}}内,通过each语法循环数组，当前循环的索引使用$index进行访问，当前的循环使用$value进行访问

{{each arr}}
{{$index}} {{$value}}
{{/each}}

（6）标准语法 - 过滤器

{{value | filterName}}

过滤器语法类似管道操作符，它的上一个输出作为下一个输入

定义过滤器的基本语法如下：

template.defaults.imports.filterName = function(value) {/*return处理的结果*/}

<div>注册时间：{{regTime | dataFormat}}</div>

定义一个格式化时间的过滤器dateFormat:

template.defaults.imports.dateFormat = function(date) {
    let y = date.getFullYear()
    let m = date.getMonth() + 1
    let d = date.getDate()
    return y + '-' + m + '-' + d // 注意：过滤器最后一定要 return 一个值
}

4. 正则与字符串操作

1.基本语法

exec()函数用于检索字符串中的正则表达式的匹配

如果字符串中有匹配的值，则返回该匹配值，否则返回null

RegExpObject.exec(string)

实例代码：

let str = 'hello'
let pattern = /0/
console.log(pattern.exec(str))
// 返回结果 ['o', index: 4, input: 'hello', groups: undefined]

2. 分组

正则表达式中（）包起来的内容表示一个分组，可以通过分组来提取直接想要的内容

let str = '<div>我是{{name}}</div>'
let pattern = /{{[a-zA-Z] +}}/
let res = pattern.exec(str)
console.log(res)

3. 字符串的replace函数

replace()函数用于在字符串中用一些字符串替换另一些字符

let result = '123456'.replace('123','abc')
// 得到的是 abc456

四、Ajax加强

1.XMLHttpRrquest的基本使用

XMLHttpRequest (简称xhr)是浏览器提供的JavaScript对象，通过他，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来的

1.1 使用xhr发起GET请求

步骤：

创建xhr对象
调用xhr.open()函数
调用xhr.send()函数
监听xhr.onreadystatechange事件

// 1. 创建xhr对象
let xhr = new XMLHttpRequest()
// 2. 调用open函数,指定请求方式和URL地址
xhr.open('GET','http://www.liulongbin.top:30067/api/getbooks')
// 3. 调用send函数,发起Ajax请求
xhr.send()
//4 4. 监听onreadystatechange事件
xhr.onreadystatechange = function() {
    // 监听xhr对象的请求状态 readyState; 与服务器响应状态 status
    if(xhr.readyState == 4 && xhr.status === 200) {
        //打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

1.2 了解xhr对象的readyState属性

XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个：

值	状态	描述
0	UNSENT	XMLHttpRequest对象已被创建，但尚未调用open方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，响应头已经背接收
3	LOADING	数据接收中，此时response属性中已经包含部分数据
`4`	`DONE`	`Ajax请求完成`这意味着数据传输语句彻底`完成`或`失败`

1.3 使用xhr对象发起带参数的GET请求

使用xhr对象发起带参数的GET请求时，只需在调用xhr.open期间，为URL地址指定参数即可：

xhr.open('GET','http://www.liulongbin.top:30067/api/getbooks?id=1')

这种在URL地址后面拼接的参数，叫做查询字符串

1.4 查询字符串

（1）什么是查询字符串

定义：

查询字符串(URL参数)是指在URL的末尾加上用于向服务器发起信息的字符串（变量）

格式：

将英文的?放在URL的末尾，然后再加上参数=值,想加上多个参数的花，使用&符号进行分隔。以这个形式，可以讲想要发送个服务器的数据添加到URL中

（2）GET请求携带参数的本质

无论使用 $. aja x (), 还是使用$ .get()，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送感到服务器的

$.get('url',{name:'zs',age"20},function(){
             
            })
$.get('url?name=zs&age=20',function(){
    
})
$.ajax({
    method: 'GET',
    url: 'url',
    data:{
        name: 'zs',
        age: 20
    },
    success: function(res){
        
    }
})
$.ajax({
    method: 'GET',
    url: 'url?name=zs&age=20',
    success:function(res){
        
    }
})

1.5 URL编码与解码

（1）什么是URL编码

URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符

如果URL中需要包含中文这样的字符，则必须对中文字符进行编码

URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的课打印字符）去表示那些不安全的字符

URL编码原则的通俗理解：使用英文字符去表示非英文字符

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
// 经过URL编码之后，URL地址变成了如下格式：
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%E8%E8%AE%B0

（2）如何对URL进行编码与解码

浏览器提供了URL编码与解码的API，分别是：

encodeURI() 编码的函数
decodeURI() 解码的函数

encodeURI('黑马程序员')
// 输出字符串 %E9%EE%91%E9
decodeURI('%e9%bb%91%e9%A9%AC')
// 输出字符串 黑马

URL编码的注意事项：

由于浏览器会自动对URL地址进行编码操作，因此，大多数情况下，程序员不需要关心URL地址的编码与解码操作

1.6 使用xhr发起POST请求

步骤：

创建xhr对象
调用xhr.open()函数
设置Content-Type属性（固定写法）
调用xhr.send()函数,同时指定要发送的数据
监听xhr.onreadystatechange事件

// 1.创建xhr对象
let xhr = new XMLHttpRequest()
// 2. 调用open()
xhr.open('POST','http://www.liulongbin.top:30067/api/getbook')
// 3. 设置Content-Type属性（固定写法）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 4. 调用send，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听onreadystatechange事件
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200 ) {
        console.log(xhr.responseText)
    }
}

2.数据交换格式

2.1 什么是数据交换格式

数据交换格式，就是服务器端与客户端之前进行数据传输与交换的格式

前端领域，经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少，所有我们重点使用JSON

在这里插入图片描述

2.2 XML

（1）什么是XML

XML的英文全称是EXtensible MarkupLanguage，即可扩展标记语言因此，XML和HTML类似,也是一种标记语言

（2）XML和HTML的区别

XML和HTML虽然都是标记语言，但是，他们两则之间没有任何关系

HTML被设计用来描述网页上的内容,是网页内容的载体
XML被设计用来传输和存储数据，是数据的载体

在这里插入图片描述

（3）XML的缺点

<note>
<to>ls</to>
<form>zs</form>
<heading>通知</heading>
<body>晚上开会</body>
</note>

XML格式臃肿，和数据无关的代码多，体积大，传输效率低
在JavaScript中解析XML比较麻烦

2.3 JSON

（1）什么是JOSN

概念：JSON的英文全称是JavaScript Object Notation,即’JavaScript 对象表示法’。

简单来讲，JSON就是JavaScript对象和数组的字符串表示法，它是由文本表示一个JS对象或数组的信息，因此，JSON的本质是字符串

作用：JSON是一种轻量级的文本数据交换格式,在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小、更快、更易解析

现状：JSON是在2001年开始被推广和使用的数据格式，到现今为止,JSON已经成为了主流的数据交换格式

（2）JSON的两种结构

对象结构：对象结构在JSON中表示为{ }括起来的内容。数据结构为{key：value,key：value,…}的键值对结构。其中，key必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字、字符串、布尔值、null、数组、对象6钟类型

数组结构：数组结构在JSON中表示为{ }括起来的内容。数据结构为：[‘java’,‘javascript’,30,true…]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6钟类型

['java','python','php']
[100,200,300.5]
[true,false,null]
[{"name":"zs","age":20},{"name":"ls","age":30}]

（3）JSON语法注意事项

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON中不允许使用单引号表示字符串
JSON中不能写注释
JSON的最外层必须是对象或数组格式
不能使用undefined或函数作用JSON的值

JSON的作用：在计算机与网络之间存储和传输数据

JSON的本质：用字符串来表示JavaScript对数据或数组数据

（4）JSON和JS对象的关系

JSON是JS对象的字符串表示法，他使用文本表示一个JS对象的信息，本质是一个字符串。例如：

// 这是一个对象
let obj = {a: 'Hello',b:'World'}
// 这是一个JSON字符串,本质是一个字符串
let json = '{"a":"Hello","b":"World"}'

（5）JSON和对象的互转

要实现JSON字符串转换为JS对象，使用JSON.parse()方法：

let obj = JSON.parse('{"a":"Hello"},"b":"World"')
// 结果是{a:'hello',b:'world'}

要实现从JS对转换为JSON字符串，使用JSON.stringify()方法：

let json = JSON.stringify({a:'Hello',b:'World'})
// 结果是'{"a":"Hello","b":"World"}'

let xhr = new XMLHttpRequest()
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = () => {
    if(xhr.readyState === 4 && xhr.status === 200) {
        let result = JSON.parse(xhr.responseText)
        console.log(result);
    }
}

（6）序列化和序列化

把数据对象转换为字符串的过程，叫做序列化,例如：调用JSON.stringify()函数的操作，叫做JSON序列化
把字符串转换为数据对象的过程，叫做反序列化，例如：调用JSON.parse()函数的操作，叫做JOSN反序列化

3. 封装自己的Ajax函数

3.1 定义options参数选项

itheima()函数是我们自定义的Ajax函数，他接收一个配置对象作为参数，配置对象配置如下属性：

method 请求类型
url 请求地址
data 请求携带的数据
success 请求成功之后的回调函数

3.2 处理data参数

需要把data对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义resolveData函数如下：

function resolveData(data) {
    let arr = []
    for(let k in data) {
        let str = k + '=' + data[k]
        arr.push(str)
    }
    return arr.join('&')
}
let res = resolveData({name:'张三',age:20})

3.3 定义MCfengAjax

在MCfengAjax()函数中，需要创建xhr对象，并监听onreadystatechange事件：

function MCfengAjax(options){
    let xhr = new XMLHttpRequest()
    // 把外界传递过来的参数对象，转换为查询字符串
    let qs = resolveData(options.data)
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
            let result = JSON.parse(xhr.responseText)
            options.success(result)
        }
    }
}

3.4 判断请求的类型

不同的请求类型，对应xhr对象的不同操作，因此需要对请求类型进行if…else…的判断：

 if(options.method.toUpperCase() === 'GET') {
        // 发起GET请求
        xhr.open(options.method,options.url + '?' + qs)
        xhr.send()
    } else if (options.method.toUpperCase() === 'POST'){
        // 发起POST请求
        xhr.open(options.method,options.url)
        xhr.setRequestHeader('Content-Type','applicaton/x-www-form-urlencoded')
        xhr.send(qs)
    }

综合代码：

function resolveData(data) {
    let arr = []
    for(let k in data) {
        let str = k + '=' + data[k]
        arr.push(str)
    }
    return arr.join('&')
}
function MCfengAjax(options){
    let xhr = new XMLHttpRequest()
    // 把外界传递过来的参数对象，转换为查询字符串
    let qs = resolveData(options.data)
    if(options.method.toUpperCase() === 'GET') {
        // 发起GET请求
        xhr.open(options.method,options.url + '?' + qs)
        xhr.send()
    } else if (options.method.toUpperCase() === 'POST'){
        // 发起POST请求
        xhr.open(options.method,options.url)
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send(qs)
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
            let result = JSON.parse(xhr.responseText)
            options.success(result)
        }
    }
}

4.XHR Level2的新特性

4.1 XMLHttpRequest Level2的新功能

可以设置HTTP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

4.2 设置HTTP请求时限

有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限：

xhr.timeout = 3000

上面的语句，将最长等待时间设置为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数：

xhr.ontimeout = function(event){
    alert('请求超时！')
}

4.3 FormData对象管理表单数据

Ajax操作往往用来提交表单数据。为了方便表单处理，HTML5新增了一个FormData对象，可以魔力表单操作：

// 1. 创建FormData对象实例
        let fd = new FormData()
        // 2. 调用append函数向 fd追加数据
        fd.append('uname','zs')
        fd.append('upwd','123')
        // 3. 创建XHR对象
        let xhr = new XMLHttpRequest()
        // 4. 指定请求类型与url地址
        xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
        // 5. 直接提交 FormData 对象 这与提交网页表单的效果完全一样
        xhr.send(fd)
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4 && xhr.status === 200) {
                console.log(JSON.parse(xhr.responseText));
            }
        }

FormData对象也可以用来获取网页表单的值，示例代码如下：

// 1. 通过DOM操作获取表单元素
        let form = document.querySelector('#form1')
        form.addEventListener('submit', e => {
            // 阻止默认提交
            e.preventDefault()
            // 创建FormData对象实例 获取表单数据
            let fd = new FormData(form)
            // 创建XHR对象
            let xhr = new XMLHttpRequest()
            xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
            xhr.send(fd)
            xhr.onreadystatechange = () => {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        })

4.4 上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件

实现步骤：

定义UI结构
验证是否选择了文件
向FormData中追加文件
使用xhr发起上传文件的请求
监听onreadystatechange事件

（1）定义UI结构

<!--1. 文件选择框-->
<input type ='file' id="file1">
<!--2. 上传按钮-->
<button id = "btnUpload">上传文件</button>
<br/>
<!--3. 显示上传到服务器上的图片-->
<img src ="" alt = "" id = "img" width = "800">

（2）验证是否选择了文件

// 1. 获取上传文件的按钮
let btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮添加click事件监听
btnUpload.addEventListener('click',function(){
    // 3. 获取到选择的文件列表
    let files = document.querySelector('#file1').files
    if(files.length <= 0) {
        retrun  alert('请选择要上传的文件！')
    }
    console.log('用户选择了上传的文件！')
})

（3）向FormData中追加文件

let fd = new FormData()
// 将用户选择的文件，添加到FormData
fd.append('avatar',files[0])

（4）使用xhr发起上传文件的请求

// 1. 创建xhr对象
let xhr = new XMLHttpRequest()
// 2. 调用open函数，指定请求类型与URL地址。其中，请求类型必须为POST
xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)

（5）监听onreadystatechange事件

 xhr.onreadystatechange = () => {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    if(data.status === 200) {
                        // 上传成功
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006'  + data.url
                    } else {
                        // 上传失败
                        console.log('图片上传失败！' + data.message);
                    }
                }
            }

4.5 显示文件的上传进度

新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度

语法格式如下：

// 创建XHR对象
            let xhr  = new XMLHttpRequest()
            // 监听xhr.upload的onprogress事件
            xhr.upload.onprogress = e => {
                // e.lengthComputable是一个布尔值，表示当前上传文件的资源是否具有可计算的长度
                if(e.lengthComputable) {
                    // e.loaded 已传输的字节
                    // e.total 需要传输的字节
                    let percentComplete = Math.ceil((e.loaded / e.total) * 100)
                    console.log(percentComplete);
                }
            }

（1）监听上传进度事件

// 1. 计算出当前上传进度的百分比
                    let percentComplete = Math.ceil((e.loaded / e.total) * 100)
                    $('#percent')
                    // 2. 设置进度条的宽度
                    .attr('style',`width:${percentComplete}%`)
                    // 3. 显示当前的上传进度百分比
                    .html(`${percentComplete}%`)

（2）监听上传完成的事件

xhr.upload.onload = function() {
                $('#percent').removeClass().addClass('progress-bar progress-bar-success')
            }

4.6 上传文件综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/bootstrap.css">
    <script src= "../../lib/jquery.js"></script>
</head>
<body>
    <input type="file" id="file1">
    <button id="btnUpload">上传文件</button>
    <!--bootstrap进度条 -->
    
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width: 0%;" id="percent">
            0%
        </div>
    </div>
    
    <br/>
    <img src="" alt="" id="img" width="800">
    <script>
        // 1. 获取上传文件的按钮
        let btn = document.querySelector('#btnUpload')
        btn.addEventListener('click',function() {
            let files = document.querySelector('#file1').files
            if(files.length <= 0) {
                return alert('请选择要上传的文件！')
            }
            let fd = new FormData()
            fd.append('avatar',files[0])
            // 创建XHR对象
            let xhr  = new XMLHttpRequest()
            // 监听xhr.upload的onprogress事件
            xhr.upload.onprogress = e => {
                // e.lengthComputable是一个布尔值，表示当前上传文件的资源是否具有可计算的长度
                if(e.lengthComputable) {
                    // e.loaded 已传输的字节
                    // e.total 需要传输的字节
                    // 1. 计算出当前上传进度的百分比
                    let percentComplete = Math.ceil((e.loaded / e.total) * 100)
                    $('#percent')
                    // 2. 设置进度条的宽度
                    .attr('style',`width:${percentComplete}%`)
                    // 3. 显示当前的上传进度百分比
                    .html(`${percentComplete}%`)
                }
            }
            xhr.upload.onload = function() {
                $('#percent').removeClass().addClass('progress-bar progress-bar-success')
            }
            xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)
            xhr.onreadystatechange = () => {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    if(data.status === 200) {
                        // 上传成功
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006'  + data.url
                    } else {
                        // 上传失败
                        console.log('图片上传失败！' + data.message);
                    }
                }
            }
        })
    </script>
</body>
</html>

5. jQuery高级用法

5.1 jQuery实现文件上传

（1）定义UI结构

<input type="file" id="file1">
    <button id="btnUpload">上传文件</button>

（2）验证是否选择了文件

$('#btnUpload').on('click',function() {
                let files = $('#file1')[0].files
                if(files.length <= 0) {
                    return alert('请选择上传的文件！')
                }
                console.log('OK');
            })

（3）向FormData中追加文件

let fd = new FormData()
fd.append('avater',files[0])

（4）使用jQuery发起上传文件的请求

$.ajax({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
    data: fd,
    // 不修改Content-Type属性，使用FormData默认的Content-type值
    contentType : false,
    // 不对FormData中的数据进行URL编码，而是将FormData数据原样发送到服务器
    processData: false,
    success: res => {
        console.log(res)
    }
})

5.2 jQuery实现loading效果

（1）ajaxStart(callback)

Ajax请求开始,执行ajaxStart函数，可以在ajaxStart的callback中显示loading效果

// 自 jQuery版本 1.8器，该方法只能被附加到文档
$(document).ajaxStart(function() {
    $('#loading').show()
})

注意：$(document).ajaxStart()函数会监听当前文档内所有的Ajax请求

（2）ajaxStop(callback)

Ajax请求结束时，执行ajaxStop函数，可以在ajaxStop的callback中隐藏loading效果

$(document).ajaxStop(function() {
    $('#loading').hide()
})

6. axios

Axios是专注于网络数据请求的库

相比于原生的XMLHttpRequest对象，axios简单易用

相比于jQuery，axios更加轻量化,只专注于网络数据请求

6.1 axios发起GET请求

axios发起get请求语法：

axios.get('url',{params:{/*参数*/} }).then(callback)

具体的请求示例：

// 请求的url地址
let url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
let paramsObj = {name: 'zs' , age: 20}
// 调用 axios.get() 发起GET请求
axios.get(url,{params: paramsObj}).then(res => {
    // res.data 服务器返回的数据
    let result = res.data
    console.log(result)
})

6.2 axios发起POST请求

axios发起POST请求的语法：

axios.post('url',{params:{/*参数*/} }).then(callback)

具体的请求示例：

// 请求的URL地址
let url = 'http://www.liulongbin.top:3006/api/post'
// 要提交打哦服务器的数据
let dataObj = {location: '长沙',address:'岳麓'}
axios.post(url,dataObj).then(res => {
    // res.data 是服务器返回的数据
    let result = res .data
    console.log(result)
})

6.3 直接使用axios发起请求

axios也是提供了类似于jQuery中$.ajax()的函数

axios({
    method: '请求类型',
    url: '请求的URL地址',
    data: {/*POST数据*/},
    params: {/*GET数据*/}
}).then(ballback)

（1）直接使用axios发起GET请求

axios({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/get'
    params: {
    // GET 参数要通过params属性提供
    name: 'zx',
    age: 20
}
}).then(res => {
    console.log(res.data)
})

（2）直接使用axios发起POST请求

axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: {
        // POST 数据通过 data属性提供
        bookname: '程序员的自我修养',
        price: 3000
    }
}).then(res => {
    console.log(res.data)
})

五、跨域与JSONP

1. 同源策略和跨域

1.1 同源策略

（1）什么是`同源`

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源

例如：http://www.test.com/index.html页面的同源检测：

URL	是否同源	原因
http://www.test.com/other.html	是	同源（协议、域名、端口相同）
https://www.test.com/about.html	否	协议不同（`http`与`https`）
http://blog.test.colm/movies.html	否	域名不同（`www.test.com`与`blog.test.com`）
http://www.test.com:7001/home.html	否	端口不同（默认的`80`端口与`7001`端口）
http://www.test.com:80/main.html	是	同源（协议、域名、端口相同）

（2）什么是`同源策略`

同源策略（英文全称Same origin policy）是浏览器提供的一个安全功能

MDN官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

**通俗的理解：**浏览器规定，A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互，例如：

无法读取非同源网页的Cookie、LocalStorage和IndexedDB
无法接触非同源网页的DOM
无法向非同源地址发送Ajax请求

1.2跨域

（1）什么是`跨域`

同源指的是两个URL的协议、域名、端口一致，反之,则是跨域

出现跨越的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互

网页：http://www.test.com/index.html

接口：http://www.api.com/userlist

（2）浏览器对跨域请求的拦截

在这里插入图片描述

注意：

浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被网页获取到

（3）如何实现跨域数据请求

现如今，实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS

JSONP:出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决解决方案。缺点是只支持GET请求，不支持POST请求

CORS:出现的较晚，他是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器

2.JSONP

2.1 什么是JSONP

JSONP（JSON with Padding）是JSON的一种"使用模式"，可用于解决主流浏览器的跨域数据访问的问题

2.2 JSONP的实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。但是

因此，JSONP的实现原理，就是通过

2.3 实现一个简单的JSONP

定义一个success回调函数：

function success (data) {
    console.log('获取到了data数据:')
    console.log(data)
}

通过

<script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script>

2.4 JSONP的缺点

由于JSONP是通过

注意:

JSONP和Ajax之间没有任何关系,不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest这个对象

2.5 jQuery中的JSONP

jQuery提供的$.ajax()函数，除了可以发起真正的Ajax数据请求之外，还能狗发起JSONP数据请求，例如：

$.ajax({
    url: 'http://www.liulongbin.top:3006/api/jsonp?&name=ls&age=30',
    // 如果要使用$.ajax() 发起JSONP请求，必须指定datatype为jsonp
    dataType: 'jsonp',
    success: res => {
        console.log(res)
    }
})

默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数，`jQueryxxx是水机生成的一个回调函数名称

2.6 自定义参数及回调函数名称

在使用jQuery发起JSONP请求时，如果想要自定义JSONP的参数以及回调函数名称，可以通过如下两个参数来指定

$.ajax({
    url: 'http://www.liulongbin.top:3006/api/jsonp?&name=ls&age=30',
    // 如果要使用$.ajax() 发起JSONP请求，必须指定datatype为jsonp
    dataType: 'jsonp',
    // 发送到服务端的参数名称，默认值为callback
    jsonp: 'callback',
    // 自定义的回调函数名称,默认值为jQueryxxx格式
    jsonpCallback: 'abc'
    success: res => {
        console.log(res)
    }
})

2.7 jQuery中JSONP的实现过程

jQuery中的JSONP，也是通过

在发起JSONP请求的时候，动态
中append一个

 $('#btn').click(function() {
            console.log('12321');
            $.ajax({
            url: 'http://www.liulongbin.top:3006/api/jsonp?&name=ls&age=30',
            dataType : 'jsonp',
            jsonpCallback: 'abc',
            success: res => {
                console.log(res);
            }
        })
        })

3. 防抖和节流

1. 什么是防抖

防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这个n秒内事件又被触发，则从新记时

2. 防抖的应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完成，才执行查询的请求，这样可以有效减少请求次数，节约请求资源

3.1 缓存搜索的建议列表

（1）定义全局缓存对象

// 缓存对象
let cacheObj = {}

（2）将搜索结果保存到存储缓存对象中

// 渲染建议列表
function renderSuggestList(res) {
    //  逻辑代码
    
   // 将搜索的结果，添加到缓存对象中
    let k = $('#ipt').val().trim()
    cacheObj = res
}

（3）优先从缓存中获取搜索建议

// 监听文本框的keup事件
$('#ipt').on('keyup',function() {
    // 逻辑代码
    
    // 优先从缓存中获取搜索建议
    if(cacheObject[keywords]) {
        return renderSuggestList(cacheObject[keywords])
    }
    // 获取搜索建议列表
    debounceSearch(keywords)
})

4 .1 什么是节流

节流策略：（throttle）,顾名思义，可以减少一段时间内事件的触发评率

4.2 节流的应用场景

鼠标连续不断地触发某事件（如点击）,只在单位时间内只触发一次
懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的评率，而不必去浪费CPU资源;

4.3 `节流阀`的概念

节流阀为空,表示可以执行下次操作不为空，表示不能执行下次操作

当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了

每次执行操作前，必须先判断节流阀是否为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../lib/jquery.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #angel {
            position: absolute;
        }
    </style>
</head>
<body>
    <img src="./angel.gif" alt="" id="angel">
    <script>
            // 获取图片元素
            let angel = $('#angel')
            let timer = null
            $(document).on('mousemove',function(e) {
                if(timer) {
                    return
                }
               timer = setTimeout(function () {
                $(angel).css('left',e.pageX + 'px').css('top',e.pageY + 'px')
                timer = null
               }, 16)
            })
    </script>
</body>
</html>

4.4 防抖和节流的区别

防抖：如果事件被频繁触发，防抖能保证只有一次触发生效前面N多次的触发都会被忽略
节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件

六、HTTP协议

1.HTTP协议简介

1.1 什么是通信

通信，就是信息的传递和交换

通信三要素：

通信的主体
通信的内容
通信的方式

（1）互联网中的通信

服务器把传智学院的简介通过响应的方式给客户端浏览器

其中：

通信的主体是服务器和客户端浏览器
通信的内容是传智学院的简介
通信的方式是响应

1.2 什么是通信协议

通信协议（Communication Portocol）是指通信的双方完成通信所必须遵守的规则和约定

**通俗的理解：**通信双发采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议

（1）现实中的通信协议

张三与李四采用写信的方式进行通信，在填写信封时，写信的双方需要遵守固定的规则。信封的填写规则就是一种通信协议

在这里插入图片描述

（2）互联网中的通信协议

客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议

网页内容又叫超文本,因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol）简称HTTP协议

1.3 HTTP

（1）什么是HTTP协议

HTTP协议即超文本传送协议（Hyper Text Transfer Protocol）他规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式

客户端要以HTTP协议要求的格式把数据提交到服务器
服务器要以HTTP协议要求的格式把内容响应给客户端

（2）HTTP协议的交互模型

HTTP协议采用了请求/响应的交互模型

在这里插入图片描述

2. HTTP请求消息

2.1 什么是HTTP`请求消息`

由于HTTP协议属于客户端和服务器之间的通信协议。因此，客户端发起的请求叫做HTTP请求,客户端发送到服务器的消息，叫做HTTP请求消息

注意：

HTTP请求消息又叫做HTTP请求报文

2.2 HTTP请求消息的组成部分

HTTP请求消息由请求行（request line）、请求头部（header）、空行和请求体4个部分组成

在这里插入图片描述

（1）请求行

请求行由请求方式、URL和HTTP协议版本3个部分组成，他们之间使用空格隔开

在这里插入图片描述

（2）请求头部

请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。比如：User-Agent用来说明当前是什么类型的浏览器；Content-Type用来描述发送到服务器的数据格式；Accept用来描述客户端能够接收什么类型的返回内容；Accept-Language用来描述客户端期望接收那种人类语言的文本内容

请求头部有多行键/值对组成，每行的键和值之间用英文的冒号分隔

在这里插入图片描述

请求头部-常见的请求头部字段

头部字段	说明
Host	要请求的服务器域名
Connection	客户端与服务器的连接方式（close或keepalive）
Content-Length	用来描述请求体的大小
`Accept`	客户端可识别的响应内容类型列表
`User-Agent`	产生请求的浏览器类型
`Content-Type`	客户端告诉服务器实际发送的数据类型
Accept-Encoding	客户端可接收的内容压缩编码格式
`Accept-Language`	用户期望获得的自然语言的优先顺序

（3）空行

最后一个请求头字段的后面是一个空行,通知服务器``请求头部至此结束`

请求消息中的空行，用来分隔请求头部与请求体

在这里插入图片描述

（4）请求体

请求体中存放的，是要通过POST方式提交到服务器的数据

注意：只有POST请求才有请求体，GET请求没有请求体

3. HTTP响应消息

3.1 什么是HTTP响应消息

响应消息就是服务器响应给客户端的消息内容，也叫作响应报文

3.2 HTTP响应消息的组成部分

HTTP响应消息由状态行、响应头部、空行和响应体4个部分组成，如下图所示：

在这里插入图片描述

（1）状态行

状态行由HTTP协议版本、状态吗和状态码的描述文本3个部分组成，他们之间使用空格隔开

（2）响应头部

响应头部用来描述服务器的基本信息。响应头部由多行键值对组成，每行的键和值之间用英文的冒号分隔

在这里插入图片描述

响应头部-常见的响应头字段

在这里插入图片描述

（3）空行

在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束

响应消息中的空行，用来分隔响应头部与响应体

（4）响应体

响应体中存放的，是服务器响应给客户端的资源内容

在这里插入图片描述

4. HTTP请求方法

4.1 什么是HTTP请求方法

HTTP请求方法，属于HTTP协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行操作最常用的请求方法是GET和POST

序号	方法	描述
1	`GET`	（`查询`）发送请求来获得服务器上的资源，请求体中不会包含请数据，请求数据放在协议头中
2	`POST`	（`新增`）向服务器提交资源（例如提交表单或上传文件）数据被包含在请求体提交给服务器
3	`PUT`	（`修改`）向服务器提交资源，并使用提交的新资源，替换掉服务器对应的旧资源
4	`DELETE`	（`删除`）请求服务器删除指定的资源
5	HEAD	HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体
6	OPTIONS	获取HTTP服务器支持的HTTP请求方法，语言客户端查看服务器的性能，比如ajax跨域的预检等
7	CONNECT	建立一个到由目标资源标识的服务器的隧道
8	TRACE	沿着目标服务器的路径执行一个消息环回测试，主要用于测试或诊断
9	PATCH	是对PUT方法的补充，用来对已知资源进行局部更新

5. HTTP响应状态码

5.1 什么是HTTP响应状态吗

HTTP响应状态吗（HTTP Status Cdoe），也属于HTTP协议的一部分，用来标识响应的状态。

响应状态吗会跟着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态吗，就能知道这次HTTP请求的结果是成功还是失败了

在这里插入图片描述

5.2 HTTP响应状态吗的组成以及分类

HTTP状态吗由三个十进制数字组成，第一个十进制数字定义了状态吗的类型，后两个数字用来对状态码进行细分

HTTP状态吗共分5种类型：

分类	分类描述
1**	`信息`，服务器收到请求，需要请求者进行执行操作（实际开发中很少遇到1**类型的状态吗）
2**	`成功`，操作成功接收并处理
3**	`重定向`，需要进一步的操作完成请求
4**	`客户端错误`，请求包含语法错误或无法完成请求
5**	`服务器错误`，服务器在处理请求的过程中发送了错误

5.3 `2** 成功相关`的响应状态码

2**范围的状态吗，表示服务器已成功接收到请求并进行处理

状态码	状态码英文名称	中文描述
200	OK	`请求成功`。一般用于GET与POST请求
20`1	Created	`已创建`。成功请求并创建了新的资源，通常用于POST或PUT请求

（2）`3**重定向相关`的响应状态码

3**范围的状态码，表示服务器要求客户端重定向，需要客户端进一步的操作完成资源的请求。

状态码	状态码英文名称	中文描述
301	Moved Permanently	`永久移动`。请求的资源已被永久的移动到新URL，返回信息会包括新的URL，浏览器会自动定向到新URL。今后任何新的请求都应使用新的URL代替
302	Found	`临时移动`。与301雷士。但资源只是临时移动。客户端应进行使用原有URL
304	Not Modified	`未修改`.所请求的资源未修改，服务器返回此转态码时，不会返回任何资源（响应消息中不包含响应体）客户端通常会缓存访问过的资源

（3）`4** 客户端错误相关`的响应状态码

4** 范围的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。

状态码	转态码英文名称	中文描述
400	Bad Request	1.语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求 2. 请求参数有误
401	Unauthorized	当亲请求需要用户验证
403	Forbidden	服务器已经理解请求，但是拒绝执行他
`404`	`Not Found`	`服务器无法根据客户端的请求找到资源（网页）`
408	Request Timeout	请求超时。服务器等待客户端发送的请求时间过长，超时

（4）`5** 服务端错误相关`的响应转态码

5** 范围的转态码，表示服务器未能正常处理客户端的请求而出现意外错误

状态码	转态码英文名称	中文描述
500	Intermal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持该请求方法，无法完成请求。只有GET和HEAD请求方法是要求每个服务器是必须支持的，其他请求方法在不支持的服务器上会返回501
503	Service Unavailable	由于超载或系统维护，服务器暂时无法处理客户端的请求

|
| 3** | 重定向，需要进一步的操作完成请求 |
| 4** | 客户端错误，请求包含语法错误或无法完成请求 |
| 5** | 服务器错误，服务器在处理请求的过程中发送了错误 |

5.3 `2** 成功相关`的响应状态码

2**范围的状态吗，表示服务器已成功接收到请求并进行处理

状态码	状态码英文名称	中文描述
200	OK	`请求成功`。一般用于GET与POST请求
20`1	Created	`已创建`。成功请求并创建了新的资源，通常用于POST或PUT请求

（2）`3**重定向相关`的响应状态码

3**范围的状态码，表示服务器要求客户端重定向，需要客户端进一步的操作完成资源的请求。

状态码	状态码英文名称	中文描述
301	Moved Permanently	`永久移动`。请求的资源已被永久的移动到新URL，返回信息会包括新的URL，浏览器会自动定向到新URL。今后任何新的请求都应使用新的URL代替
302	Found	`临时移动`。与301雷士。但资源只是临时移动。客户端应进行使用原有URL
304	Not Modified	`未修改`.所请求的资源未修改，服务器返回此转态码时，不会返回任何资源（响应消息中不包含响应体）客户端通常会缓存访问过的资源

（3）`4** 客户端错误相关`的响应状态码

4** 范围的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。

状态码	转态码英文名称	中文描述
400	Bad Request	1.语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求 2. 请求参数有误
401	Unauthorized	当亲请求需要用户验证
403	Forbidden	服务器已经理解请求，但是拒绝执行他
`404`	`Not Found`	`服务器无法根据客户端的请求找到资源（网页）`
408	Request Timeout	请求超时。服务器等待客户端发送的请求时间过长，超时

（4）`5** 服务端错误相关`的响应转态码

5** 范围的转态码，表示服务器未能正常处理客户端的请求而出现意外错误

状态码	转态码英文名称	中文描述
500	Intermal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持该请求方法，无法完成请求。只有GET和HEAD请求方法是要求每个服务器是必须支持的，其他请求方法在不支持的服务器上会返回501
503	Service Unavailable	由于超载或系统维护，服务器暂时无法处理客户端的请求