Ajax学习笔记整理(上)

文章目录

1.客户端与服务器

1.1服务器

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

1.2客户端

上网过程中,负责获取和消费资源的电脑,叫做客户端。

2.URL地址

2.1 URL地址的概念

URL中文名叫统一资源定位符,用于表示互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功的访问到对应的资源

2.2 URL地址的组成部分

URL地址一般由三部分组成:

  1. 客户端与服务器之间的通信协议
  2. 存有该资源的服务器名称
  3. 资源在服务器上的具体存放位置

3.客户端与服务器的通信过程

3.1 图解客户端与服务器的通信过程

在这里插入图片描述

注意:1.客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤

​ 2.网页中的每一个资源,都是通过请求-处理-响应的方式从服务器获取回来的

4.服务器对外提供了哪些资源

4.1数据也是资源

网页中的数据,也是服务器对外提供的一种资源。

4.2网页中如何请求数据

数据,也是服务器对外提供的一种资源。只要是资源,必然要通过 请求-处理-响应的方式进行获取。

如果要在网页中请求服务器上的数据资源,则需用到XMLHttpRequest对象

XMLHttpRequest(简称xhr) 是浏览器提供的js成员,通过它,可以请求服务器上的数据资源。

最简单的用法:var xhrObj=new XMLHttpRequest()

4.3资源的请求方式

客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为getpost请求。

  • 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.接口文档的组成部分

接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含一下六项内容,从而为接口的调用提供依据:

  1. 接口名称:用来标示各个接口的简单说明,如:登录接口获取图书列表接口
  2. 接口URL:接口的调用地址
  3. 调用方式:接口的调用方式,如:GETPOST
  4. 参数格式:接口需要传递的参数,每个参数必须包含参数名称参数类型是否必选参数说明这四项内容
  5. 响应格式:接口的返回值的详细说明,一般包含数据名称数据类型数据说明3项内容
  6. 返回示例(可选):通过对象的形式,例举服务器返回数据的结构

8.form表单的基本使用

8.1什么是表单

表单在网页中主要负责数据采集功能。HTML中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把采集到的信息提交到服务器端进行处理。

8.2表单的组成部分

表单由三个基本部分组成:

  • 表单标签
  • 表单域 :包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等
  • 表单按钮
8.3 form 标签的属性
标签用来采集数据,标签的属性则是用来规定 如何把采集到的数据发送到服务器
属性描述
actionURL地址规定当提交表单时,向何处发送表单数据
methodget或post规定以何种方式把表单数据提交到 action URL
enctypeapplication/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 使用步骤
  1. 导入art-template
  2. 定义数据
  3. 定义模板
  4. 调用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.实现步骤
  1. 定义模板结构
  2. 预调用模板引擎
  3. 封装template函数
  4. 导入并使用自定义的模板引擎
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
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值