前端Ajax（一）

什么是AJAX呢？

Asynchronous Javascript & XML——WEB开发过程中的一种技术——异步发送&&请求数据————不需要重新刷新当前页面，能够保留当前的信息。——目前Json数据格式已经占据市场

 

在图中可以看到，客户端通过js向服务端发送请求是需要一个XmlHttpRequest对象，

那么XmlHttpRequest对象是什么呢，他能够用来干什么呢，我在代码的请求的过程中需要她干什么？

下面我来解释一下XmlHttpRequest是对象类型的API——在浏览器环境下使用——用于客户端和服务端数据的传递和接收——用于请求XML数据（JSON，纯文本text）

那么只有AJAX能够实现客户端与服务端的一个通信吗，下面我们来介绍一些其他的类似AJAX技术的一些技术/库

有请他们隆重登场——jQuery（其实里面就是封装了AJAX技术）——下一位Axios（据说是非常好用的一种）——第三位Superagent——最后几位Fetch API——Prototype——Node HTTP，我只是进行简单的介绍，其他的，私下练习，我们主要讲的是AJAX

 

首先呢，我们先写 一个关于请求纯文本的页面

把自己电脑上的上的服务器打开，不论你使用的是什么服务器，功能都是类似的。

然后在自己服务器下写WEB代码的文件夹中新建HTMl文件，可以随意命名。我们下面就命名为AJAX吧。命名成功后，我们用自己电脑上的编译器打开，用什么编译器随意，我电脑上安装的是sublime。然后开心的开始敲代码吧/、//@

首先我们需要创建一个标签，用来创建DOM树，请求js。

代码如下：

 

接下来我们尝试一下方法二请求：

 

浏览器中实现同样的效果，成功了啊！

接下来我们打印出状态码

首先说明一下，如果使用onload监听状态码的话，只会监听到4，2和3无法监听到，因为进入到onload以后，状态码已经是4了，不是4的话，进不到onload里面。

下面我们能讨论一下在onreadyStatechange中监听状态码的状况。

 

显示出如下数字，即表示状态码打印成功！此时我们能够打印出来的数字是2，3，4；

 

那么什么是状态码呢？

我们来看一下：

readyState————状态码

0——————请求未初始化

1——————服务器连接已建立

2——————请求已接收

3——————请求处理中

4——————请求已完成，且相应已就绪

HTTP——————状态码

200——————服务器成功返回网页

404——————请求的网页不存在

503——————服务器暂时不可用

我们仅仅打印出来了2，3，4，那么0和1在哪里呢。据说：0表示的是请求未初始化，那么我们现在不可能得打0；那么1呢，

在代码中加入这行代码，我们就能够正常打印出1了//@

为了网页能够正常显示，我们需要判断一下，readyState状态码和HTTP状态码；

如果readyState的状态码是4 && HTTP的状态码是200，那么说明页面可以正常显示。

一般的，网页在进行处理的 时候，会有一个转圈的效果，我们测试一下，此时的状态码 应该是3，运行的是onprogress方法；

我们的页面已经完成了模型，仅仅留下了显示页面，现在我们来显示页面内容：

我们需要定义一个标签，给她一个类||id，我们通过dom树获取到这个标签，然后将请求的内容通过innerHTML返回到页面中。

 

 

浏览器运行页面后，效果实现，完成！

Over!