文章目录
1.客户端与服务器
1.1服务器
上网过程中,负责存放和对外提供资源的电脑,叫做服务器。
1.2客户端
上网过程中,负责获取和消费资源的电脑,叫做客户端。
2.URL地址
2.1 URL地址的概念
URL中文名叫统一资源定位符,用于表示互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功的访问到对应的资源
2.2 URL地址的组成部分
URL地址一般由三部分组成:
- 客户端与服务器之间的通信协议
- 存有该资源的服务器名称
- 资源在服务器上的具体存放位置
3.客户端与服务器的通信过程
3.1 图解客户端与服务器的通信过程
注意:1.客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤
2.网页中的每一个资源,都是通过请求-处理-响应的方式从服务器获取回来的
4.服务器对外提供了哪些资源
4.1数据也是资源
网页中的数据,也是服务器对外提供的一种资源。
4.2网页中如何请求数据
数据,也是服务器对外提供的一种资源。只要是资源,必然要通过 请求-处理-响应的方式进行获取。
如果要在网页中请求服务器上的数据资源,则需用到XMLHttpRequest对象
XMLHttpRequest(简称xhr) 是浏览器提供的js成员,通过它,可以请求服务器上的数据资源。
最简单的用法:var xhrObj=new XMLHttpRequest()
4.3资源的请求方式
客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为get和post请求。
-
get请求通常用于获取服务端资源(向服务端要资源)
例如:根据URL地址,从服务器获取HTML文件、css文件、js文件、图片文件、数据资源等
-
post请求通常用于向服务器提交数据(往服务器发送资源)
例如:登陆是向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作
5.了解Ajax
5.1什么是Ajax
Ajax(异步Javascript和XML)。通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax
5.2Ajax典型的应用场景
1.用户名检测:注册用户时,通过Ajax的方式,动态监测用户名是否被占用
2.搜索提示:当输入搜索关键字,通过ajax的形式,动态加载搜索提示列表
3.数据的分页显示:当点击页码值的时候,通过Ajax的形式,根据页码值动态刷新表格的数据
4.数据的增删改查:数据的添加、删除、此u该、查询、操作,都需要通过Ajax的形式,来实现数据的交互
6.jQuery中的Ajax
jQuery中发起Ajax请求最常用的三个方法如下:
- $.get()
- $.post()
- $.ajax()
6.1 $.get()函数
1.语法
jQuery中的$.get()函数功能单一,专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。
$.get()的语法如下:
$.get(url, [data], [callback]);
2. $.get()发起不带参数的请求
使用$.get()函数发起不带参数的请求时,直接提供请求的URL地址和请求成功之后的回调函数即可,示例代码如下:
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {
console.log(res);//这里的res是服务器返回的数据
})
3. $.get()发起带参数的请求
使用$.get()函数发起带参数的请求,示例代码如下:
//请求id为1的信息
$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res) {
console.log(res);//这里的res是服务器返回的数据
})
6.2 $.post()函数
1.语法
$.post()的语法如下:
$.post(url, [data], [callback]);
2. $.post()向服务器提交数据
使用$.post()函数向服务器提交数据,示例代码如下:
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'},function(res) {
console.log(res);
})
6.3 $.ajax()函数
1.语法
$.ajax({
type:'',//请求的方式,例如GET或POST
url:'', //请求的url地址
data:{ },//这次请求要携带的数据
success:function(res) { }//请求成功后的回调函数
})
2.使用$.ajax()发起GET请求
使用$.ajax()发起GET请求时,只需将type属性的值设为‘GET’即可:
$.ajax({
type:'GET',//请求的方式
url:'http://www.liulongbin.top:3006/api/getbooks',//请求的url地址
data:{id:1},//这次请求要携带的数据
success:function(res) {//请求成功后的回调函数
console.log(res);
}
})
3.使用$.ajax()发起POST请求
使用$.ajax()发起POST请求时,只需将type属性的值设为‘POST’即可:
$.ajax({
type:'POST',//请求的方式
url:'http://www.liulongbin.top:3006/api/addbook',//请求的url地址
data:{
bookname:'bbh',
author:'施耐庵',
publisher:'上海图书出版社'
},//要提交给服务器的数据
success:function(res) {//请求成功后的回调函数
console.log(res);
}
})
7.接口
7.1接口的概念
使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口),同时,每个接口必须有请求方式
例如:
http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)
http://www.liulongbin.top:3006/api/addbook 添加图书的接口(POST请求)
7.2分析接口的请求过程
1.通过GET方式请求接口的过程
2.通过POST方式请求接口的过程
7.3接口文档
1.什么是接口文档
接口文档,顾名思义就是接口的说明文档,它是我们调用接口的依据。好的接口文档包含了对接口URL,参数以及输出内容的说明,我们参照接口文档就能方便的指导接口的作用,以及接口如何进行调用。
2.接口文档的组成部分
接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含一下六项内容,从而为接口的调用提供依据:
- 接口名称:用来标示各个接口的简单说明,如:登录接口,获取图书列表接口等
- 接口URL:接口的调用地址
- 调用方式:接口的调用方式,如:GET,POST
- 参数格式:接口需要传递的参数,每个参数必须包含参数名称,参数类型,是否必选,参数说明这四项内容
- 响应格式:接口的返回值的详细说明,一般包含数据名称,数据类型,数据说明3项内容
- 返回示例(可选):通过对象的形式,例举服务器返回数据的结构
8.form表单的基本使用
8.1什么是表单
表单在网页中主要负责数据采集功能。HTML中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把采集到的信息提交到服务器端进行处理。
8.2表单的组成部分
表单由三个基本部分组成:
- 表单标签
- 表单域 :包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等
- 表单按钮
8.3 form 标签的属性
标签用来采集数据,标签的属性则是用来规定 如何把采集到的数据发送到服务器。属性 | 值 | 描述 |
---|---|---|
action | URL地址 | 规定当提交表单时,向何处发送表单数据 |
method | get或post | 规定以何种方式把表单数据提交到 action URL |
enctype | application/x-www-form-urlencoded multipart/form-data text/plain | 规定在发送表单数据之前如何对其进行编码 |
target | _blank _self _parent _top framename | 规定在何处打开 action URL |
1.action
action属性用来规定当提交表单时,向何处发送表单数据
action属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接受表单提交过来的数据
当表单未指定action属性的情况下,action默认值时当前页面的URL地址
注意:当提交表单后,页面会立即跳转到action属性指定的URL地址
2.target
target 属性用来规定在何处打开actionURL。
他的可选值有5个,默认情况下,target的值为_self,表示在相同的框架中打开action URL
值 | 描述 |
---|---|
_blank | 在新窗口中打开。 |
_self | 默认。在相同的框架中打开。 |
_parent | 在父框架集中打开。(很少用) |
_top | 在整个窗口中打开。(很少用) |
framename | 在指定的框架中打开。(很少用) |
3.method
method 属性用来规定以何种方式把表单数据提交到action URL
它的可选值有两个,分别是get和post
默认情况下,method的值为get,表示通过URL地址的形式,把表单数据提交到action URL
注意:
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中, 表单的 post 提交方式用的最多,很少用 get。例如登录、注册、添加数据等表单操作,都需要使用 post 方式来提交表单。
4.enctype
enctype 属性用来规定在发送表单数据之前如何对数据进行编码。
它的可选值有三个,默认情况下,enctype 的值为 application/x-www-form-urlencoded,表示在发送前编码所有的字符。
值 | 描述 |
---|---|
application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
multipart/form-data | 不对字符编码。 在使用包含文件上传控件的表单时,必须使用该值。 |
text/plain | 空格转换为 “+” 加号,但不对特殊字符编码。(很少用) |
注意:
在涉及到文件上传的操作时,必须将 enctype 的值设置为 multipart/form-data
如果表单的提交不涉及到文件上传操作,则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可!
8.4表单的同步提交及缺点
1.什么是表单的同步提交
通过点击submit按钮,触发表单提交操作,从而使页面跳转到action URL 的行为,叫做表单的同步提交
2.表单同步提交的缺点
- 1.表单同步提交后,整个页面会发生跳转,跳转到action URL所指向的地址,用户体验很差
- 2.表单同步提交后,页面之前的状态和数据会丢失
3.解决表单同步提交的缺点
解决方案:表单只负责采集数据,Ajax负责将数据提交到服务器
9.通过Ajax提交表单数据
9.1监听表单提交事件
在 jQuery 中,可以使用如下两种方式,监听到表单的提交事件:
$('#form1').submit(function(e) {
alert('监听到了表单的提交事件')
})
$('#form1').on('submit', function(e) {
alert('监听到了表单的提交事件')
})
9.2阻止表单的默认提交行为
当监听到表单的提交事件以后,可以调用事件对象的event.preventDefault()函数,来阻止表单的提交和页面的跳转,示例代码如下:
$('#form1').submit(function(e) {
// 阻止表单的提交和页面的跳转
e.preventDefault()
})
$('#form1').on('submit', function(e) {
// 阻止表单的提交和页面的跳转
e.preventDefault()
})
9.3快速获取表单中的数据
1.serialize()函数
为了简化表单中的数据的获取操作,jQuery提供了serialize()函数,其语法格式如下:
$(selector).serialize()
serialize() 函数的好处:可以一次性获取到表单中的所有的数据
2.serialize()函数示例
<form id="form1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
$('#form1').serialize()
// 调用的结果:
// username=用户名的值&password=密码的值
注意:在使用 serialize() 函数快速获取表单数据时,必须为每个表单元素添加name 属性!
10.模板引擎的基本概念
10.1渲染UI结构时遇到的问题
var rows=[];
$.each(res.data,function(i,item) {
rows.push('<li class="list-group-item">'+item.content
+'<span class="badge cmt-date">评论时间:'
+item.time+'</span><span class="badge cmt-person">评论人:'
+item.username+'</span></li>')
})
$('#cmt-list').empty().append(rows.join(''))//渲染列表的UI结构
上述代码是通过字符串拼接的形式,来渲染UI结构的
如果UI结构比较复杂,则拼接字符串的时候需要格外注意引号之间的嵌套,且一旦需求发生变化,修改起来也非常麻烦
10.2什么是模板引擎
模板引擎,顾名思义,它可以根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面
10.3模板引擎的好处
- 减少了字符串的拼接操作
- 使代码结构清晰
- 使代码更易于阅读与维护
11.art-template模板引擎
11.1 使用步骤
- 导入art-template
- 定义数据
- 定义模板
- 调用template函数
11.2 art-template标准语法
1.什么是标准语法
art-template提供了{{ }}这种语法格式,在{{ }}中可以进行变量输出,或循环数组等操作,这种{{ }}语法在art-template中被称为标准语法
2.标准语法-输出
{{value}}
{{obj.key}}
{{obj[‘key’]}}
{{a?b:c}}
{{a||b}}
{{a+b}}
在{{ }}语法中,可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出
3.标准语法-原文输出
{{@ value}}
如果要输出的value值中,包含了HTML标签结构,则需要使用原文输出,才能保证HTML标签被正常渲染。
4.标准语法-条件输出
如果要实现条件输出,则可以在{{ }}中使用 if … else if … /if的方式,进行按需输出
{{if value}} 按需输出的内容 {{/if}}
{{if v1}}按需输出的内容{{else if v2}} 按需输出的内容{{/if}}
5.标准语法-循环输出
如果要实现循环输出时,则可以在{{ }}内,通过each语句循环数组,当前循环的索引使用 $ index 进行访问,当前的循环项使用 $ value 进行访问
{{each}}
{{$index}} {{$value}}
{{/each}}
6.标准语法-过滤器
过滤器的本质,就是一个function处理函数
{{value | filterName}}
过滤器语法类似于管道操作符,它的上一个输出作为下一个输入
定义过滤器的基本语法:
template.defaults.imports.filterName = function(value) { /* return处理的结果 */ }
例如:
12.模板引擎的实现原理
12.1正则与字符串操作
1.基本语法
exec()函数用于检索字符串中的正则表达式的匹配,如果字符串中有匹配的值,则返回该匹配值,否则返回null
RegExpObject.exec(string)
示例代码如下:
var str = 'hello'
var pattern = /o/
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str))
2.分组
正则表达式中()包起来的内容表示一个分组,可以通过分组来提取自己想要的内容,示例代码如下:
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
console.log(patternResult)
// 得到 name 相关的分组信息
// ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]
3.字符串的replace函数
replace()函数用于在字符串中用一些字符替换另一些字符,语法格式如下:
var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'
4.多次replace
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年{{ age }}岁了</div>
patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年age岁了</div>
patternResult = pattern.exec(str)
console.log(patternResult) // 输出 null
5.使用while循环replace
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while(patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], patternResult[1])
}
console.log(str) // 输出 <div>name今年age岁了</div>
6.replace替换为真值
var data = { name: '张三', age: 20 }
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while ((patternResult = pattern.exec(str))) {
str = str.replace(patternResult[0], data[patternResult[1]])
}
console.log(str)
12.2实现简易的模板引擎
1.实现步骤
- 定义模板结构
- 预调用模板引擎
- 封装template函数
- 导入并使用自定义的模板引擎
2.定义模板结构
<!-- 定义模板结构 -->
<script type="text/html" id="tpl-user">
<div>姓名:{{name}}</div>
<div>年龄:{{ age }}</div>
<div>性别:{{ gender}}</div>
<div>住址:{{address }}</div>
</script>
3.预调用模板引擎
<script>
// 定义数据
var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
// 调用模板函数
var htmlStr = template('tpl-user', data)
// 渲染HTML结构
document.getElementById('user-box').innerHTML = htmlStr
</script>
4.封装template函数
function template(id, data) {
var str = document.getElementById(id).innerHTML
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var pattResult = null
while ((pattResult = pattern.exec(str))) {
str = str.replace(pattResult[0], data[pattResult[1]])
}
return str
}