了解AJAX

时间:2021-2-20 作者:admin

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) {});
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。