文章目录
传统网站中存在的问题
- 网速慢的情况下，页面加载事件长，用户只能等待
- 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间
Ajax的应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
主要用在不刷新页面的情况下向服务器端发送请求和服务器端进行交互从而更改客户端页面中的数据和状态，主要目的提供浏览网站的用户体验
Ajax的运行环境
需要运行在网站环境中才能生效（使用node创建的服务器作为网站服务器）
Ajax运行原理
Ajax的实现步骤
- 创建ajax对象
var xhr = new XMLHttpRequest(); - 告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.baidu.com') - 发送请求
xhr.send() - 获取服务器端给与客户端响应的数据
xhr.onload = function(){ console.log(xhr.responseText); }
[注]学习的黑马教程，具体实现代码在自己的github：链接
服务器端响应数据的格式
服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到数据时，要将json数据和html字符串进行拼接，然后将拼接结果显示在页面
在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换成对象字符串进行传输
将json字符串转换成json对象：JSON.parse()
请求参数传递
传统网站的表单提交
ajax的请求参数传递
GET请求参数
POST请求参数
请求报文
请求参数的格式
告诉服务器当前请求参数的格式是json。JSON.stringfy()将json对象转换为json字符串
get请求不能提交json对象数据格式，传统网站的表单提交也不支持json
获取服务器端的响应
Ajax状态码
获取Ajax状态码：xhr.readyState
onreadystatechange事件
当Ajax状态码发生变化时将自动触发
两种方式的比较
Ajax错误处理
- 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果
可以判断服务器端返回的状态码，分别进行处理[xhr.status] - 网络畅通，服务器没有接收到请求，返回404状态码
检查请求地址是否错误 - 网络畅通，服务器端能接收到请求，服务器端返回500状态码
服务器端错误，找后端程序员进行沟通 - 网络中断，请求无法发送到服务器端
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理
浏览器缓存问题
解决：在请求地址的后面加请求参数，保证每一次请求中的参数值不相同
同步异步请求
Ajax函数封装
模板引擎
使用模板引擎的模板语法，可以将数据和html拼接起来
** 使用步骤 **
- 下载 art-template 模板引擎文件并在HTML页面中引入库文件。下载地址
- 准备art-template模板
- 告诉模板引擎哪一个模板和哪个数据进行拼接
- 将拼接好的html字符串添加到页面中
- 通过模板语法告诉模板引擎，数据和字符串如何拼接
FormData对象
作用
- 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
- 异步上传二进制文件
使用
实例方法
- 获取表单对象中属性的值：
formData.get('key') - 设置表单对象中属性的值：
formData.set('key','value') - 删除表单对象中属性的值：
formData.delete('key') - 向表单对象中追加属性值：
formData.append('key','value')
set方法与append方法的区别：在属性名已存在的情况下，set会覆盖已有键名的值，append会保留两个值