HTML5基础之八(AJAX)

AJAX(Asynchronous JavaScript and XML)

作为一种关键技术,用来向服务器异步发送数据,并且接收返回的数据。AJAX的核心对象是XMLHttpRequest,请求过程有一些状态(readyState),取值为:0-4,分别是0——创建XMLHttpRequest,1——调用了open方法,2——接收到响应头,3——loading正在接收响应内容,4——响应完成

创建一个AJAX请求的基本步骤

在send之前,可以监听相关的事件如下:

abort:放弃请求  error:请求失败  load:请求完成  loadend:请求结束(成功或失败)  loadstart:请求开始

readystatechange:请求过程状态变更  timeout:请求超时

progress:请求过程中(具有几个属性lengthComputable:true/false是否可用计算出数据长度 loaded:已经加载的  total:总大小

 

获取响应头/设置请求头

可用的方法:setRequestHeader(<header>, <value>)  getResponseHeader(<header>)  getAllResponseHeaders()

 

跨域请求

之所以有跨域,是因为同源策略(为了安全),服务器端设置”Access-Control-Allow-Origin”头来允许请求,支持CORS的浏览器可以请求。如果不支持,需要使用它跨域方式:JSONP,iframe,postMessage等

 

向服务器发送数据

1.发送FormData

第一种:构建FormData(格式a=1&b=2&c=3),并且设置请求头

xmlhttpRequest.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

然后发送:xmlhttpRequest.send(formData);

第二种:使用FormData对象来构建,可以使用简单的方式如下:

或者使用FormData对象的方法来append来添加

只要是使用了FormData就不需要再设置Content-Type头了,因为Content-Type默认为multipart/form-data

 

2.发送JSON格式字符串

设置头xmlhttpRequest.setRequestHeader(“Content-Type”, “application/json”);

然后发送:xmlhttpRequest.send(jsonData);

 

3.发送文件

包含type=file的form,以FormData的方式发送数据,也可以把文件发送到服务器,可以通过监听事件progress来跟踪进度。

作者:张雪飞
出处:https://zhangxuefei.site/p/1256
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注