Ajax的前提背景
-
客户端与服务器
客户端:获取资源的电脑
服务器:存放对外提供资源的电脑 -
URL地址
中文名称:统一资源 定位符。作用:标识互联网上每个资源存放的唯一位置
组成:1、通信协议 2、服务器名称 3、存放位置(资源在服务器上的具体位置) -
分析网页的打开过程
1、客户端请求服务器(XMLHttpRequest)
实例获取数据请求var XHRobj = new XMLHttpRequest()
2、服务器处理请求
3、服务器响应客户端
(网页中的每个资源都是请求->处理->响应的方式从服务器获取资源) -
服务器对外提供了哪些资源
文字、图片、音频、视频、数据等
请求方式:get(获取资源)、post(提交资源)
了解Ajax
-
Ajax全称Asynchronous And XML(异步JavaScript和XML)
作用:实现网页与服务器的数据交互 -
jquery中的ajax
jQuery对XMLHttpRequest进行封装,提供了一系列Ajax的相关函数,降低了Ajax的使用难度
JQuery中发起Ajax请求最常用的三个方法:1、$.get() 2、$.post() 3、$.ajax()
$.get()语法获取资源: $.get(url, [data] , [callback] ) => 其中[]中的参数为可选参数 URL 参数请求的资源地址 data 请求资源期间携带的参数 callback 参数是请求成功后所执行的函数名
$.get()语法不带参数示例:
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){ console.log(res) //回调函数,返回数据 })
$get()语法带参数示例:
$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
console.log(res)//回调函数,返回数据
})
`
$.post()语法提交数据:
$.post(url, [data] , [callback] ) => 其中[]中的参数为可选参数
URL 参数请求的资源地址
data 请求资源期间携带的参数
callback 参数是请求成功后所执行的函数名
示例
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'水浒传二',author:'施耐庵', publisher:'浙江图书出版社'},
function(res){
console.log(res)
})
$.ajax()函数语法
$.ajax({
type:'' , //请求方式,例如GET 或POST
url:'' , //请求URL地址
data:{ } , //这次请求携带的数据
success:function(res){ } //请求成功之后的回调函数
})
$.ajax()发起GET请求
$.ajax({
type:'get' , //请求方式,例如GET 或POST
url:'http://www.liulongbin.top:3006/api/getbooks' , //请求URL地址
data:{
id:1 //这次请求携带的数据
} ,
success:function(res){
console.log(res) //请求成功之后的回调函数
}
})
$.ajax()发起POST请求
$.ajax({
type:'post' , //请求方式,例如GET 或POST
url:'http://www.liulongbin.top:3006/api/addbook' , //请求URL地址
data:{
bookname:'水浒传', //提交给服务器的数据
author:'施耐庵',
publisher:'浙江图书出版社'
} ,
success:function(res){
console.log(res) //请求成功之后的回调函数
}
})
-
接口(基础引入)
定义:被请求的URL地址,就叫做数据接口(简称接口),每个接口必须有请求方式
接口测试工具:PostManGET请求测试
POST请求测试
-
接口文档的组成部分
1、接口名称:标识各个接口的简单说明,如登录接口,获取图书列表接口等 2、接口URL:接口调用地址 3、调用方式:接口调用方式,如GET或POST 4、参数格式:接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容 5、响应格式:接口返回值的详细描述,一般包括数据名称、数据类型、说明等3项内容`在这里插入代码片` 6、返回示例(可选):通过对象的形式返回数据的结构
- 案例-图书管理
案例用到的库和插件:
css库bootstrap.css
javascript库jquery.js
vs code 插件bootstrap 3 Snippets
<!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&#