什么是Ajax？
- AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。
- 传输的数据可以是text纯文本，但是更常用的是xml，现在我们最经常使用就是json
ajax的特点
优点
- 可以无需刷新页面与服务器端进行通信
- 允许你根据用户时间来更新部分页面内容
缺点
- 没有浏览历史，不能回退
- 存在跨域问题
- SEO（搜索引擎优化）不太友好
二. jquary中的ajax
$.get()//从服务器获取数据
$.post()//给服务器提交数据
$.ajax()//即可获取也可提交
2.1 $.get()函数语法
$.get(url,[data],[callback])
| 参数名 | 参数类型 | 说明 |
|---|---|---|
| url | string | 要请求的资源地址 |
| data | object | 要求资源期间要携带的参数 |
| callback | function | 请求成功时的回调函数 |
2.2 $.post()函数语法
$.post(url,[data],[callback])
2.3 $.ajax()函数语法
$.ajax({
type: '',//请求的方式，GET或 POST
url: '',//请求的url地址
data: {},//请求要求带的数据
success: function (res) { }//请求成功后的回调函数
})
```
# 三、接口
# 四、form表单与模板引擎
## 4.1 form标签的属性
| 属性 | 值 | 描述 |
| ------- | ---------------------------------------------------------------- | --------------------------------------------------- |
| action | URL | 规定当提交表单时向何处发送表单数据。(当提交表单后，页面会立即跳转到action属性指定的url地址) |
| method | get（默认） post | 规定用于发送表单数据的 HTTP 方法。 |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况） |
| target | _blank _self（默认） _parent _top framename | 规定在何处打开 action URL |
### target属性
- _blank：在新窗口打开
- _self（默认）：在同一窗口中打开
- _parent：在父框架集打开
- _top：在整个窗口中打开
- framename：在指定的框架中打开
### method属性
- get（默认）：地址栏会显示数据
- post：地址栏不会显示数据，适合大量的，复杂的，或是文件上传的数据
### enctype
- application/x-www-form-urlencoded（默认）：表示在发送数据之前编码所有的字符
- multipart/form-data：不对字符编码，在使用包含**文件上传**控件的表单时，必须使用该值
- text/plain：空格转换为“+”，但不对特殊字符编码
## 4.2 表单的同步提交
**使用表单同步提交会有两个缺点：**
1. 页面会发生跳转
1. 页面之前的状态和数据会丢失
**解决方案：表单只负责采集数据，ajax负责将数据提交到服务器**
$('#f1').on('submit', function () { alert('监听到了表单的提交事件') })
## 4.3 阻止表单的默认提交行为
当监听到表单的提交事件以后，可以调用事件对象event.preventDefault()函数，来阻止表单的提交和页面的跳转：
e.preventDefault()
$('#f1').on('submit', function (e) { e.preventDefault() })
## 4.4 快速获取表单中的数据
**`serialize（）函数`**
可以一次性获取到表单中所有的数据
<form action="/login" id="f1">
<input type="text" name="user_name">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script>
$(function () {
$('#f1').on('submit', function (e) {
e.preventDefault();
$(this).serialize()//注意表单一定要有name属性，且不能重名
//调用的结果：user_name=123&password=123
})
})
</script>
## 4.5 模板引擎
模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
**优点：**
- 减少了字符串的拼接操作
- 使代码结构更清晰
- 使代码更易于阅读与维护
<!-- 1.导入模板变量 -->
<script src="template-web.js"></script>
<!-- 在window全局，多一个函数，叫 template('模板的ID','需要渲染的数据对象') -->
<div id="container"></div>
<!-- 3.定义模板 -->
<!-- 模板的html结构，要定义到script中 -->
<script type="text/html" id="tpl-user">
<p>{{name}} {{age}}</p>
</script>
<script>
//2.定义需要渲染的数据
var data = { name: '张三', age: 20 }
//4.调用 template('模板的ID','需要渲染的数据对象')函数
var str = template('tpl-user', data)
// 5.渲染 html 结构
$('#container').html(str)
</script>
{{if 判断条件}} 需输出的内容 {{/if}}
{{if 判断条件1}} 需输出的内容{{else if 判断条件2}} 需输出的内容 {{/if}}
循环：
//当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。
{{each arr}}
{{$index}} {{$value}}//$value是each循环获取的数组arr里的值
{{/each}}
过滤器：
{{value |filterName}}将 value这个值传给后面的 filterName函数，最终输出函数返回的新值
定义过滤器的基本语法：
template.defaults.imports.filterName=function(value){
return;
}
exec()函数用于检索字符串中的正则表达式的匹配
如果字符串中有匹配的值，则返回该匹配值，否则返回null
ajax加强
1. XMLHttpRequest的基本使用
XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。
1.1 使用xhr发起get请求
步骤：
- 创建 xhr 对象
- 调用
xhr.open()函数:指定 请求方式 与 URL地址 - 调用
xhr.send()函数:发起 Ajax 请求 - 监听
xhr.onreadystatechange事件
<script>
// 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 调用 xhr.open() 函数:创建请求 指定 请求方式， URL地址 和 查询字符串
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// 调用 xhr.send() 函数:发起 Ajax 请求
xhr.send()
// 监听 xhr.onreadystatechange 事件
xhr.onreadystatechange = function () {
// 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) {
// 4.2 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}
</script>
1.2 了解xhr对象的readyState属性
用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：
| 值 | 状态 | 描述 |
|---|---|---|
| 0 | UNSENT | XMLHttpRequest 对象已被创建，但尚未调用 open方法。 |
| 1 | OPENED | open() 方法已经被调用。 |
| 2 | HEADERS_RECEIVED | send() 方法已经被调用，响应头也已经被接收。 |
| 3 | LOADING | 数据接收中，此时 response 属性中已经包含部分数据。 |
| 4 | DONE | Ajax 请求完成，这意味着数据传输已经彻底完成或失败。 |
1.3 url编码与解码
- URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。
- 如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。
- URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
- 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%BF%E6%B8%B8%E8%AE%B0
1.4 如何对URL进行编码与解码
浏览器提供了 URL 编码与解码的 API，分别是：
encodeURI()编码的函数
encodeURI('黑马程序员')
// 输出字符串 %E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98
decodeURI()解码的函数
decodeURI('%E9%BB%91%E9%A9%AC')
// 输出字符串 黑马
注： 由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。
1.5 使用xhr发起get请求
步骤：
- 创建 xhr 对象
- 调用 xhr.open() 函数:指定 请求方式 与 URL地址
- 设置Content-Type属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') - 调用 xhr.send() 函数:发起 Ajax 请求，同时指定要发送的数据
- 监听 xhr.onreadystatechange 事件
// 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 调用 xhr.open() 函数
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 设置 Content - Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 调用 xhr.send() 函数，同时指定要发送的数据
xhr.send('bookname=编译原理&author=蒋立源&publisher=西北工业大学出版社')
// 监听 xhr.onreadystatechange 事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 4.2 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}
2. 数据交换格式
- 数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
- 前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，
所以，我们重点要学习的数据交换格式就是 JSON。
2.1 XML简介
- xml：可扩展标记语言。被设计用来传输和储存数据，是数据的载体
- xml中没有预定义标签，都是自定义标签，用来表示一些数据
比如一个学生数据：
<student>
<name>张三</name>
<age>18</age>
<sex>男</sex>
</student>
缺点：
- XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
- 在 Javascript 中解析 XML 比较麻烦
2.2 JSON简介
概念：
- JSON （JavaScript Object Notation），即“JavaScript 对象表示法”
- JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。
作用：
- JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，
- 但是 JSON 比 XML 更小、更快、更易解析。
2.3 JSON的两种结构
JSON 就是用字符串来表示 Javascript 的对象和数组。
所以，JSON 中包含对象和数组两种结构，
通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
对象结构
- 对象结构在 JSON 中表示为 { } 括起来的内容。
- 数据结构为 如下所示 的键值对结构。
{
“key”: “value”,
“key”: “value”，
...
}
- 其中，key 必须是使用英文的双引号包裹的字符串，
- value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
数组结构
- 数组结构在 JSON 中表示为 [ ] 括起来的内容。
- 数据结构为
[ "java", "javascript", 30, true … ]//字符串要用双引号包裹
数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
语法的注意事项：
- 属性名必须使用双引号包裹
- 字符串类型的值必须使用双引号包裹
- JSON 中不允许使用单引号表示字符串
- JSON 中不能写注释
- JSON 的最外层必须是对象或数组格式
- 不能使用 undefined 或函数作为 JSON 的值
JSON 的作用： 在计算机与网络之间存储和传输数据。
JSON 的本质： 用字符串来表示 Javascript 对象数据或数组数据
2.4 JSON和JS对象的关系
2.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"}'
2.6 序列化和反序列化
- 把数据对象 转换为 字符串的过程，叫做序列化，例如：调用
JSON.stringify()函数的操作，叫做 JSON 序列化。 - 把字符串 转换为 数据对象的过程，叫做反序列化，例如：调用
JSON.parse()函数的操作，叫做 JSON 反序列化。
3. 封装自己的Ajax函数
/*定义options参数选项
我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：
method 请求的类型
url 请求的 URL 地址
data 请求携带的数据
success 请求成功之后的回调函数 */
//需要把data对象，转换成查询字符串的格式，因此定义resolveData函数
// @param { data } 需要发送到服务器的数据 即需输入的数据 name:'zs',age=20
// @returns { string } 返回拼接好的查询字符串 name = zs & age=10
function resolveData(data) {
var arr = [];
// 对数组或者对象的属性进行循环操作
//for(变量（即属性名） in 对象名字（即属性值）)
for (let k in data) {
arr.push(k + '=' + data[k]);
}
return arr.join('&');
}
function myajax(options) {
// 创建 xhr 对象
var xhr = new XMLHttpRequest()
var data = resolveData(options.data);
//判断方式为 get 还是 post
if (options.method.toUpperCase() === "GET") {//toUpperCase()是转为大写
xhr.open('GET', options.url + '?' + data);
xhr.send();
}
else if (options.method.toUpperCase() === "POST") {
xhr.open('POST', options.url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
// 监听 xhr.onreadystatechange 事件
xhr.onreadystatechange = function () {
//监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) {
// 服务器响应回来的数据 为 JSON格式的数据
var res = JSON.parse(xhr.responseText);
options.success(res);
}
}
}
使用格式：
<script>
myajax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
success: function (res) { // 成功的回调函数
console.log(res) // 打印数据
}
})
myajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {
bookname: '编译原理',
author: '蒋立源',
publisher: '西北工业大学出版社'
},
success: function (res) { // 成功的回调函数
console.log(res) // 打印数据
}
})
</script>
