1.1 服务器

上网过程中,负责存放和提供资源的电脑

1.2 客户端

上网过程中,负责获取和消费资源的电脑

1.3 URL地址组成部分

1.3.1 概念

统一资源定位符

作用: 用于标识互联网上每一个资源的唯一存放位置,浏览器只有通过url地址,才能正确定位资源的存放位置,从而成功访问到对应的资源.

1.3.2 组成

1.客户端与服务器之间的通信协议. http:

2.存有该资源的服务器名称

www.

3.资源在服务器上的具体的存放位置

1.3.3 通信过程

1.客户端请求服务器

2.输入网址

3.回车,请求服务器

请求----处理----响应

1.3.4 用浏览器解析通信过程

Nettwork面板

Doc

1.3.5 常见的资源

文字 / img / video / 数据

数据皆灵魂

1.3.6 请求数据

xhr对象

1.3.7 请求方式

get : 请求通常获取服务端资源(向服务器要资源)

如 img

poat : 请求用于向服务器提交资源(往服务器发送资源)

提交信息

1.4 Ajax

异步js和xml

可以实现网页与服务器进行数据交互的方式

应用场景

1.动态检测

2.加载搜索提示列表

3.动态刷新表格

4.增删改查

1.4.1.jq中发起Ajax请求最常用的三个方法

1.$.get()

2.$.post()

3.$.ajax()

1.4.1.1 $.get() 拿数据

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

1.4.1.2 $.post() 提交数据

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

1.4.1.3 $.ajax() 可以获取也可以提交

1.5 接口

被请求的url地址,就叫做接口

每个接口必须有请求方式

1.5.1 请求接口的过程

1.6 接口文档

接口的说明文档,他是我们调用接口的依据

1.6.1 组成部分

案例

图书管理

聊天机器人

1.7 表单(form)

组成 : 表单域 提交按钮(submit : 提交)

1.7.1 标签属性

action:发送数据(url)

target:self,blank

method:

get(简单的) 地址栏

post(复杂的,文件上传)请求

1.7.2 enctype

发送表单数据之前如何对数据进行编码

text不常用

1.7.3 同步提交

缺点

1.页面会发生跳转

2.页面之前的数据会丢失

form采集数据

用Ajax提交数据到服务器

监听表单提交事件

绑定表单

submit

1.7.4 serialize()函数

获取表单的所有数据

2.1 模板引擎

2.1.1 渲染ui

2.1.2 模板引擎

指定模板结构和数据,自动生成html

好处

1.减少字符串的拼接

2.使代码简便

3.便于阅读与维护

art-template模板引擎

步骤

1.导入art-template模板引擎

2.定义数据

3.定义模板

4.调用 template函数

5.渲染html

2.1.3 表准语法

{{}}

{{}} 可以进行变量的输出,对象属性,三元表达式,逻辑或,加减乘数

2.1.4 原文输出

{{@ value}}

输出的结果中有html的标签,则需要使用原文输出语法

2.1.5 条件输出

{{if value}} 输出的内容{{/if}}

{{if value}} 输出的内容 {{else if}} 输出的内容 {{/if}}

2.1.6 循环语法

{{each arr}}

索引号 {{Extra close brace or missing open brace​value}}

{{/each}}

2.1.7 过滤器

{{value | filterName}}

类似于管道操作符

template.defaults.imports.filterName = function(value){return处理结果}

3.1 正则与字符串操作

exec()函数用于检测字符串中的正则表达式的匹配

没有匹配的值返回null

var arr='dfgfdf'

var num=/f/

var age=num.exec(arr)

//['f',index:1]

3.1.1 分组

提取想要的内容

3.1.2 字符串的replace函数

替换

多次提换

循环

4.1 xhr的基本使用

XMLHttpRequest

4.1.1 xhr 发起get请求

1. 创建xhr对象

2. 调用xhr.open()函数

3. 调用send函数

4. 监听xhr.onreadystatechange事件

   ​

带参数的请求

url的拼接的参数,叫做查询字符串

多个之间用&分隔

本质

4.1.2 readyState

5.1 URL编码与解码

使用英文字符去表示非英文的字符

原则: 使用安全的字符去表示不安全的字符

encodeURI() 编码

decodeURI() 解码

6.1 xhr 发起post请求

1.创建xhr对象

2.调用xhr.open()函数

3.设置Content-Type属性(固定写法)

4.调用xhr.send()函数.数据也写在里面

5.监听xhr.onreadystatechange事件

7.1 数据交换格式

服务器与客户端之间传输与交换的格式

XML和JSON

JSON常用

7.1.1 XML:可扩展标记语言

传输和存储数据

缺点

1.无关代码多,体积大,效率低

2.解析麻烦

7.1.2 JSON: js对象,数组的字符串表示法

作用: 轻量级的文本数据的交换格式

小,快,方便

7.1.2.1 对象结构

用{}包起来,必须用双引号包裹

类型只能是:数字,字符串,布尔值,null,数组,对象.

7.1.2.2 数组解构

用[]包起来,必须用双引号包裹

类型只能是:数字,字符串,布尔值,null,数组,对象.

JSON与js对象表示

JSON与js对象转化(反序列化)

js对象与JSON转化(序列化)

7.1.3 定义itheima函数

8.1 xhr新特性

1.可以设置http请求的时限

2.可以使用formData对象管理表单数据

3.可以上传文件

4.可以获得数据传输的进度信息

8.1.1 设置http请求时限

第一种

xhr.timeout=3000

第二种

xhr.timeout=function(event){

alert('请求超时')

}

8.1.2 formData对象管理表单数据

9.1 上传文件

1.定义UI结构

2.验证是否选择了文件

3.向formData中追加文件

4.使用xhr发起上传文件的请求

5.监听onreadystatechange事件

9.1.1 显示文件上传进度

插入库