多次 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)实现简易的模版引擎
function template(id, data){
var str=document.getElementById(id).innerHTML
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
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义简易的模版引擎结构</title>
<script src="./template.js"></script>
</head>
<body>
<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:18,gender:'男',address:'北京'}
//调用模版引擎
var htmlStr=template('tpl-user',data)
//渲染html结构
document.getElementById('user-box').innerHTML = htmlStr
</script>
</body>
</html>Ajax 加强
使用 XMLHttpRequest 发起 Ajax 请求
XMLHttpRequest 的基本使用
简称 xhr,JQuery 中的 Ajax 函数就是基于 xhr 封装的.
使用 xhr 发起 get 请求
步骤:
🐸创建 xhr 对象
🐼调用 xhr.open()函数
🐨调用 xhr.send()函数
🐲监听 xhr.onredaystatechange 事件
xhr 对象的 readyState 属性
xhr 对象的 readyState 属性,用来表示当前 Ajax 请求所处的状态,每个 Ajax 请求必然处于一下的状态中的一个:
值 | 状态 | 描述 |
0 | UNSENT | xhr 对象已被创建,但尚未调用 open 方法 |
1 | OPENED | open()方法已经被调用 |
2 | HEADERS_RECEIVED | send()方法已经被调用,响应头也已经被接收 |
3 | LOADING | 数据接收中,此时 response 属性中已经包含部分数据 |
4 | DONE | Ajax 请求完成,这意味着数据传输已经彻底完成或失败 |
使用 xhr 发起带参数的 get 请求
使用 xhr 对象发起带参数的 GET 请求时只需要在调用 xhr.open 期间，为 URL 地址指定指定参数即可：
xhr.open('GET','链接?id=1')//参数为id在 URL 地址后面拼接参数，叫做查询字符串
<script>
// 1. 创建 xhr 的对象
var xhr = new XMLHttpRequest();
// 2. 调用 open 函数
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1&name=zs')
// 3. 调用 send 函数
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
// 判断条件固定
if (xhr.readyState === 4 && xhr.status === 200){
//获取服务器响应的数据
console.log(xhr.responseText)
}
}
</script>查询字符串
- ** 什么是查询字符串？**
- **get 携带参数的本质 **
URL 编码与解码
- 什么是 URL 编码
URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。
如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。
URL 编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
URL 编码原则：使用英文字符去表示非英文字符
- 如何对 URL 进行编码与解码
注意事项
使用 xhr 发起 POST 请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用xhr发起POST请求</title>
</head>
<body>
<script>
// 1. 创建 xhr 的对象
var xhr = new XMLHttpRequest();
// 2. 调用 open 函数
xhr.open('POST', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 设置Content-Type 属性(固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 4. 调用 send 函数
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
// 判断条件固定
if (xhr.readyState === 4 && xhr.status === 200){
//获取服务器响应的数据
console.log(xhr.responseText)
}
}
</script>
</body>
</html>数据交换格式
什么是数据交换格式
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
重点学习 JSON
XML
- 什么是 XML
XML 的英文全称为 EXtensible Markup Language ，即可扩展标记语言。
<!DOCTYPE html>
<html lang="en">
<head>
<title>使用xhr发起POST请求</title>
</head>
<body></body>
</html><note> 消息
<to>ls</to> 发给ls
<from>zs</from> zs发送
<heading>通知</heading> 标题
<body>晚上开会</body> 内容
</note>- XML 和 HTML 的区别
缺点:
JSON
- 什么是 JSON
概念：JSON的英文全称是 JavaScript Object Notation，即"JavaScript 对象表示法"。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个JS 对象或数组的信息，因此，JSON 的本质是字符串。
作用：JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是 JSON 比XML 更小、更快、更易解析。
- JSON 的两种结构
JSON 就是用字符串来表示 JavaScript 的对象和数组。所以 JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套可以表示各种复杂的数据结构。
对象结构:
对象结构在 JSON 中表示为{}括起来的内容，数据结构为{key:value,key:value…}的键值对结构，其中，key 必须是使用英文的双引号包裹起来的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象 6 种类型。
数组结构：
数组结构在JSON 中表示为[]括起来的内容。数据结构为[ “java”, “javascript”, 30, true …].数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型
- JSON 语法注意事项
- 属性名必须使用双引号包裹
- 字符串类型的值必须使用双引号包裹
- JSON 中不允许使用单引号表示字符串
- JSON 中不能写注释
- JSON 的最外层必须是对象或数组格式
- 不能使用 undefined 或函数作为 JSON 的值
**JSON 的作用：**在计算机与网络之间存储和传输数据
**JSON 的本质：**用字符串来表示 JavaScript 对象数据或数组数据
- JSON 和 JS 对象的关系
- JSON 和 JS 对象的互相转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// JSON 字符串转换为 JS 对象
var jsonStr='{"name":"zs","age":12,"gender":"man"}'
var obj= JSON.parse(jsonStr)
console.log(obj)
//JS 对象转换为 JSON 字符串
var obj2={name:"zs",age:18,gender:'man'}
var json=JSON.stringify(obj2)
console.log(json)
</script>
</body>
</html>
