Ajax基础
一、Ajax基础
（一） 服务器的基本概念与初识Ajax
1、客户端与服务器
a 服务器：负责存放和对外提供资源的电脑。
b 客户端：负责获取和消费资源的电脑。
2、URL地址的概念
a URL叫统一资源定位符。
b URL组成：
客户端与服务器之间的通信协议。
存有该资源的服务器名称。
资源在服务器上具体的存放位置
c 网页打开过程：请求-处理-响应
d 数据即资源
3、资源的请求方式
a get请求：通常用于获取服务端资源。
b post请求：通常用于向服务端提交资源。
所有的Ajax请求都可以在浏览器的Network的XHR中查看。
4、了解Ajax
a Ajax即异步的JavaScript和XML
5、jQuery中的Ajax
a 浏览器中提供的XMLHttpRequest用法比较复杂，jQuery对XMLHttpRequest进行了封装。
b jQuery中发起Ajax请求的三种方法：
$.get():
$.get(url,[data],[callback])
不带参：
$.get('http://www.baidu.com',function(res){
console.log(res)//res是服务器端返回的数据
})
带参：
$.get("http://www.baidu.com",{id:1},function(res){
console.log(res)
})
$.post():
$.post(url,[data],[callback])
提交数据：
$.post(
'http://www.baidu.com',
{
bookname:'水浒传',
author:'小梦'
},
function(res) {
console.log(res)
}
)
$.ajax():
$.ajax({
type:'', // 请求方式
url:'', //请求路径
data:{}, //请求要带的数据
success:function(res){} //回调函数
})
6、接口
a 基本介绍：使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口），每个接口必须有请求方式。
b 接口测试工具：PostMan:https://www.getpostman.com/downloads
c 接口文档：接口的说明文档。
（二） form表单与模板引擎
1、form表单基本使用
a 表单的目的是用于用户数据的采集
b < form>标签的属性：
c 在涉及文件上传时，必须将enctype的值设为：multipart/form-data;不涉及文件上传，值为：application/x-www-form-urlencoded.
d 表单同步提交：通过submit按钮提交表单，从而使页面跳转到action URL的行为。
e 表单同步提交的缺点：整个页面进行跳转；页面之前的状态和数据会丢失。（解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器）
2、通过Ajax提交表单数据
a 监听表单提交事件：（jQuery的两种方式）
$('#form1').submit(function(e){
alert('监听了表单的提交事件')
})
$('#form2').on('submit', function(e){
alert('监听了表单的提交事件')
})
b 阻止表单默认提交行为：
$('#form1').submit(function(e){
e.preventDefault()
})
$('#form1').on('submit',function(e){
e.preventDefault()
})
c 快速获取表单中的数据：
$(selector).serialize()：一次性获取表单的所有数据。(必须为每一个表单元素添加name属性)
< form id='form1'>
< input type="text" name="username">
< input type="password" name="password">
< button type="submit">提交< /button>
< /form>
$('#form1').serialize()
3、模板引擎的基本概念
a 模板引擎指，它可以根据指定的模板结构和数据，自动生成一个完整的HTML页面
b 模板引擎的优点：减少了字符串的拼接操作；使代码结构更清晰；使代码更易于阅读与维护
4、art-template模板引擎
a 下载：http://aui.github.io/art-template/zh-cn/index.html
b 基本使用：导入art-template---定义数据---定义模板---调用template函数---渲染HTML结构
c 标准语法-输出：
{{value}}
{{obj.key}}
{{obj['key']}}
{{a?b:c}}
{{a||b}}
{{a+b}}
d 标准语法-原文输出：如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出，才能保证HTML标签被正常渲染。
{{@ value}}
e 标准语法-条件输出：
{{if value}}按需输出内容{{/if}}
{{if v1}}按需输出内容 {{else if v2}}按需 输出内容 {{/if}}
f 标准语法-循环输出
{{each arr}}
{{$index}} {{$value}}
{{/each}}
g 标准语法-过滤器（管道操作符，即上一个输出作为下一个）
使用过滤器：{{value | filterName}}
定义过滤器：template.defaults.imports.filterName= function(value){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1、引入template模拟 -->
<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>
</head>
<body>
<!-- 3、定义模板 -->
<script type="text/html" id="tpl">
<h1>输出{{name}}---------{{age}}</h1>
原文输出{{@ test}}
<div>
判断语句输出
{{if flag===0}}
flag的值为0
{{else if flag===1}}
flag的值为1
{{/if}}
</div>
<ul>
数组循环输出
{{each hobby}}
<li>索引是：{{$index}}</li>
<li>循环项是：{{$value}}</li>
{{/each}}
</ul>
<div>
注册时间：{{regTime | dateFormat}}
</div>
</script>
<script type="text/javascript">
//定义过滤器
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth()+1
var d = date.getDate()
return y + '-' + m + '-' + d
}
//2、定义渲染的数据
var data = {name:'zs',age:20,test:'<h3>测试</h3>',flag:1,hobby:['吃饭','睡觉'],regTime:new Date()}
//4、调用template()方法
let strHtml = template('tpl',data)
//5、选软HTML结构
$('body').html(strHtml)
</script>
</body>
</html>
5、模板引擎的实现原理
a 正则与字符串操作：
exec():检索字符串中的正则表达式的匹配;如果字符串中有匹配的值，则返回该匹配的值否则返回Null
RegExpObject.exec(string)
实例：
var str = 'hello'
var pattern = /o/
//输出的结果：["0",index:4,input:"hello",groups:undefined]
console.log(pattern.exec(str))
分组：正则表达式中（）括起来的内容表示一个分组，可以通过分组来提取自己需要的内容。
实例：
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:underfined]
replace()函数：用于在字符串中用一些字符替换另一些字符
实例：
var str = '< div>我是{{name}}</ div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult [0],patternResult [1])//得到：< div>我是name</ div>
多次replace操作：
6、实现简易的模板引擎
（三） Ajax 加强
1、XMLHttpRequest的基本使用
a XMLHttpRequest是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源。可以请求服务器上的数据资源。
2、使用xhr发起GET请求
a 步骤：创建xhr对象--调用xhr.open()函数--调用xhr.send()函数--监听xhr.onreadystatechange事件
var xhr = new XMLHttpRequest()
xhr.open('GET','http://www.baidu.com')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readystate === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
b xhr对象的readyState属性：
3、使用xhr发起带参的GET请求
xhr.open('GET','http://www.baidu.com?id=1')
4、URL编码与解码
a url编码的原则：使用安全的字符替代不安全的字符。
b 编码函数：encodeURL()
c 解码函数：decodeURL()
5、使用xhr发起POST请求
a 步骤：创建xhr对象---调用xhr.open()方法---设置Content-Type属性（）---调用xhr.send()函数，同时指定要发送的数据----监听xhr.onreadystatechange事件
6、数据交换格式
a 前端常见的两种数据交换格式：XML和JSON
b XML可扩展标记语言
c JSON就是JavaScript对象和数组的字符串表示法
d JSON两种结构：对象和数组
对象：对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
e JSON语法注意事项：
属性名必须使用双引号包裹。
字符串类型的值必须使用双引号包裹
JSON中不允许使用单引号表示字符串
JSON中不能写注释
JSON的外层必须是对象或数组格式
不能使用undefined或函数作为JSON值
JSON的作用：在计算机与网络之间存储和传输数据
JSON的本质：用字符串来表示JavaScript对象数据或数组数据
f JSON和JS对象的关系：
JSON是JS对象的字符串表示。
//这是一个对象
var obj = {a: 'Hello', b: 'World'}
//这是一个 JSON 字符串，本质是一个字符串
var json = '{"a": "Hello", "b": "World"}'
7、JSON和JS对象的互换
a JSON转为JS对象：
var obj = JSON.parse('{"a":"hello","b":"world"}')//{a:'hello,b:world'}
b JS对象转为JSON：
var json = JSON.stringify({a:'hello,b:'world})//'{"a":"hello","b":"world"}'
8、序列化和反序列化
a 把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
b 把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。
9、封装自己的Ajax函数
10、XMLHttpRequest Level2新特性
a 设置HTTP请求时限：
xhr.timeout = 3000或
xhr.ontimeout = function(event){
alert('请求超时！')
}
b FormData对象管理表单数据：
// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
e.preventDefault()
// 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function() {}
})
c
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！