1、客户端与服务器
服务器：存放和对外提供资源的电脑（eg：饭馆）
客户端：获取和消费资源的电脑（个人电脑），通过浏览器访问服务器上的资源（eg：客人）
2、URL地址
（1）URL：统一资源定位符，标识互联网每个资源的唯一存放位置
（2）组成：通信协议+服务器名称+具体的存放位置
- http://(通信协议)www.baidu.com(服务器名称)/index.html(具体存放位置)
（3）通信过程：请求（客户端请求）——处理（服务器）——响应（服务器响应客户端）
3、网页中常见的资源
文字、image、audio、video等，网页中的数据也是资源
网页的完整组成：html+css+js+数据（灵魂）
4、网页中请求数据
-
网页请求服务器上的数据，需要使用XMLHttpRequest(简称xhr，是浏览器提供的js对象)对象
-
js原生用法：var xhr = new XMLHttpRequest()
5、资源的请求方式：get和post
-
get 通常用于获取服务器资源
-
post 通常用于向服务器提交数据（发送资源）
6、Ajax
（1）Ajax主要实现网页和服务器之间的数据交互
（2）jquery中的Ajax
应用场景：
1、检测用户输入
2、输入关键字，动态加载提示列表
3、数据分页显示
4、数据的增删改查
（3）jquery中发起Ajax请求最常用的三个方法：
-
$.get() 请求数据
-
$.post() 提交数据
-
$.ajax() 既可请求数据也可提交数据
（4）$.get()语法
$.get(url, [data], [callback])
| url | string | 必选 | 要请求的url地址 |
|---|---|---|---|
| data | object | 非必选 | 请求数据时需要传递的参数 |
| callback | function | 非必选 | 数据请求成功时的回调函数 |
（5）$.post()语法
$.post(url, [data], [callback])
| url | string | 必选 | 数据提交的url地址 |
|---|---|---|---|
| data | object | 非必选 | 要提交的数据 |
| callback | function | 非必选 | 数据提交成功时的回调函数 |
（6）$.ajax()语法
$.ajax({
type: '', // 请求的方式，GET或者POST
url: '', // 请求的url网址
data: {}, // 请求的参数
success: function(res) { } // 请求成功的回调函数
})
（7）接口：被请求的URL地址，就叫做数据接口，每个接口必须有请求方式
（8）接口文档：接口名称、接口URL、调用方式、参数格式、响应格式、返回示例（可选）
7、form表单
（1）表单：进行数据采集，并且将用户输入的数据提交到服务端进行处理，使用form标签包裹，submit按钮会将数据提交到action设置的地址，并且进行页面跳转
- 表单 = 表单域 + 表单标签 + 表单按钮
（2）form标签的属性
table.jpeg
（3）表单同步提交
-
同步提交：通过点击提交按钮，通过action属性进行提交
-
同步提交后跳转到action指的页面，用户体验差
-
同步提交后，页面之前的状态和数据会丢失
-
-
解决方案：不让表单提交，表单只负责采集数据，Ajax负责提交数据
（4）监听表单提交事件
// 方式一
$('#btn').submit(function(e) { alert('监听到了表单的提交事件') })
// 方式二
$('#btn').on('submit', function(e) { alert('监听到了表单的提交事件') })
（5）阻止表单默认提交行为
- 调用事件对象的event.preventDefault()函数
8、快速操作表单数据
（1）serialize()函数：快速获取表单数据，一次性获取所有的表单元素，这时表单元素都必须设置name，得到的结果是字符串
（2）reset()函数：DOM元素才有的函数，置空form表单
9、模板引擎：指定模板结构和数据生成页面
数据+模板结构——>模板引擎——>HTML页面
-
好处：
-
减少了字符串的拼接
-
使代码结构更清晰
-
使代码更易于阅读和维护
-
-
art- template模板引擎（初学者易学，语法数据占位符为{{}}）
（1）导入模板引擎（导入后就会在window全局挂在一个template函数：template(模板的id, 要填充的数据)
（2）定义数据
（3）定义模板
模板的html结构必须要定义到script中，script标签有type值（默认为text/javascript，意思是其中内容都将作为js执行），模板引擎的type值为：text/html
<script type="text/html"> </script>（4）调用template()函数，返回值为渲染好的页面结构
（5）渲染html结构
（6）art-template的格式为{{数据}}，如果想要原文输出，使用{{@ 数据}}
（7）实现条件输出:
{{if 条件}} 内容 {{else if 条件}} 内容 {{/if}}（8）实现循环输出
{{each hobby}} <p>索引是{{$index}}，循环项是{{$value}}</p> {{/each}}（9）过滤器（本质：处理函数）：需处理的值——过滤器函数——返回新值
// value的值给到filterName {{value | filterName}} //过滤器基本语法 template.defaults.imports.filterName = function(value) {/*处理的结果*/}</pre>
10、exec()函数
检索字符串中的正则是否匹配，有匹配的值，返回该匹配值，没有匹配的值，返回null
var str = 'hello'
var pattern = /o/
var pattern1 = /x/
console.log(pattern.exec(str)) // ["o", index: 4, input: "hello", groups: undefined]
console.log(pattern1.exec(str)) // null
11、正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容
var str = '<div>我是{{name}}</div>'
// 这里提取的是{{name}}
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
console.log(patternResult)
// ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]
// 可以通过字符串的replace()将{{name}}换成name
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // <div>我是name</div>
12、自己实现简易模板引擎
<div id="user-box"></div>
<!-- 页面模板 -->
<script type="text/html" id="tpl-user">
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
<div>性别：{{gender}}</div>
<div>住址：{{address}}</div>
</script>
<script>
var data = {name: 'zs', age: 24, gender: '男', address: '西安'}
function template(id, data) {
var str = document.getElementById('tpl-user').innerHTML
// \s表示空格，*表示多个空格
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
// 每匹配一个{{}}，执行完后再匹配下一个{{}}
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], data[patternResult[1]])
}
return str
}
var str = template('tpl-user', data)
document.querySelector('#user-box').innerHTML = str
</script>
网友评论