Ajax 的实现步骤:
1. 创建ajax对象:
new XMLHttpRequest();
2. 告诉Ajax 对象要向哪里发送请求,以什么方式
open 函数的两个参数,请求方式和请求地址
open( 'get' , 'http://localhost:3000/dizhi' )
3. 发送请求
send()
4. 获取服务器端响应到客户端的数据
因为不可能发送完直接响应,所以需要绑定 onload 事件,响应成功之后会自动触发
xhr.onload = function() {
console.log( xhr.responseText )
}
5. 服务器端向客户端响应:使用get () 创建一个路由
app = express();
app.get( 'dizhi' , (req, res) => {
res.send(' hello ')
})
注意: 在http 请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都是会被转换为对象字符串传输。( typeof 结果 == 是字符串string )
1. JSON.parse() 将 json 字符串转换为 json 对象
请求参数的格式: 参数名称等与参数值,多个参数之间用 and符& 进行拼接
1. post 请求方式的请求参数不是放在地址栏后面,是放在请求体 send() 中,而且需要在请求报文中明确设置请求参数内容的类型 Content-Type:
2. 设置请求报文当中的报文头信息: 设置请求参数的格式类型: xhr.setRequestHeader( ' ContentType ', 'application/x-www-form-urlencoded' ); xhr.send( ' name=zhangsan&age=20 ' )
请求报文:
1. 在 HTTP 请求和响应的过程中传递的数据块就叫做报文, 包括要传送的数据和一些附加的信息,这些数据和信息要遵守规定好的格式
2. 报文头 存储的是一些键值对的信息, 报文体 主要存储的是一些内容(post请求参数)
3. 报文头和报文体,在请求的过程中,整体的被发送到服务器端
4. 在服务器端接受post 请求参数: 借助 body-parser 这个解析器;使用req.body 来获取客户端传递给服务器端的 post 请求参数
5. form data 里面就是 post 请求参数(network -> xhr -> post -> header -> form data)
请求参数的格式:
1. application/x-www-form-urlencoded
2. application/json
3. 传递请求参数的时候 json 又必须转换为 json 字符串:JSON.stringify()
4. request payload 里面放的是客户端向服务器端传递的 json 类型的数据
5. app.use( bodyParser.urlencoded() ) 改为 app.use( bodyParser.json() )
注意: get 请求是不能提交 json 对象的数据格式的, 传统网站的表单提交也是不支持 json 对象数据格式的
Ajax 状态码:
0: 请求未初始化(还没有调用open() )
1: 请求已经建立,但是还没有发送( 还没有调用send() )
2: 请求已经发送
3: 请求正在处理,通常响应中已经有部分数据可以用
4: 响应已经完成,可以通过并使用服务器的响应了
获取Ajax 状态码: xhr.readyState
onreadystatechange 事件:当ajax 状态码发生变化的时候自动触发该事件
结果: 顺序输出 0,1,2,3,4
ajax 错误处理:
FormData 对象的作用:
1. 模拟HTML 表单,相当于将HTML 表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式
2. 异步上传二进制文件(如:图片文件,视频文件,音频)
使用:
1. 准备 HTML 表单:
2. 将HTML 表单 转化为 formData 对象:
let form = document.querySelector('#form')
let formData = new FormData(form)
3. 提交表单对象:xhr.send( formData ) formdata 不能用于get 请求
客户端:
服务器端如何接收:
使用formidable 插件获取 客户端发送过来的 fromdata 对象
app.post( '/formdata', (req,res) =>{
//创建formdata 表单解析对象
const form = new formidable.IncomingForm()
//解析客户端传递过来的fromdata 对象,fieds 表单中普通请求参数,files 文件上传相关信息
form.parse(req, (err, fields, files)=>{
res.send(fields)
})
})
formdata 对象的实例方法:
1. formdata.get('key') 获取表单对象属性的值
2. formdata.set('key', 'value') 设置表单对象中属性的值 ,不管输入的是什么,最后向服务器端发送的都是set 设置的值。如果设置的属性是已经存在的,则会覆盖属性原有的值,如果是不存在的,就会创建这个表单属性以及值
3. formdata.delete('key') 删除表单对象中属性的值
4. formdata.append('key', 'value') 向表单中追加值
注意:set在属性名已经存在的情况下会覆盖,append 会保留两个值
formdata 文件上传:
1. 准备文件选择控件:
代码:
服务器端:
保留文件上传的后缀名: form.keepExtensions = true;
文件上传进度展示:
图片即时预览:
服务器端代码:
客户端:
动态创建标签,而不是直接获取HTML中的标签,是因为不想用户看到图片加载的过程,而是想等图片加载完成之后,再设置src的属性。