Ajax
-
Ajax :Asynchronous JavaScript and XML
-
特征:向服务器请求额外的数据无需卸载页面(及时刷新)
-
abort() 中止加载
-
timeout 超时事件
-
getAllResponseHeaders() 获取所有响应头
-
getResponseHeader() 获取指定的响应头
-
readyState 准备状态
-
status 响应消息状态
-
encodeURIComponent 转换为URI编码格式
-
decodeURIComponent 将URI编码格式转为字符,解决乱码问题
xhr.readyState===4 && xhr.status===200 //成功
- URL地址中通过目录方式带入请求的类型 history news等
- PHP 有多个文件,Ajax只有一个主文件。
- async 默认是true,异步。如果设置false,是同步,不需要事件侦听
XMLHTTPReques
-
Ajax技术核心是XMLHttpRequest对象(简称XHR)
-
XHR的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据。
-
XMLHttpRequest Level 1 缺点:不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成。
-
XMLHttpRequest Level 2 可以发送跨域请求,在服务端允许的情况下;支持发送和接收二进制数据;新增formData对象,支持发送表单数据;发送和获取数据时,可以获取进度信息;可以设置请求的超时时间
Ajax过程
1、新建XMLHttpRequest对象
var request=new XMLHttpRequest();
IE 7以下 var request=new ActiveXObject("Microsoft.XMLHTTP");
2、打开要发送的地址通道。
request.open(“GET”,地址,同步/异步);
3、给XMLHttpRequest对象增加侦听器,用来侦听各种情况,包括各种链接状态
request.addEventListener(“load”,侦听函数)发送数据给打开的地址,
4、如果没有要发送的内容直接send()
request.send();
open
open 方法的所有参数
- Method方法: GET POST PUT DELETE
- URL地址:地址加端口号 例如"http://localhost:4006"
- 同步还是异步,同步为false
- user password 访问地址的用户名密码
GET和POST
- 在提供服务器请求的过程中,有两种方式,分别是:GET和POST。在Ajax使用的过程中,GET的使用频率要比POST高
- GET 请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到 URL 的末尾,以便提交给服务器。通过 URL 后的问号给服务器传递键值对数据,服务器接收到返回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理 ,以地址栏方式发送。
- POST 请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的 POST 传输方式。。
- GET方式允许发送自定义消息头,POST不允许。
- GET时带参数,POST不带参数,如果希望每次请求都是最新的就需要加时间戳
- POST以二进制流发送,把一个数据流切换为无数的包,
- 请求消息头在前端请求,服务端获取请求头。
- 服务端响应消息头,客户端获取响应头。
Ajax 封装
function ajax(url,data,method="GET",type="query"){
return new Promise(function(resolve,reject){
if(type.toLowerCase()==="query") data=QueryString.stringify(data);
else if(type.toLowerCase()==="json") data=JSON.stringify(data);
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4 && xhr.status===200){
resolve(xhr.response);
}else if(xhr.readyState===4 && xhr.status!==200){
reject(xhr.status);
}
}
xhr.open(method,url+"?"+(method.toLowerCase()==="get" ? data : ""));
xhr.send((method.toLowerCase()==="get" ? "" : data));
})
}
AJAX跨域
- cros跨域
- jsonp跨域
- websocket解决
- 代理服务:正向代理和反向代理