AJax技术

2021-09-16

什么是 Ajax 技术

Ajax 是 JavaScript、XML、CSS、DOM 等多种已有技术的组合，可以实现客户端的异步请求操作，这样可以实在在不需要刷新页面的情况下与服务器进行同行，从而减少了用户的等待时间。
Ajax 是由 JesseJamesGarrett 创造的，是 Asynchronous JavaScript And XMl 的缩写，即异步 JavaScript 和 XML 技术。
可以说，Ajax 是“增强的 JavaScript”，是一种可以调用后台服务器获得数据的客户端 JavaScript 技术，支持更新部分页面的内容而不重载整个页面。
应用案例：

就好比百度搜索框，你字还没打完它就自动索引一部分内容了一样。
或者旧版以前的，淘宝新会员注册，利用 Ajax 技术可以实现不刷新页面的情况下,检测用户输入数据的合法性。
又或者是像博客的标签来选择课程，类比哈。

Ajax 的开发模式

先来看传统的开发模式。
用户的每一次操作都会向服务器发送一个 http 请求服务器，服务器进行处理后返回一个 HTML 页面返回给客户端。
图如下：

    (向服务器发送HTTP请求)
浏览器 ------------> web服务器
  ↑                     |处
  |                     |理
  |                     |数
  |                     ↓据
HTML+CSS数据 ←-------处理完成

接下来看看 Ajax 开发模式

              ⑴
浏览器 --------------------↓
  ↑    --------------> |======|----> web服务器
  |                    |      |           |处
  |                    | Ajax |           |理
  |                    |      |-------->  |数
  |                    |      |-------->  |据
  |                    |  ⑵  |    ⑶     |
  |                    |      |-------->  |
  |                    |      |-------->  ↓
  |               ←----|======|<-------处理完成
XML或字符串数据数据←--------↓

⑴：向服务器发送 http 请求
⑵：引擎
⑶：监视中

讲解：在 Ajax 开发模式中，每一个用户操作都会通过 Ajax 引擎和服务器端进行通信；
然后把返回的结果提交给客户端页面的 Ajax 引擎；
再由 Ajax 决定将这些返回的数据插入到页面的指定位置。
这样在不刷新页面的情况下，就可以对部分数据进行更新；
这样就可以降低用户流量，为用户带来更好的体验。

Ajax 的优点

1.可以把一部分以前由服务器负担的工作转移到客户端。 2.无刷新更新页面，从而使用户不用再像以前一样在服务器处理数据时，只能在死板的白屏钱交焦急的等待。 3.可以调用 XML 等外部数据，进一步促进页面显示和数据的分离。 4.与标准化的并被广泛支持的技术，不需要下载插件或者小程序，即可轻松实现桌面应用程序的效果。
5.Ajax 没有平台限制。

Ajax 的技术组成

其最核心的技术就是 XMLHttpRequest，它是一个具有应用程序接口的 JavaScript 对象，能够使用超文本传输协议(HTTP)连接一个服务器；
是微软公司为了满足开发者的需要，于 1999 年在 IE5.0 浏览器中率先推出的。
现在许多浏览器都对其提供了支持，不过实现方式与 IE 有所不同。

XMl 语言

<?xml version="1.0" encoding="GBK"?>  <!--说明是XML文档，并指定了XML文档的版本和编码-->
<placard version="2.0" <!--定义XML文档的根元素，并设置version属性-->
<description>公告栏</description>  <!--定义xml文档元素-->
<createTime>创建于2011年06月15日</createTime>
<info id="1">       <!--定义xml文档元素-->
<title>重要通知</title>
<content><![CDATA[今天下午4:50将进行乒乓球比赛，请各位选手做好准备。]]></content>
<pubDate>2011-06-15 16:09:37</pubDate>
</info>         <!--定义xml文档元素的结束标记-->
<info id="2">
    <title>幸福</title>
    <content><![CDATA[一家人永远在一起就是幸福]]></content>
    <pubDate>2011-06-18 10:15:43</pubDate>
</info>
</placard>  <!--定义XML文档的根元素的结束标记-->

XML 语法要求

1.XML 文档必须有一个顶层元素，其他元素必须嵌入在顶层元素中。 2.元素嵌套要正确，不允许元素间互相重叠或跨越。 3.每一个元素必须同时拥有起始标记和结束标记。这一点与 HTML 不同，XML 不允许忽略结束标记。 4.其实标记中的元素类型名必须与相应结束标记中的名称完全匹配。
5.XM 元素类型名区分大小写，而且开始和结束标记必须准确匹配。例如，分别定义起始标记,结束标记由于其实标记的类型名与结束标记的类型名不匹配，说明元素是非法的。//老师说 HTML 好像可以忽略大小写搞标记 6.元素类型名称中可以包含字母、数字以及其他字母元素类型，也可以使用非英文字符。名称不能以数字或符号”-“开头，名称中不能包含空格符和冒号“:”。 7.元素可以包含属性，但属性值必须用单引号或双引号括起来，a 但是前后两个引号必须一致，不能一个是单引号，一个是双引号。在一个元素节点中，属性名不能重复。

为 XML 文档中的元素定义属性

在一个元素的起始标记中，可以自定义一个或者多个属性。

XML 的注释也是

JavaScript 脚本语言

JavaScript 是一种解释型、基于对象的脚本语言，其核心已经嵌入到目前主流的 Web 浏览器中。
另外，JavaScript 还是一种弱类型的语言，也就是说在定义变量的时候，不用指定变量的数据类型，而且在大部分情况下 js 会根据需要自动对数据类型进行转换。

Dom

在 Ajax 应用中，通过 JavaScript 操作 DOm，可以达到在不刷新页面的情况下实时修改用户界面的目的。

CSS

CSS 是层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
在 Ajax 中通常使用 CSS 进行页面布局，并通过改变对象的 CSS 属性控制页面的外观和行为。虽然 CSS 在 AJax 的作用中比较重要，但是它也是构建创建跨浏览器应用的一大阻碍。

XMlHttpRequest 对象

初始化：
不同浏览器的初始化情况不一样，IE 和其他浏览器。
下面是 IE 浏览器的初始化 XMLHttpRequest 对象。

1	var http_request = new ActiveXObject("Microsoft.XMLHTTp");

非 IE 浏览器写法如下:

1	var http_request = new XMLHttpRequest();

根据不同浏览器创建不同对象。
来看下面这段代码：

if (window.XMLHttpRequest) {
  http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  try {
    http_request = new ActiveXObject("Msxm12.XMLHTTP");
  } catch (e) {
    //搞不懂这里
    try {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
  }
}

XMLHttpRequest 对象的常用属性

1.指定状态改变是所触发的事件处理器的属性 onreadystatechange。

1 2	http_request.onreadystatechange = getResult; //创建的XML...对象调用的函数

这里要注意：在指定所触发的事件处理器的时候，调用的自定义函数不能带()和参数。
可以配合 readyState 的值来写：
0：未初始化；1：正在加载；
2：已加载；3：交互中；
4：完成

获取服务器的字符串响应的属性 responseText 与
获取服务器的 XML 响应的属性 responseXML。

1 2	var h = http_request.responseText; var xmldoc = http_request.responseXML;

返回服务器 HTTP 状态码的属性 status

100：继续发送请求；
200：请求已成功；
202：请求被接受，但尚未成功；
400：错误的请求；
404：文件未找到；
408：请求超时；
500：内部服务器错误；
501：服务器不支持当前请求所需要的某个功能。
一般来说 500 左右都是后端的问题了，但也不能绝对

一下是配合 readyState 的请求写法

if(http_request.readyState == 4)}{
  if(http_request.statue == 200){
    alert("请求成功！")
  }else{
    alert("请求未成功！")
  }
}

创建新请求的方法

语法格式：open(“method”,”URL”[,asyncFlag[,”userName”[,passworld”]]])
method:用于指定请求的类型，一般为 GET 或 POST
URL：用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串
asyncFlag：为可选参数，用于指定请求方式，异步是 true，同步是 false，默认 true
userName：为可选参数，用于指定请求用户名，没有时可省略
password：为可选参数，用于指定请求密码，没有时可省略

1 2	let url = "http://localhost/进阶版作业/city.json"; //看情况 xmlHttpRequest.open("get", url, true);

向服务器发送请求的方法

语法格式：send(content)
content:用于指定发送的数据

1	xmlHttpRequest.send(null); //向服务器发送一个不包含任何参数的请求

设置请求的 HTTP 头的方法

语法格式：setRequestHeader(“header”,”value”)
header：用于指定 http 头
value：用于为指定的 HTTP 头设置值
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

停止或放弃当前异步请求的方法

http_requset.abort();

返回 HTTP 头信息的方法

getREsponseHeader(“headerLabel)
如:http_request.getREsponseHeader(“headerLabel)