Ajax 01客户端和服务器 | jQuery中的ajax | 服务端接口

Ajax -网络编程

客户端和服务器的基本概念

• 上网的目的

  • 获取和消费（使用）资源

• 客户端和服务器（服务端）

  • 客户端：
    • 使用服务的计算机
    • 如果一台计算机希望成为客户端，必须安装浏览器

• 服务端：

  • 提供服务的计算机
  • 如果一台计算机希望成为服务端，必须安装特定的服务端软件

服务器

负责存放和对外提供资源的电脑，叫做服务器。

URL地址

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

• URL地址的组成部分
  • 客户端与服务器之间的通信协议
  • 存有该资源的服务器名称
  • 资源在服务器上的具体存放位置

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

• 客户端与服务器之间的通讯过程，分为 三个步骤：客户端请求服务器、服务器内部处理、服务器响应客户端。
• 网页中的每一个资源，都是通过请求-处理-响应从服务器获取过来的

浏览器的network 面板的使用

• network用来检测浏览器发出的每次请求以及响应过程
  • 左侧
  • 顶部具有请求的筛选功能
  • 选择某一条请求后，可以查看请求的具体内容
    • request 请求
    • response 响应

服务器的资源

• 常见的资源：图片、文字、音频、视频、css文件

• 核心资源：数据（根据数据生成页面结构可以让页面制作变简便，维护成本降低）

• htmlcssjs 的关系

  • HTML是网页的结构、骨架

  • css是网页的样式、颜值

  • js 是网页的行、 控制交互

  • 数据是网页的灵魂

资源的请求方式

• 请求类型

  • 语义的区别

    • get 用来获取资源的请求操作

      • 获取图片、音频、视频、js文件、css文件、地址栏输入地址回车， location.herf，a标签跳转

    • post 用来进行发送资源的请求操作

      • 表单提交 form标签（get 、fost均可，可以自己选择）
      • ajax 也可以发送get 和平post请求 （新内容）

  • 可发送数据大小有区别

    • get请求受限制于浏览器对url的限制，2m左右
    • post请求理论上无大小限制，实际受限于服务器实际的需求和处理性能
    • 可发送的数据格式有区别
      • get请求只能发送文本格式的数据
      • post请求不限制发送的数据格式，服务器会根据业务需求进行处理

请求发送方式

• 地址栏、a标签、location.href 、img.src link.href （无法干预） form+submit

  上面的

上面是的请求方式统一特点：都会出现跳转（有的我们无法干预）

实际功能制作时，很多功能虽然请求了新的数据

AJAX 简介

Ajax(Asynchronous Javascript And XML(异步Javascript和XML))

• 作用：用来发送请求的一种方式

• 实现方式简介：浏览器提供了一个XML HttpResquest的构造函数，创建的对象用来进行Ajax操作

• 特点：不刷新页面，也可以进行请求响应处理（局部刷新）

同步和异步的概念

js的语言特性

• js是弱类型语言
• js是动态语言
• js是脚本语言 （还有编译语言）不需要编译处理
• js是基于对象的语言（面向对象语言）
• js是基于原型的语言
• js是单线程的语言
  • 单线程（只有一个人干活）
    • 因为js中具有DOM操作，例如修改元素颜色，单个线程操作不会与其他线程产生干扰
    • es5后js也出现了多线程的概念，但是有限制，多个线程只能进行辅助操作，主线程进行控制，核心代码只能主线程操作
  • 多线程（有好多人干活）

同步和异步

• 同步任务：代码按顺序从上往下一个一个执行。

• 异步任务：

  • 为什么要有异步任务：因为某些任务较为耗时，或执行时间不确定，为了避免阻塞后续代码，设置为异步任务。
  • 常见异步任务：
    • 定时器
      • l例：无论定时器设置时间是多少，都会比同步任务执行晚。
    • Ajax
  • 执行顺序：异步代码一定是在同步代码执行之后进行

jQuery中的Ajax

浏览器中提供的XML HttpRequsuest比较复杂

jquery中发起Ajax请求最常用的三个方法：$.get(), $.post(),$.ajax()

$.get()的使用

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

• 没有请求参数，不接收响应数据

  $.ger(地址);通过浏览器调用
  

  没有请求参数，接收响应数据

//演示不发送数据的get请求
$.get("http://www.liulongbin.top:3006/api/getvooks",function(res){
    //响应完毕触发这个回调函数
    console.log(res);
})
//发送请求 也发送数据
$.get("http://www.liulongbin.top:3006/api/getvooks",{name:'jake'，age:18},function(res){
    //响应完毕触发这个回调函数
    console.log(res);
})

• 有请求参数，接收响应数据
  • 请求参数：请求中发送给服务端的数据

$.get(地址，请求参数组成的对象，回调函数)

$.ajax()使用

• type 表示请求方式，默认为’GET’，可以设置为’GET/POST’

• url表示请求地址

  • 只有URL属性是必须设置的

• data 表示请求参数，对象结构

• success 表示响应成功时的处理函数

  • res参数，表示响应内容

//1.使用$.ajax()发送GET请求
$.ajax({
    type:'GET'
    url:"http192.168.141.45:3005/common/get",
    data:{name:18,age:18,gender:"男"}，
    success:function(res){console.log(res)}
});

$.get()/$.post（）与$.ajax()的关系

$.ajax是jQuery中设置的一个用来进行ajax请求发送的方法$.get() $.post()只是调用了$.ajax()实现的功能

接口的概念

• 接口：电源接口 usb接口 网线接口 type-c接口

  • 概念：接口指的是能够提供某种能力的事物。

• 应用程序编程接口（API）

  • 概念：提供应用程序编程能力的事物

  • 以前学习过的API

    • WebAPI：浏览器提供的，与web开发相关的一些API,本质上就是一堆属性方法

    • 内置对象API：js解析器提供的，用于js基础语法操作的一些API，本质上就是一堆一堆方法

    • js的组成部分和浏览器的主要构成

      • 浏览器的两个主要构成部分

        • 内核（渲染引擎）：html和css渲染，webAPI
        • js解析器：执行ECMAScript

      • 规范相关内容

        • w3c规范：html css webAPI
        • ECMA规范：语法（含内置对象）

• 数据接口：

  • 概念：数据接口是能够提供数据的一种事物。表现形式就是URL
    • 简单来说，能够提供数据的一个URL地址，就称为是数据接口
    • 前端和后端（服务器）交互时，所说的“接口”指的就是数据接口。
    • 使用方式：严格遵守接口的文档进行操作即可。