Ajax学习（二）（4th）

昨天学到过滤器，今天学习剩余ajax知识

模板引擎的实现

正则与字符串操作
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'

示例代码如下:

var str = '<div> 我是{ {name}}</div>'

var pattern = /{{([a-zA-z]+)}}/

var patternResult = pattern.exec (str)            //（分组之后结果）

str = str. replace (patternResult [0], patternResult[1]) // replace 函数返回值为替换后的新字符串

//输出的内容是: <div> 我是name</div>

console. log (str)

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>

实现简易的模板引擎
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('tplUser', data)

//渲染HTMI结构

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;

}
XMLHttpRequest（重点）

XMLHttpRequest (简称xhr)是浏览器提供的Javascript 对象，通过它，可以请求服务器上的数据资源。jQuery中的Ajax函数,就是基于xhr对象封装出来的。

使用xhr发起GET请求
1.步骤:

①创建xhr对象

②调用xhr.open()函数

③调用xhr.send()函数

④监听xhr.onreadystatechange事件

2.使用xhr发起GET请求

//1.创建XHR对象

var xhr=new XMLHttpRequest ();

// 2.调用open函数，指定请求方式与URL地址

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

// 3.调用send函数，发起Ajax请求

xhr.send()

// 4.监听onreadystatechange事件

xhr.onreadystatechange = function() {

// 4.1监听xhr对象的请求状态readystate ;与服务器响应的状态status

if (xhr. readyState === 4 && xhr.status === 200) {

// 4.2打印服务器响应回来的数据

console. log (xhr.responseText)

}

}

了解xhr对象的readyState属性
XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个:

 

使用xhr发起带参数的GET请求
使用xhr对象发起带参数的GET请求时，只需在调用xhr.open期间，为URL地址指定参数即可:

xhr. open('GET', 'http:/ /www. liulongbin. top: 3006/ api/getbooks?id=1')

这种在URL地址后面拼接的参数，叫做查询字符串。

查询字符串
1.定义:

查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。

2.格式:

将英文的 ? 放在URL的末尾，然后再加上 参数 = 值 ，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中。

//不带参数的URL地址

http://www.liulongbin.top:3006/api/getbooks

//带一个参数的URL地址

http://www.liulongbin.top:3006/api/getbooks?id=1

//带两个参数的URL地址

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

3.GET请求携带参数的本质

无论使用 $.ajax() ,还是使用 $.get() ,又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的。

$.get('url', {name: 'zs', age: 20}， function() {})

//等价于

$.get ('url?name=zs&age= 20', function() {})

$.ajax({ method: 'GET', url: 'url', data: {name: 'zs', age: 20},success: function() {} } )

//等价于

$.ajax({ method: 'GET', url: 'url?name= zs&age= :20', success: function() {} })

 URL编码与解码
1.什么是URL编码

URL地址中,只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符。

如果URL中需要包含中文这样的字符，则必须对中文字符进行编码(转义)。

2.URL编码的原则:

使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。

3.URL编码原则的通俗理解:

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

例如：

http:/ /www. liulongbin. top: 3006/api/ getbooks?id=1 &bookname=西游记

//经过URL编码之后，URL地址变成了如下格式:

http:/ /www. liulongbin. top: 3006/ api/getbooks?id=1 &bookname=%E8%A5

4.如何对URL进行编码与解码

浏览器提供了URL编码与解码的API,分别是:

●encodeURI()编码的函数

●decodeURI()解码的函数

encodeURI('黑马程序员')

//输出字符串: %E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98

decodeURI ( ' %E9%BB%91%E9%A9%AC')

//输出字符串: 黑马

5. URL编码的注意事项

由于浏览器会自动对URL地址进行编码操作，因此，大多数情况下，程序员不需要关心URL地址的编码与解码操作。

使用xhr发起POST请求
步骤:

①创建xhr对象

②调用xhr.open()函数

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

④调用xhr.send0函数，同时指定要发送的数据

⑤监听xhr.onreadystatechange事件

    <script>
        // 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest()
        // 2. 调用 open 函数
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
        // 3. 设置 Content-Type 属性
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 4. 调用 send 函数
        xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
        // 5. 监听事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }
    </script>

数据交换格式
什么是数据交换格式？
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。

前端领域，经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少，所以，重点要学习的数据交换格式就是JSON。

1.什么是XML

XML的英文全称是EXtensible Markup Language，即可扩展标记语言。因此，XML和HTML类似，也是一种标记语言

 

2. XML和HTML的区别

XML和HTML虽然都是标记语言，但是，它们两者之间没有任何的关系。

●HTML被设计用来描述网页上的内容，是网页内容的载体

●XML被设计用来传输和存储数据，是数据的载体

3. XML的缺点

①XML格式臃肿，和数据无关的代码多，体积大，传输效率低

②在Javascript中解析XML麻烦

JSON
1.什么是JSON

概念:

JSON的英文全称是JavaScript Object Notation,即“JavaScript 对象表示法”。简单来讲，JSON就是Javascript对象和数组的字符串表示法，它使用文本表示一个JS对象或数组的信息，

因此，JSON的本质是字符串。

作用:

JSON是一种轻量级的文本数据交换格式，在作用.上类似于XML,专用于存储和传输数据，但是JSON比XML更小、更快、更易解析。

现状:

JSON是在2001年开始被推广和使用的数据格式，到现今为止，JSON已经成为了主流的数据交换格式。

2. JSON的两种结构

JSON就是用字符串来示Javascript的对象和数组。所以，JSON中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。

对象结构:

对象结构在JSON中表示为{ }括起来的内容。

数据结构为{ key: value, key: value, .. }的键值对结构。

其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、 数组、对象6种类型。

数组结构:

数组结构在JSON中表示为[  ]括起来的内容。

数据结构为[ "java", "javascript", 30, true ..]。

数组中数据的类型可以是数字、字符串、布尔值、null、 数组、对象6种类型。

3. JSON语法注意事项

①属性名必须使用双引号包裹

②字符串类型的值必须使用双引号包裹

③JSON中不允许使用单引号表示字符串

④JSON 中不能写注释

⑤JSON的最外层必须是对象或数组格式

⑥不能使用undefined或函数作为JSON的值

JSON的作用:.

在计算机与网络之间存储和传输数据。

JSON的本质:

用字符串来表示Javascript对象数据或数组数据

4. JSON和JS对象的关系

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。

例如:

//这是一个对象

var obj = {a: 'Hello', b: 'World'};

//这是一个JSON字符串，本质是一个字符串

var json = '{"a": "Hello", "b": "World"}';

5. JSON和JS对象的互转

要实现从JSON字符串转换为JS对象，使用JSON.parse()方法:

var obj = JSON.parse(' {"a": "Hello", "b": "World"} ');

//结果是{a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法:

var json = JSON.stringify({a:'Hello', b: 'World' });

//结果是' {"a": "Hello", "b":"World"} '

6.序列化和反序列化

把数据对象转换为字符串的过程，叫做序列化。

例如:调用JSON.stringify()函数的操作，叫做JSON序列化。

把字符串转换为数据对象的过程，叫做反序列化。

例如:调用JSON.parse()函数的操作，叫做JSON反序列化。

实现$.ajax
1.参数

qaq(函数是我们自定义的Ajax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性:

●method   请求的类型

●url             请求的URL地址

●data          请求携带的数据

●success     请求成功之后的回调函数

2.处理data参数

需要把data对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义resolveData函数如下:

/**

处理data参数

@param {data} 需要发送到服务器的数据

@returns {string} 返回拼接好的查询字符串name=zs&age=10

**/

function resolveData (data) {

var arr = [];

for (let k in data) {

arr.push(k + '=' + data[k]);

}

return arr.join('&');

}

3.定义qaq函数

在qaq()函数中，需要创建xhr对象，并监听onreadystatechange事件:

function itheima (options) {

let xhr = new XMLHttpRequest ();

//拼接查询字符串

let qs = resolveData (options.data)

//监听请求状态改变的事件

xhr.onreadystatechange = function (){

if(xhr.readyState === 4 && xhr.status = = = 200) {

let result = JSON.parse (xhr.responseText );

options.success (result)

}

}

}

4.判断请求的类型

不同的请求类型，对应xhr对象的不同操作，因此需要对请求类型进行if .... else ...的判断:

if(options.method.toUpperCase() === ' GET') {

//发起GET请求

xhr.open (options . method, options.url +’?' + qs)

xhr.send()

} else if (options.method.toUpperCase() === 'POST') {

//发起POST请求

xhr.open(options.method,options.url)

xhr.setRequestHeader('Content-Type','application/X-www-form-urlencoded')

xhr.send(qs)

}

XMLHttpRequest Level2新特性
 1.XMLHttpRequest Level2的新功能
①可以设置HTTP请求的时限

②可以使用FormData对象管理表单数据

③可以上传文件

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

2.设置HTTP请求时限
有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。

新版本的XMLHttpRequest对象，增加了timeout属性,可以设置HTTP请求的时限:

xhr. timeout = 3000

上面的语句，将最长等待时间设为3000毫秒（3s）。过了这个时限，就自动停止HTTP请求。

与之配套的还有一个timeout事件，用来指定回调函数:

xhr.ontimeout = function (event) {

alert('请求超时! ')

}

3.FormData对象管理表单数据
Ajax操作往往用来提交表单数据。为了方便表单处理，HTML5新增了一个FormData对象,可以模拟表单操作:

// 1.新建FormData对象

var fd = new FormData ();

// 2.为FormData 添加表单项

fd.append('uname', 'zs')

fd.append('upwd', '123456' )

//3.创建XHR对象

var xhr = new XMLHttpRequest ();

// 4.指定请求类型与URL地址

xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')

// 5.直接提交FormData 对象，这与提交网页表单的效果，完全一样

xhr.send (fd)

4.FormData对象管理表单数据
FormData对象也可以用来获取网页表单的值，示例代码如下:

     
        // 监听表单的提交行为
        form.addEventListener('submit', function (e) {
            // 阻止表单的默认提交行为
            e.preventDefault();

            // 创建 FormData ，快速获取到 form 表单中的数据
            let fd = new FormData(form);
            // 发送ajax请求
            let xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let aa = JSON.parse(xhr.responseText);
                    console.log(aa);
                    form1.appendChild(qq).innerHTML = aa.message;
                }
            }
        })

5.上传文件
新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。

实现步骤:

①定义UI结构

②验证是否选择了文件

③向FormData中追加文件

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

⑤监听onreadyStatechange事件

1.定义UI结构

<!-- 1.文件选择框-->

<input type="file" id="file1" />

<!-- 2.上传按钮-->

<button id="btnUpload"> 上传文件</button>

<br/>

<!-- 3.显示上传到服务器上的图片-->

<img src="" alt=" id="img" width="400" />

2.验证是否选择了文件

// 1.获取上传文件的按钮

var btnUpload = document.querySelector ('#btnUpload' );

// 2.为按钮添加click事件监听

btnUpload.addEventListener('click', function() {

// 3.获取到选择的文件列表

let files = document.querySelector('#file1').files;

if(files.length <= 0) {

return alert('请选择要上传的文件! ')

}

})

3.向FormData中追加文件

// 1.创建FormData对象

let fd = new FormData ();

// 2.向FormData 中追加文件

fd.append( 'avatar',files[0])

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

//1.创建xhr对象

let xhr = new XMLHttpRequest ();

// 2.调用open函数，指定请求类型与URI地址。其中，请求类型必须为POST

xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')

// 3.发起请求

xhr.send (fd)

5.监听onreadystatechange事件

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

let data = JSON.parse (xhr.responseText)

if (data.status === 200) { //上传文件成功

//将服务器返回的图片地址，设置为<img> 标签的src属性

document.querySelector('#img').src='http://www.liulongbin.top:3006'+data.url

} else { //上传文件失败

console. log (data .message)

}

}

}

6.显示文件上传进度
新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度。

语法格式如下:

//创建XHR对象

var xhr= new XMLHttpRequest ()

//监听xhr.upload 的onprogress事件

xhr.upload.onprogress = function(e) {

// e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度

if (e.lengthComputable) {

// e.loaded 已传输的字节

// e.total 需传输的总字节

var percentComplete = Math.ceil((e.loaded / e. total)*100)

}}

 jQuery文件上传用法
1.定义UI结构

<!--导入jQuery -->

<script src="./ lib/jquery.js"></script>

<!--文件选择框---->

<input type="file" id="file1" />

<!-- 上传文件按钮-->

<button id="btnUpload"> 上传</button>

2.验证是否选择了文件

$('#btnUpload').on('click', function() {

// 1.将jQuery对象转化为DOM对象，并获取选中的文件列表

let files = $('#file1')[0].files;

// 2.判断是否选择了文件

if (files.length <= 0) {

return alert( '请选择图片后再上传!’)

})

3.向FormData中追加文件

//向FormData 中追加文件

var fd = new FormData ()

fd.append( ' avatar' ,files[0])

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

$.ajax({

method:'POST' ,

url: 'http://www.liulongbin.top:3006/api/upload/ avatar',

data: fd,

//不修改Content-Type 属性，使用FormData 默认的Content-Type 值

contentType: false,

//不对FormData 中的数据进行url编码，而是将FormData数据原样发送到服务器

processData: false,

success: function (res) {

console. log (res)

}

})

axios
1含义
Axios专注于网络数据请求的库。

相比于原生的XMLHttpRequest对象，axios 简单易用。

相比于jQuery, axios 更加轻量化，只专注于网络数据请求。

2 axios发起GET请求
语法:

axios.get('url', {params:{/*参数*/}}).then (callback)

具体的请求示例如下:

// 请求的URL地址

var url = 'http://www. liulongbin. top: 3006/api/get '

// 请求的参数对象

var paramsObj = { name: 'zs',age: 20 }

// 调用axios.get() 发起GET请求

axios.get(ur1, { params: paramsObj }).then (function(res) {

// res.data 是服务器返回的数据

var result = res.data

console. log (res)

})

3 axios发起POST请求
语法:

axios.post('url', {params:{/*参数*/}}).then (callback)

4.直接使用axios发起请求
axios也提供了类似于jQuery中$.ajax()的函数，语法如下:

axios ({

method: '请求类型’,

url: '请求的URL地址',

data: { /*POST数据*/},

params:{ /*GET参数*/}

}).then(callback)