对Ajax初步认识

啊呼,吖

已于 2023-03-05 11:30:17 修改

阅读量28

点赞数 1

分类专栏： Web 文章标签：服务器 ajax javascript

于 2023-02-15 21:00:23 首次发布

本文链接：https://blog.csdn.net/weixin_72647214/article/details/129050588

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

1.客户端与服务器

1.1上网的目的

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

1.2 服务器

负责存放和对外提高资料的电脑,叫做服务器

1.3 客户端
负责获取和消费资源的电脑,叫做客户端

2.URL地址

2.1 URL地址的概念
URL中文叫统一资源定位符。
用于标识互联网上每个资源的唯一存放位置。
浏览器只能通过URL地址,才能正确定位资源的存放位置，
从而成功访问对于资源。

常见的URL举例；
http://www.baidu.com

http://www.taobao.com

2.2 URL地址的组成部分
URL地址一般由三部组成；
(1)客户端与服务器之间的通信协议

(2)存有该资源的服务器名称

(3)资源在服务器上具体的存放位置

http:// www.cnblogs.com /liulongbinblogs/p/11649393.html
通信协议服务器名称资源在服务器上具体

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

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

1 客户端请求服务器
用户电脑 ——————————> web服务器 2服务器处理这次请求
<——————————
3服务器相应客户端

打开浏览器           服务器接收电脑发来的资源请求
输入要访问的网站地址       服务器在内部处理这次请求,找到相关资源
回车向服务器发起资源请求

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

4.服务器对外提高了哪些资源

4.1例举网页中常见的资源

文字内容图片音频视频

问：网络中的数据是资源吗？
是的

4.2 数据也是资源
网页中的数据,也是服务器对外提高的一种资源.例如各行业排行榜

4.3数据是网页的灵魂
html是网页的骨架 CSS是网页的颜值 JS是网页的行为
数据是网页的灵魂

4.4网页中如何请求数据
数据也是服务器对外提供的一种资源.
只要是资源,必然要通过请求-处理-响应的方式去获取

1客户端请求服务器
用户电脑 ——————————> web服务器 2服务器处理这次请求
<——————————
3服务器相应客户端

如果要在网页中请求服务器上的数据资源,则需要用到XMLHttpRequest对象
XMLHttpRequest(简称xhr)是浏览器提供的JS成员
通过它,可以请求服务器上的数据资源

var xhrObj=new XMLHttpRequest()

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

get请求通产用于获取服务端资源(向服务器要资源)
例如:根据URL地址,从服务器获取HTML文件,css文件、
js文件图片文件数据资源

post请求通常用于向服务器提交数据(往服务器发送资源)
例如:登录时向服务器提交的登录信息
注册时向服务器提交的登录信息
添加用户时向服务器提交的用户信息等数据提交操作

5.了解Ajax

Ajax的全称是Asynchronous javascript And XML(异步javascript和XML)
理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就说Ajax

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

5.3 Ajax的典型应用场景
用户名检测:注册用户时,通过ajax的形式,动态检测用户是否被占用

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

数据分页显示:当点击页码值的时候,通过ajax的形式.根据页码值动态刷新表格的数据

数据的增删改查：数据的添加、删除、修改、查询操作都需要Ajax

6.jQuery中的Ajax

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

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

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

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

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

$.get(url,[data],[callback])
中括号表示可选

参数含义:

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

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

例如:

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

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

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

6.3 $.post()函数的语法

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

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

参数含义:

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

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

$.post(
'http://www.liulongbin.top:3006/api/getbooks',
{bookname:"水浒传",author:"施耐",publisher:"上海图书馆"},
function(res){
console.log(res)
}
)

6.4 $.ajax()函数的语法

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

语法:

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

})

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

使用$.ajax()发起GET请求时,只需要将type属性的值设置为"GET"
<script>
$(function () {
$('#btnGET').on('click', function () {
$.ajax({
type: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: {
id: 1
},
success: function (res) {
console.log(res);
}
})
})
})
</script>

使用$.ajax()发起post请求
使用$.ajax()发起GET请求时,只需要将type属性的值设置为"POST"
<script>
$(function () {
$('#btnGET').on('click', function () {
$.ajax({
type: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {
bookname: '史记',
author: '司马迁',
publisher: '上海图书出版社'
},
success: function (res) {
console.log(res);
}
})
})
})
</script>