初识Ajax——jQuer中的ajax以及图书管理案例

Ajax的前提背景

  1. 客户端与服务器

    客户端:获取资源的电脑
    服务器:存放对外提供资源的电脑

  2. URL地址

    中文名称:统一资源 定位符。作用:标识互联网上每个资源存放的唯一位置
    组成:1、通信协议 2、服务器名称 3、存放位置(资源在服务器上的具体位置)

  3. 分析网页的打开过程

    1、客户端请求服务器(XMLHttpRequest)
    实例获取数据请求var XHRobj = new XMLHttpRequest()
    2、服务器处理请求
    3、服务器响应客户端
    (网页中的每个资源都是请求->处理->响应的方式从服务器获取资源)

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

    文字、图片、音频、视频、数据
    请求方式:get(获取资源)、post(提交资源)

了解Ajax

  1. Ajax全称Asynchronous And XML(异步JavaScript和XML)
    作用:实现网页与服务器的数据交互

  2. 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) //回调函数,返回数据
            })
    

初识Ajax——jQuer中的ajax以及图书管理案例_第1张图片

初识Ajax——jQuer中的ajax以及图书管理案例_第2张图片
$get()语法带参数示例:

	$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
          console.log(res)//回调函数,返回数据
     })

`初识Ajax——jQuer中的ajax以及图书管理案例_第3张图片

$.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——jQuer中的ajax以及图书管理案例_第4张图片

$.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地址,就叫做数据接口(简称接口),每个接口必须有请求方式
    接口测试工具:PostMan

    GET请求测试
    初识Ajax——jQuer中的ajax以及图书管理案例_第5张图片
    POST请求测试
    初识Ajax——jQuer中的ajax以及图书管理案例_第6张图片

  • 接口文档的组成部分

     	1、接口名称:标识各个接口的简单说明,如登录接口,获取图书列表接口等
     	2、接口URL:接口调用地址
     	3、调用方式:接口调用方式,如GET或POST
     	4、参数格式:接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容
     	5、响应格式:接口返回值的详细描述,一般包括数据名称、数据类型、说明等3项内容`在这里插入代码片`
     	6、返回示例(可选):通过对象的形式返回数据的结构
    
  1. 案例-图书管理
		案例用到的库和插件:
			css库bootstrap.css
			javascript库jquery.js
			vs code 插件bootstrap 3 Snippets
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    

你可能感兴趣的:(ajax,javascript,服务器)