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地址,就称为是数据接口
- 前端和后端(服务器)交互时,所说的“接口”指的就是数据接口。
- 使用方式:严格遵守接口的文档进行操作即可。
- 概念:数据接口是能够提供数据的一种事物。表现形式就是URL