AJAX
AJAX是什么?
AJAX全称为Asynchronous JavaScript and XML —- 异步JavaScript和XML, 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
AJAX原理
- 浏览器发生某个事件时,创建XMLHttpRequest对象,发送HttpRequest给服务器
- 服务器处理HttpRequest,创建响应并将数据返回给浏览器
- 浏览器接收到返回的数据,使用JS DOM更新页面
原生JS的实现
var xmlHttp:if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest();} else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlHttp.onReadyStateChange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("myDiv").innerHtml = xmlHttp.responseText; }}xmlHttp.open("GET", "/try/ajax/ajax_info.txt", true);xmlHttp.send();
XMLHttpRequest是什么?
XMLHttpRequest是一个为服务器发送请求和解析服务器响应提供了流畅的接口
属性
onReadyStateChange
一个JavaScript函数对象,当readyState属性改变时会调用它
readyState
表示请求/响应过程的当前活动阶段
- 0:未初始化,尚未调用open
- 1:启动,调用了open,尚未调用send
- 2:发送,调用了send,尚未接收到响应
- 3:接收,已经收到部分数据
- 4:完成,已经收到全部数据
status和statusText
响应的Http状态和状态说明
- 200:成功
- 404:Not Found
responseText
作为响应主体被返回的文本
- readyState < 3:空字符串
- readyState = 3:返回目前已收到的响应部分
- readyState = 4:完整的响应体
responseXML
保存响应数据的XML DOM文档
方法
open
初始化请求
send
发送请求
setRequestHeader
设置请求头,参数为请求体名称和数值
abort
取消当前响应,关闭连接并且结束任何未决的网络活动
getResponseHeader
返回响应头的值
getAllResponseHeaders
返回所有头部信息的字符串
JQuery里的Ajax
$.ajax({ type: "POST", contentType: "application/json", url: "http://127.0.0.1/admin/list", data: JSON.stringfy(list), dataType: "", success: function (result) { }, error: function (e) { }})
Axios
axios({ method: "POST", url: "/user/123", data: { firstName: 'Lionel', lastName: 'Messi' }}).then(function(response) {}).catch(function(error) {});