前言:转眼多去一个多月了,ajax这方面快忘完了,果然好记性不如烂笔头。今天重新再走一遍,顺便做个笔记,以免下次再忘


Ajax

来自Ajax的简介:

ajax相当于异步JavaScriptXML
ajax并不是一种全新的技术,而是由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 年 01 月 13 日 11 : 30 AM
如果觉得我的文章对你有用,请随意赞赏