了解AJAX

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) {});