服务器的基本概念与初识Ajax

---

一、客户端与服务器

上网的本质目的：通过互联网的形式来获取和消费资源，那么资源是存在哪里呢？

1.服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器。其本质上就是一台电脑，只不过它的性能要比个人电脑高很多。

2.客户端

上网过程中，负责获取和消费资源的电脑，叫做客户端。每个人的电脑就是客户端。
个人电脑中，可以通过安装浏览器的形式，访问服务器对外提供的各种资源。

---

二、URL地址

1.URL地址的概念

UniformResourceLocator，统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
类似每个人的身份证号，可以精确定位每个人的身份。URL地址可以精确定位到每个资源的位置。
常见的URL举例：http://www.baidu.com，http://www.taobao.com

2.URL地址的组成部分

一般由三部分组成：
（1）客户端与服务器的通信协议(https)
（2）存有该资源的服务器名称(blog.csdn.net)
（3）资源在服务器上具体的存放位置(weixin_44863645/article/details/115872746)
https://blog.csdn.net/weixin_44863645/article/details/115872746

---

三、分析网页的打开过程

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

客户端请求__服务器处理请求___服务器响应客户端

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

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

客户端请求url地址

服务器响应给客户端的数据

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

1.例举网页中常见的资源

文字内容，image图片，Audio音频，Video视频…
网页中的数据是不是资源？

2.数据也是资源

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

3.数据是网页的灵魂

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

4.网页中如何请求数据？

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

具体如何拿数据？
如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象。
xhr是浏览器提供的js成员，通过它可以请求服务器上的数据资源。
最简单的用法var xhrObj=new XMLHttpRequest()

5.资源的请求方式

客户端请求服务器时，请求方式有很多种，最常见的两种请求方式分别是GET和POST请求。
（1）GET请求：通常用于获取服务器资源(向服务器要资源)
例如：根据URL地址，从服务器获取HTML文件，CSS文件，js文件，图片文件，数据资源等…
（2）POST请求：通常用于向服务器提交数据(往服务器发送资源)
例如：登录时向服务器提交的登录信息，注册时向服务器提交的注册信息，添加用户时向服务器提交的用户信息等各种提交操作

五、了解Ajax

1.什么是Ajax？

Asynchronous Javascript And XML___异步Javascript和XML
通俗理解：在网页中利用xhr对象和服务器之间进行数据交互方式，就是Ajax
Ajax能让我们轻松实现网页与服务器之间的数据交互

2.Ajax的典型应用场景

（1）用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用
（2）搜索提示：当输入搜索关键字时，通过Ajax的形式，动态加载搜索提示列表
（3）数据分页显示：当点击页码值时，通过Ajax的形式，根据页码值动态刷新表格的数据
（4）数据的增删改查：数据的添加，删除，修改，查询操作，都需要通过Ajax的形式，来实现数据的交互。数据增删改查之后，都需要把数据提交到服务器。

---

六、jQuery中的Ajax

1.了解jQuery中的Ajax

浏览器中提供的xhr用法比较复杂，所以jQuery对xhr进行了封装，提供了一系列Ajax相关函数，极大地降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法如下：
$.get(),
$.post(),
$.ajax()

2.$.get()函数的语法

$.get(url,[data],[callback])
其中三个参数各自代表含义：
url：String,要请求的资源地址
data：Object,请求资源期间要携带的参数
callback：function,请求成功时的回调函数，在回调函数中可以拿到服务器响应回来的数据。

（1）$.get()发起不带参数的请求
直接提供请求的URL地址和请求成功之后的回调函数即可
$.get(‘http://www…’,function(res){
// 这里的res是服务器返回的数据
console.log(res)
})

（2）$.get()发起带参数的请求
第二个参数是参数对象，是要发送到服务器中
要请求id为1的信息
$.get(‘http://www…’, { id : 1 }, function(res){
// 这里的res是服务器返回的数据
console.log(res)
})

3.$.post()函数的语法

功能专一，专门用来发起post请求，从而向服务器提交数据
$.post(url,[data],[callback])
其中三个参数各自代表含义：
url：String,要提交数据的地址
data：Object,要提交的数据
callback：function,数据提交成功时的回调函数

$.post()向服务器提交数据示例
$.post(‘http://www…’, // 请求的URL地址
{bookname:‘水浒传’,author:‘施耐庵’}, //提交的数据
function(res){ //回掉函数
// 服务器响应回来的数据__例如：添加图书成功
console.log(res)
})

4.$.ajax()函数的语法

功能比较综合的函数，既可以发起post请求，又可以发起get请求
$.ajax()函数的基本语法如下：
$.ajax({
type: ’ ’ , // 请求的方式，例如GET/POST
url: ’ ’ , // 请求的URL地址
data: ’ ’ , //这次请求要携带的参数
success: function( (res){ } ) // 请求成功后的回调函数
})

（1）使用$.ajax()发起GET请求
$.ajax({
type: 'GET ’ , // 请求的方式，例如GET/POST
url: 'http://www… ’ , // 请求的URL地址
data: { id : 1 } , //这次请求要携带的参数
success: function( (res){
console.log(res)
} ) // 请求成功后的回调函数
})

（2）使用$.ajax()发起POST请求
$.ajax({
type: 'POST ’ , // 请求的方式，例如GET/POST
url: 'http://www… ’ , // 请求的URL地址
//要提交给服务器的数据
data: {
bookname:‘水浒传’,
author:‘施耐庵’
} ,
// 提交成功后的回调函数
success: function( (res){
console.log(res)
} )
})

---

七、接口

1.接口的概念

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口(简称接口)。同时，每个接口必须有请求方式。
http://www.yuyongqi.top:3000/api/getbooks___获取图书列表的接口(GET请求)
http://www.yuyongqi.top:3000/api/addbook___添加图的接口(POST请求)

2.分析接口的请求过程

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

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

3.接口测试工具

PostMan
让我们在不写任何代码的情况下，对接口进行调用和测试