前言

ajax相当于异步 JavaScriptXMLajax并不是一种全新的技术,而是由JavaScript、XML、CSS等几种现有技术整合而成。
ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

执行流程

用户界面触发事件调用 JavaScript,通过 ajax引擎——XMLHttpRequest对象异步发送请求到服务器,服务器返回 XMLJSON或者 HTML等格式的数据,然后利用返回的数据使用 DOMCSS技术局部更新用户界面
ajax工作流程
通过上图可以发现,ajax的关键元素包括以下部分

  1. JavaScript语言:ajax技术的主要开发语言
  2. XML/JSON/HTML等:用来封装请求或响应的数据格式
  3. DOM(文档对象模型):通过 DOM属性或方法修改页面元素,实现页面局部刷新
  4. CSS:改变样式,美化页面效果
  5. ajax引擎:即 XMLHttpRequest对象,以同步方式在客户端与服务端之间传递数据

XMLHttpRequest

XMLHttpRequest对象可以在刷新当前页面的情况下向服务端发送异步请求,并接收服务端响应的结果,从而实现局部刷新当前页面的功能。尽管名为 XMLHttpRequest,但他并不限于和 XML文档一起使用,他还可以接收 JSON或者 HTML等格式的文档数据


创建XMLHttpRequest对象

语法:
老版本IE(IE5和IE6)

  let request = new ActiveXObject("Microsoft.XMLHTTP");

现代版

  let request = new XMLHttpRequest();

XMLHttpRequest对象常用属性和方法

方法名称说明
open(method,url,async)1.建立与服务器的链接
2.参数 method:设置HTTP请求方式,如 POSTGET等,对大小写不敏感
3.参数 url:请求 URL地址
4.参数 async:可选,指定此请求是否为异步方法,默认为 true
send(data)1.发送请求到服务端
2.参数 data:字符串类型,通过此请求发送的数据。此参数值取决于 open方法中的 method值为"POST",就可以指定该参数。如果 method值为"GET",参数为 null
abort()取消当前请求
setRequestHeader(header,value)1.单独设置请求的某个HTTP头信息
2.参数 header:指定的 HTTP头名称
3.参数 value:指定的 HTTP头名称所对应的值
getResponseHeader(header)1.从响应中获取指定的 HTTP头信息
2.参数header:要获取的指定 HTTP
getAllResponseHeaders()获取响应的所有 HTTP头信息

参数名称说明
onreadystatechange设置回调函数
readyState返回请求的当前状态
常用值:
0:未初始化
1:开始发送请求
2.请求发送完成
3.开始读取响应
4.读取响应结束
status返回当前请求的HTTP状态码
常用值:
200:正确返回
404:找不到访问对象
statusText返回当前请求的响应状态
responseText以文本形式获取响应值
responseXMLXML形式获取响应值,并且解析成 DOM对象返回

最后修改:2020 年 08 月 06 日 12 : 28 AM
如果觉得我的文章对你有用,请随意赞赏