Ajax 从入门到进阶详解

星辰大海1412

已于 2023-05-19 15:27:21 修改

阅读量367

点赞数 3

文章标签： ajax 服务器前端

于 2023-05-16 23:31:23 首次发布

本文链接：https://blog.csdn.net/m0_61662775/article/details/130716223

版权

学习任务：

能够知道和服务器相关的基本概念
能够知道客户端和服务器通信的过程
能够知道数据也是一种资源
能够说出什么是Ajax以及应用场景
能够使用jQuery中的Ajax函数请求数据
能够知道接口和接口文档的概念

原生AJAX

简介

AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML。

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势:无刷新获取数据。

AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML简介

XML 可扩展标记语言

XML被设计用来传输和存储数据。

XML（eXtensible Markup Language）和HTML（呈现数据）类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

XML 是一种用于描述数据的标记语言，具有严格的语法和可扩展性，被广泛应用于数据存储和传输领域。在使用 XML 进行开发时，需要注意文件大小、解析性能和安全性等问题，以保证开发出高质量的应用。

现在已经被JSON替代了。

AJAX的特点

1️⃣AJAX的优点

(1)可以无需刷新页面而与服务器端进行通信。

(2)允许你根据用户事件来更新部分页面内容。

2️⃣Ajax的缺点

(1)没有浏览历史，不能回退

(2)存在跨域问题(同源)

(3)SEO不友好 Search Engine Optimization（动态创建，爬虫爬不到）

HTTP

HTTP (hypertext transport protocol) 协议「超文本传输协议」，协议详细规定了浏览器和万维网服务器之间互相通信的规则。（约定，规则）

HTTP 是一个请求-响应协议。客户端发送 HTTP 请求到服务器，并且服务器返回响应。HTTP 请求通常由以下几部分组成：

①请求行：包括请求方法、请求 URL 和协议版本。

②请求头：包括请求相关的一些信息，如浏览器类型、语言等。

③空行：只是用来分隔请求头和请求体的一个空行。

④请求体：包括请求需要传输的数据，如提交表单数据等。

服务器收到请求后，会进行相应处理，并返回响应给客户端。HTTP 响应通常由以下几部分组成：

①状态行：包括协议版本、状态码和状态描述。

②响应头：包括响应相关的一些信息，如服务器信息、内容类型等。

③空行：只是用来分隔响应头和响应体的一个空行。

④响应体：包括服务器返回给客户端的数据，如 HTML 页面等。

HTTP 是一个简单、灵活、可扩展的协议，能够满足不同环境的需求。HTTP/1.1 是目前应用最广泛的版本，它支持持久连接、分块传输编码、管道化等特性，从而提高了通信效率。

请求报文（格式与参数)

行 POST
头 Host; Cookie; Content-type; User-Agent
空行
体 username

响应报文

行 HTTP
头：Content-type； Content-length；Content-encoding
空行
体

客户端与服务器

①服务器：

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

②客户端：

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

URL地址

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

URL地址的组成部分

URL地址一般由三部组成:

①客户端与服务器之间的通信协议

②存有该资源的服务器名称

③资源在服务器上具体的存放位置

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

图解客户端与服务器的通信过程

⭕注意:

①客户端与服务器之间的通信过程，分为 请求 - 处理 - 响应三个步骤。

②网页中的每一个资源，都是通过 请求 - 处理 - 响应 的方式从服务器获取回来的。

分析网页的打开过程

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

1.打开Chrome浏览器

2. CtrI+ Shift+I打开Chrome的开发者工具

3.切换到Network面板

4.选中Doc页签

5.刷新页面，分析客户端与服务器的通信过程

服务器对外提供了哪些资源

数据也是资源

网页中的数据，也是服务器对外提供的一种资源。

数据是网页的灵魂

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

骨架、颜值、行为皆为数据服务，数据，在网页中无处不在

网页中如何请求数据

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

XMLHttpRequest (简称xhr)是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。

最简单的用法

var xhrObj = new XMLHttpRequest();

资源的请求方式

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

●get 请求通常用于获取服务端资源(向服务器要资源)

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

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

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

了解Ajax

Ajax的全称是Asynchronous Javascript And XML (异步JavaScript和XML)。

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

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

Ajax的典型应用场景

1️⃣用户名检测:注册用户时，通过ajax的形式，动态检测用户名是否被占用；

2️⃣搜索提示:当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表；

3️⃣数据分页显示:当点击页码值的时候，通过ajax的形式，根据页码值动态刷新表格的数据；

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

jQuery中的Ajax

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

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

●$.get( )

●$.post( )

●$.ajax( )

①$.get()函数的语法

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

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

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

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

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

（1）$.get() 发起不带参数的请求

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

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

（2）$.get() 发起带参数的请求

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

$. get( 'http://www. liulongbin. top: 3006/api/getbooks', { id: 1 }，function (res){

    console.log (res)

})

②$.post() 函数的语法

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

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

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

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

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

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

$.post(
' http:/ /www. liulongbin. top: 3006/api/ addbook', //请求的URL地址
    { bookname: '水浒传'，author: '施耐庵'，publisher: '上海图书出版社' }，//提交的数据
    function(res) { //回调函数
        console. log (res);
    }    
)

③$.ajax()函数的语法

相比于$.get() 和$.post()函数, jQuery 中提供的$.ajax()函数,是-个功能比较综合的函数，它允许对Ajax请求进行更详细的配置。

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

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

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

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

$.ajax({
    tybe: 'GET', //请求的方式
    url: 'http:/ /www. liulongbin. top: 3006/api/getbooks', //请求的URL地址
    data: { id: 1 },// 这次请求要携带的数据
    success :function(res) { //请求成功之后的回调函数
        console.log (res) 
    }
})

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

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

$.ajax({
    type: 'POST', //请求的方式
    urr: 'http:/ /www. liulongbin. top: 3006/api/addbook', // 请求的URL地址
    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请求)。

分析接口的请求过程

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

2.通过POST方式请求接口的过程

接口测试工具

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

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

PostMan界面的组成部分，从上到下，

从左到右，分别是:

●菜单栏

●工具栏

●左侧历史记录与集合面板

●请求页签

●请求地址区域

●响应结果区域

●状态栏

使用PostMan测试GET接口

步骤:

1. 选择请求的方式

2.填写请求的URL 地址

3.填写请求的参数

4.点击Send按钮发起GET请求

5.查看服务器响应的结果

使用PostMan测试POST接口

步骤:

1. 选择请求的方式

2.填写请求的URL地址

3.选择Body面板并勾选数据格式

4.填写要发送到服务器的数据

5.点击Send按钮发起POST请求

6.查看服务器响应的结果

接口文档

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

接口文档的组成部分

接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的

调用提供依据:

1. 接口名称:用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。

2. 接口URL:接口的调用地址。

3. 调用方式:接口的调用方式，如GET或POST.

4.参数格式: 接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。

5.响应格式: 接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。

6.返回示例 (可选) :通过对象的形式，例举服务器返回数据的结构。

接口文档示例

✍🏻案例-图书管理

1️⃣渲染Ul结构

2️⃣案例用到的库和插件

用到的CSS库bootstrap.css
用到的javascript库jquery.js
用到的VS code插件Bootstrap 3 Snippets

3️⃣渲染图书列表(核心代码)

function getBookList() {
    // 1.发起ajax请求获取图书列表数据——>API接口
    $.get( 'http:/ /www. liulongbin. top: 3006/api/getbooks', function (res) {
    // 2.获取列表数据是否成功
    if (res.status !== 200) return alert(' 获取图书列表失败! ')
    // 3.渲染页面结构
    var rows =[ ] //用于存储所有的tr行
    $ .each (res . data, function(i, item) { // 4.循环拼接字符串
        rows. push( '<tr><td>' + item.id + '</td><td>' + item. bookname +'</td><td>' + item. author + '</td><td>' + item. publisher + '</td><td>'<a 
        href="javascript:; ">删除</a></td></tr>')
    })
    $(' #bookBody').empty().append (rows.join('')) // 5.渲染表格结构
    })
}

⭕后期通过each( )循环append的元素无法通过on( )绑定事件，因此需要代理的方式（通过父级元素事件委托代理 通过代理的方式为动态添加的元素绑定点击事件）

.trim() //去掉空格

✍🏻聊天室案例

实现步骤:

①梳理案例的代码结构

①梳理页面的UI布局

头部Header区域
中间聊天内容区域
底部消息编辑区域
右侧滚动条（发消息滚动到页面最底部 resetui()）

②将业务代码抽离到chat.js中

③了解 resetui()函数的作用

②将用户输入的内容渲染到聊天窗口

//为发送按钮绑定点击事件处理函数
$(' #btnSend') .on('click', function () {
    var text = $('#ipt') .val(). trim() //获取用户输入的内容
    if (text. length <= 0) { // 判断用户输入的内容是否为空
        return $('#ipt') .val('')//并清空文本框
    }

    //将用户输入的内容显示到聊天窗口中
    $('#talk_ list') .append('<li class="right_ word"><img src="img/ person02.png" /> <span>+ text + '</span></li>')   //通过给每一个li起类名来区别发消息的人
    resetui() //重置滚动条的位置
    $('#ipt') .val('') //清空输入框的内容

    //发起请求，获取聊天内容
    getMsg(text)

})

③发起请求获取聊天消息

//获取聊天机器人发回来的消息
functipn getMsg(text) {
    $.ajax({
            method: 'GET' ,
            url: 'http://ajax. frontend. itheima . net:3006/api/ robot'，
            data: {
            spoken: text  //这次请求携带一个参数（数据），值为text
        },
        success: function ( res){ //成功的回调函数，message的值
            if(res.message==='success'){
                var msg = res.data. info. text 
                //接受聊天消息
                $('#talk_ list') .append('<li class="left word"><img src=" img/ person01. png" />
                <span>' + msg + '</span></li>')

                resetui ()

                // TODO: 发起请求，将机器人的聊天消息转为语音格式
                //调用getVoice 函数，把文本转化为语音
                getVoice(meg)

            }
        }
    })
}

④将机器人的聊天内容转为语音

function getVoice (text) {
    $.ajax({
            method:'GET',
            url: 'http:/ /ajax. frontend. itheima . net: 3006/api/ synthesize' ,
            data: {
                text: text 
            },
        success: function (res){
            //如果请求成功，则res.voiceUrl 是服务器返回的音频URI地址
            if(res. status == 200) {
                //播放语音
                $('#voice') .attr('src', res. voiceUrl)
            }
        }
    })
}

⑤通过<audio>播放语音

<!-- 音频播放语音内容-->
<audio src="" id="voice" autoplay style="display: none; "></audio>
<!--⭕注意:只要为audio 指定了新的src属性，而且指定了autoplay,那么，语音就会自动播放-->

⑥使用回车键发送消息

//让文本输入框响应回车事件后，提交消息
$('#ipt') .on('keyup', function (e) {
    // e. keyCode  可以获取到当前按键的编码
    if (e. keyCode === 13) {
    //调用按钮元素的click 函数，可以通过编程的形式触发按钮的点击事件
        $(' #btnSend') .click ()
    }
})

form表单与模板引擎

学习任务：

能够说出form表单的常用属性
能够知道如何阻止表单的默认提交行为
能够知道如何使用jQuery快速获取表单数据
能够知道如何安装和使用模板引擎
能够知道模板弓|擎的实现原理

form表单的基本使用

表单

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

<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>

表单的组成部分

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

●表单标签

●表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

●表单按钮

< form>标签的属性

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

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

1. action

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

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

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

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

2. target

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

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

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

<form action=" /login" target=" blank">
</form>

3. method

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

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

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

（名字与值用等号分割，多个数据之间用&分割，action URL与数据之间用?分隔）

⭕注意:

get方式适合用来提交少量的、简单的数据。

post方式适合用来提交大量的、复杂的、或包含文件上传的数据。

在实际开发中，<form> 表单的post提交方式用的最多，很少用get。例如登录、注册、添加数据等表单操作，都需要使用post方式来提交表单。

4. 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️⃣表单的同步提交

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

2️⃣表单同步提交的缺点

①<form>表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。

②<form> 表单同步提交后，页面之前的状态和数据会丢失。

3️⃣如何解决表单同步提交的缺点

如果使用表单提交数据，则会导致以下两个问题:

①页面会发生跳转

②页面之前的状态和数据会丢失

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

通过Ajax提交表单数据

监听表单提交事件

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

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

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

阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault( )函数，来阻止表单的提交和页面的跳转，示例代码如下:

$(' #form1') . submit (function(e)
{
    //阻止表单的提交和页面的跳转
    e.preventDefault ()
})

$(' #form1') . on(' submit', function(e) {
    //阻止表单的提交和页面的跳转
    e.preventDefault ()
})

快速获取表单中的数据

1. serialize()函数

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

$ (selector) .serialize ()

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

2. serialize()函数示例

<form id= ="form1 ">
    <input type="text" name="usarname'/>
    <input type="password" name="password" />
    <button type="submit"> 提交</button>
</form>

$('#form1') .serialize ()
//调用的结果:
// username= 用户名的值&password =密码的值

键值对指的是key&value的组合，key存的是值的名称，value存的是值的内容

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

案例-评论列表

渲染Ul结构

模板引擎的基本概念

渲染Ul结构时遇到的问题

星辰大海1412

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Ajax 从入门到进阶详解

Ajax（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML，是一种运用于 Web 应用中的新技术。它利用浏览器提供的 XMLHttpRequest 对象，通过后台与服务器进行少量数据交换，并实现页面无刷新的更新，从而提高 Web 应用的交互性和用户体验。
复制链接

扫一扫