个人笔记，Ajax部分

word转md格式，个人备份

1.客户端与服务器

上网的目的是通过互联网的形式获取和消费资源

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

客户端就是上网过程中负责获取和消费资源的电脑

1.url地址

url中文名叫统一资源定位符，用于标识互联网上每个资源的位于存放位置，浏览器只有通过url地址才能正确定位资源存放的位置

url地址一般由三个部分组成：

①客户端服务器之间的通信协议
②存有该资源的服务器名称
③资源在服务器上存放的具体位置

2.客户端与服务器的通信

请求→处理→响应

网页中最常见的资源有：

文字资源，图片，音频，视频，数据

数据就是网页的灵魂

网页请求数据的方式：

使用XMLHttpRequest对象

let 数据名 = new XMLHttpRequest

客户端向服务器请求资源的方式：

get请求用于获取服务端资源

post请求用于向服务器提交数据

3.了解Ajax

在网页中使用XMLHttpRequest对象和服务器进行数据交互的时候就是Ajax

学习Ajax就可以实现网页和服务器之间的数据交互

4.jQuery中的Ajax

jQ中发起Ajax请求最常用的三个方法：

$.get(url地址字符串，(请求携带的参数对象),(回调函数，res参数就是返回的数据) 获取数据

参数对象一定是对象格式，

$.post(url地址字符串，(发送的数据对象),(回调函数，res参数就是返回的数据) 提交数据

发送的数据也是对象格式

$.ajax(
{
	type：‘请求方式，例如get或者post’，
	url：‘url地址’，
	data：{携带的数据}，
	success：function（res）{成功后的回调函数}
}) 
可获取也可以提交

在Ajax请求数据时，被请求的url地址就称为数据接口

接口测试工具可以在不写任何代码的情况下测试接口可用性，最常用的接口测试工具：

postman

get的数据要写在params里，post的数据要在body中选择格式

实现文件上传：

定义一个file属性的input选择框

<input type="file" id =“file1”>

定义上传文件按钮

<button>上传文件</buttom>

验证用户是否选择文件：

用formdata上传：

contenttype保证不修改content-type值
processdata表示不进行编码
fd就是指定的formdata

实现loading效果：

注意只能附加在document上，会监听当前页面所有ajax请求

5.form表单和模板引擎

1.form表单的基本使用

form表单在网页中主要负责数据采集，

表单由三个部分组成，分别是：

form标签：<form></form>

form主要的属性有：

action — url地址，不输入则默认值为当前页面的地址，提交表单后，页面会跳转到action的地址

target — 在何处打开action，默认是_self，表示在相同窗口打开，常用有_blank，表示在新窗口打开

method — 何种方式提交表单，分别有get和post，默认是get，表示用url地址的方式提交表单，如果是post则表示用form_data的方式提交，较安全

enctype — 表示加密方式，默认是发送前编码所有字符，还有multipart/form-data，表示不编码，上传文件必选，还有text/plain，表示空格转换为+，但是不对特殊字符编码

表单域：包含了文本框，密码框，多行文本框，复选单选框，下拉选择框等等

表单按钮：例如submit

2.表单的同步提交

表单同步提交会跳转页面，并且页面之前的状态和数据会丢失

解决方式是让表单只负责采集数据，用ajax负责提交数据

使用.on或者.submit，监听表单的submit事件

在使用e（事件对象）.preventDefault来阻止跳转

为了简化操作，jQ提供了serialize（）函数

$（表单）.serialize（）

调用的结果是：

name=值&name=值

如果要使用这个函数，必须给每个表单域提供name属性

3.模板引擎

根据程序员指定的模板结构和数据，自动生成一个完整的html页面，减少字符串拼接结构，让代码更加清晰，易于维护

一般使用art-template模板引擎

模板的script标签 type属性应该为text/html

然后调用template（‘模板id’，数据对象）函数

需要被写入的数据用{{数据对象的属性}}

类似${}

双大括号内还可以进行变量输出，三元表达式输出，逻辑或输出，加减乘除输出，加上@可以表示原文输出

还可以用if/if…else if的方式按需输出

还可以用each循环输出：

index表示索引，value表示数值

还可以使用过滤器：

{{值 | 过滤器}}

返回值是过滤后的值，过滤器定义：

filtername可以修改

6.XMLHttpReqiest的基本使用

xhr就是js原生的用于请求服务器数据资源的对象

1.使用xhr发起请求

创建xhr对象：

let xhr = new XMLHttpReqiest（）

调用open函数：

xhr. open('请求类型'， 'url' )
（post需要设置content-type属性：
xhr . setRequestHeader ( 'Content- Type' ,‘application/ x-www- form- urlencoded' )）

调用send函数：

xhr.send（（‘post的内容’））

监听onreadystatechange函数：

=4和=200是固定写法

.responseText就是返回的数据

readystate的数值表示：

0：xhr对象已创建但尚未调用open
1：调用了open
2：调用了send（）且已被接收
3：数据接收中，responseText已有部分数据
4：ajax请求完成，表示数据传输已经完成或失败

如果要携带参数发起请求，则url最后添加查询字符串（?参数1=值&参数2=值）

url地址中只能出现英文相关的字母标点数字

因此要用英文字符表示非英文字符

编码可以使用：encodeURL(str)
解码可以使用：decodeURL(str)

一般情况下会自动转换

2.新版特性

可以设置超时时间，可以用formdata对象管理表单数据，可以上传文件和获取传输进度信息

设置超时：

xhr对象.timeout = 超时时间（毫秒）
xhr对象.ontimeout = 超时调用的函数

使用formdata：

let form对象名 = new FormData（） //创建formdata对象
form对象名.append（‘key’，‘值’） //调用append，添加数据
xhr对象.send（form对象）//调用

上传文件：

定义一个file属性的input选择框

<input type="file">

定义上传文件按钮

<button>上传文件</buttom>

之后验证用户是否选择了文件

可以用formdata接收文件

formdata.append（‘key’，files[0]）

用xhr上传（必须使用post）formdata即可

计算文件上传进度：

xhr.upload.onprogess = function（e）{

e.lengthComputable — 本次上传的资源是否可计算，返回布尔值

e.loaded — 已传输的字节

e.total — 需要传输的字节

因此：

if（e.lengthComputable）{
	let 完成进度 = math.ceil（（e.loaded/e.total）*100）
}
}

2.数据交换格式

1.XML

xml是可扩展标记语言，和html类似，也是一种标记语言，但二者之间没有任何关系，被设计用来传输和储存数据

xml格式臃肿，和数据无关的代码多，体积大，传输效率低，在js中解析麻烦，基本不使用

2.JSON

本质上是用字符串储存信息，是一种轻量级的文本数据交换格式，比XML更小更快更易解析，在计算机和网络之间存储和传输数据

对象在json中表示为{}括起来的内容，数据结构为key：value的键值对结构、key必须使用英文的双引号包裹的字符串，value可以是数字，双引号包裹的字符串，布尔值，null，数组，对象，不可以是方法

数组在json中表示为[]括起来的内容，数据结构为key,key，key可以是数字，字符串，布尔值，null，数组，对象

注意json中不能写注释，最外层必须是数组和对象，不能使用undefined或者函数

json定义：

let xxx = '{"a":"HELLO"}'

json转换为js对象：

JSON.parse（json）

js对象转化为json：

JSON.stringify(js对象)

3.axiox

一个只专注于网络数据请求的库

1.用axios发起请求：

get请求：

axios.get('url',{params:{键值对参数}}).then（回调函数（形参e.data表示返回的数据））

post请求：

axios.get('url',{键值对参数}).then（回调函数（形参e.data表示返回的数据））

通用请求：

axios{
	method：‘请求类型，无视大小写’
	url：‘url地址’
	params：{get提交的参数}
	data：{post提交的参数}
}.then（回调函数（也有e.data））

4.跨域和JSONP

1.同源策略

当两个页面的协议（http/https/ftp之类），域名，端口（没写默认80）都相同，则两个页面具有相同的源

同源策略是浏览器提供的一个安全功能，浏览器规定，非同源的网站不允许资源交互，例如：

读取cookie，localstorage和indexedDB

接触非同源网页的dom，向非同源网站发送Ajax

2.跨域

跨域就是非同源的状况，浏览器会对跨域请求拦截，浏览器允许发起跨域请求，但是返回的数据会被拦截，无法获取

如果要实现跨域数据请求，主要有两种方式：JSONP和CORS

JSONP出现的早，兼容性好，但是只支持get请求，不支持post请求

CORS是跨域Ajax的根本解决方案，支持get和post请求，缺点是不兼容某些低版本浏览器

3.JSONP

原理：script的scr属性不受同源策略的影响，可以请求非同源的js脚本

<script scr = "跨域url?callback=函数名&key=value&key=value"></script>

<script>返回数据处理函数</script>

JSONP和Ajax是没有关系的，因为没有用到xhr

JQ中也提供了jsonp，直接调用：

$.ajax（{
	url：‘url？key=value&key=value’
	datatype:'jsonp'
	success:回调函数，有形参e是返回的数据
	jsonp：‘参数名称’//可以修改callback 默认是callback
	jsonpCallback：‘回调函数名称’//指定回调函数名，默认是jQueryxxxx
}）

4.防抖和节流

防抖：

事件触发到完成之前，再次被触发则重新计时，一般用于搜索框推荐，

1.定义定时器id

let timer = null

2.定义防抖函数

function fangdou（kw）{
	timer=setTimeout（调用函数，延时时间）	
}

3.重复触发时清空timer

$（‘选择器’）.on（‘事件’，function（）{
	clearTimeout（timer）
	fangdou（）
}）

节流：

事件触发到完成之前，再次触发无效，直至事件执行完成

1.定义节流阀timer

let timer = null

2.判断节流阀是否为空和控制节流阀的值

if（timer）{return} //如果不为空 return出函数，为空继续执行
	timer = settimeout（function（）{
	操作代码
	timer = null
}，执行时间）

5.http协议加强

通信协议就是通信双方采用约定好的格式发送和接收消息，这种格式就叫通信协议

网页内容又叫做超文本，http协议就是超文本传输协议

http协议采用了请求/响应的交互模型

http请求消息组成部分：

1.请求行

由请求方式，url和http协议版本三个部分组成，之间用空格隔开

2.请求头部

user-agent说明当前是什么类型的浏览器

content-type说明发送到服务器的数据格式

accept描述客户端接受什么类型的返回内容

accept-language描述客户端希望接收哪种语言

还有

host请求的服务器域名

connection连接方式（close或者keepalive）

content-length请求体的大小

accept-encoding接收的内容的压缩编码格式

3.空行

请求头的末尾，表示请求头部结束了，请求体开始

4.请求体

通过post方式提交到服务器的数据

http****响应消息组成部分：

1.状态行

由http协议版本，状态码和状态码描述文本组成，之间用空格隔开

2.响应头部

由键值对组成的描述服务器基本信息的字段

3.空行

通知客户端响应头部结束，分隔响应头部和响应体

4.响应体

存放服务器响应给客户端的资源内容

http请求方法：

就是表明要对服务器上的资源执行的操作，最常见的是get和post

put — 向服务器提交资源，并且用新资源替换旧资源（修改）

delete — 请求服务器删除指定资源（删除）

http响应状态码：

标识响应的状态，表示响应成功或失败等，状态码一共分为五种类型：

1** — 信息，表示服务器收到请求，需要请求者继续操作（很少碰到）

2** — 成功，操作成功接受并处理

常见的2开头响应码有：

200 — 请求成功，一般用于get和post请求

201 — 已创建，成功请求并创建了新的资源，通常用语post或put请求

3** — 重定向，需要进一步的操作完成请求

常见的3开头状态码有：

301 — 永久移动，表示请求的资源被永久移动到新url，返回信息会包括新url，浏览器会自动定向新url。今后任何请求都应使用新url

302 — 临时移动，与301类似，表示请求的资源临时被移动，客户端可以使用原有url

304 — 未修改，所请求的资源未修改，不会返回任何资源，客户端会缓存访问过的资源

4** — 客户端错误，请求包含语法错误或者无法完成请求

常见的4开头的状态码有：

400 — 语义有误，服务器无法理解或者请求参数有误

401 — 当前请求需要用户验证

403 — 服务器已经理解请求，但是拒绝执行

404 — 服务器无法根据请求找到资源

408 — 请求超时，服务器等待客户端发送请求时间过长

5** — 服务器错误，服务器在处理请求的过程中发生了错误

常见的5开头的状态码有：

500 — 服务器内部错误，无法完成请求

501 — 服务器不支持该请求方法

503 —由于超载或者系统维护，服务器暂时无法处理客户端请求