【Ajax】实现网页与服务器之间的数据交互

Per aspera ad astra 循此苦旅，以觅繁星
通过这篇文章带你了解网页与服务器之间的数据交互的原理与使用方法。

一、服务器的基本概念

在实现数据交互之前先了解服务器的概念，有助于我们之后更好的理解和使用数据交互的语法。

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

客户端与服务器

1. 客户端：上网过程中，负责获取和消费的电脑，叫做客户端

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

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

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

步骤：

1. 客户端 请求 服务器
2. 服务器 处理 这次请求
3. 服务器响应客户端

注意

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

网页中如何请求数据

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

常见资源 ：文字内容、image图片、Audio 音频、Video 视频、数据等。

资源的请求方式

数据也是服务器对外提供的一种资源，必然也要通过 发送 - 请求 - 响应 的方式进行获取
在网页中请求服务器的数据资源，需要用到XMLHttpRequest对象

XMLHttpRequest

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的使用难度

1. $.get() 用来获取是资源

2. $.post() 提交资源

3. $.ajax() 既可以获取资源，又可以提交资源

$.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);
                })

$.post()函数的语法

专门用来发起post请求，从而向服务器提交数据

语法

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

• url : string , 必选参数 ，提交数据的地址
• data： object 可选参数， 要提交的数据
• callback ： function 可选参数 数据提交成功时的回调函数

post（）向服务器提交数据

 $.post(