初识Ajax

目录

一、传统网站中存在的问题

1、页面加载时间长

2、表单提交的问题

3、页面无法局部更新

 二、什么是Ajax

1、Ajax 的概念

2、与传统网页相比优势

3、Ajax 的工作原理

 三、Ajax 的基本实现步骤

1、创建服务器

2、配置Ajax 对象

 3、获取服务器端的响应

---

一、传统网站中存在的问题

1、页面加载时间长

在传统的网站中，用户只能通过浏览器刷新页面从服务器获取数据。如果网速慢，获取数据的时间会很长。当页面加载数据时，用户也不能在该页面进行其他的操作，只能等待网页加载完成。

2、表单提交的问题

在用户提交表单的时候，如果用户在表单中填写的内容有一项不符合要求，网页就会重新跳转回表单页面。例如用户提交“用户注册”表单后，如果用户输入的邮箱地址已经被别人注册过了，服务器会返回错误信息，并将页面跳转回表单页面。

由于页面发生了跳转，刚刚用户填写的信息都消失了，所以用户需要重新填写所有的表单信息。尤其是在用户填写的信息比较多时，每次提交失败都要全部重新填写，用户体验非常不好。

3、页面无法局部更新

在传统的网站中，当页面发生跳转时，需要重新加载整个页面。其实，一个网站中大部分网页的公共部分（如头部、底部和侧边栏）都是一样的，没必要重新加载。传统的网页无法局部更新，每个页面都要把公共部分加载一遍，延长了用户的等待时间。

 二、什么是Ajax

1、Ajax 的概念

Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。

描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。

功能：用于实现与服务器进行异步交互的功能。

AJAX提供与服务器异步通信的能力，可以在Web页面触发的JavaScript事件中向服务器发出异步请求，执行更新或查询数据库

AJAX的核心是JavaScript对象XMLHttpRequest，该对象在IE 5中首次引入，使用户通过JavaScript向服务器提出请求并处理响应，而不阻塞用户

当Web服务器的响应返回时，使用JavaScript回调函数和CSS来相应地更新页面的局部内容，而不是刷新整个页面

在页面与服务器交互的过程中不中断用户操作，用户甚至察觉不到浏览器正在与服务器通信

2、与传统网页相比优势

相较于传统网页，使用Ajax技术的优势具体有以下几个方面 

3、Ajax 的工作原理

传统网站从浏览器端向服务器端发送请求的工作原理：

Ajax网站从浏览器端向服务器端发送请求的工作原理：

 三、Ajax 的基本实现步骤

Ajax的基本实现步骤：

创建服务器

配置Ajax对象

发送请求

1、创建服务器

创建服务器，定义“/first”路由

在server目录中下载Express框架，并新建app.js，编写JavaScript代码。

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
// 定义/first路由
app.get('/first', (req, res) => {
  res.send('Hello, Ajax');
});
app.listen(3000);
console.log('服务器启动成功');

express.static()中间件用来设置静态文件public目录

运行程序

切换到server目录，使用node app.js命令启动服务器，查看运行结果。

2、配置Ajax 对象

首先创建Ajax对象，然后使用open()方法来配置Ajax对象，最后使用send()方法发送请求

基本语法格式：

var xhr = new XMLHttpRequest();
xhr.open('请求方式', '请求地址');
xhr.send();

 3、获取服务器端的响应

onload事件 

通过onload事件的方式获取服务器端响应到客户端的数据。

基本语法格式：

xhr.onload = function () {};

xhr表示Ajax对象，onload属性的值为事件处理函数。

onreadystatechange事件

onreadystatechange事件

通过onreadystatechange事件的方式获取服务器端响应到客户端的数据。

xhr.onreadystatechange = function () {};

xhr表示Ajax对象，onreadystatechange属性的值是事件处理函数。

Ajax状态码	说明
0	请求未初始化（还没有调用open()方法）
1	请求已经建立，但是还没有发送（还没有调用send()方法）
2	请求已经发送
3	请求正在处理中，通常响应中已经有部分数据可以用了
4	响应已经完成，可以获取并使用服务器的响应了

（1）创建xhr对象，并使用open()方法配置xhr对象

在server\public目录下新建demo01.html文件，编写JavaScript代码。

<script>
    var xhr = new XMLHttpRequest();
     console.log(xhr.readyState);      // 获取Ajax状态码0
     xhr.open('get', 'http://localhost:3000/first');
     console.log(xhr.readyState);      // 获取Ajax状态码1
  </script>

（2）监听onload事件，并使用send()方法发送请求

在demo01.html文件中，编写JavaScript代码

xhr.onload = function () {
       console.log(xhr.readyState);     // 获取Ajax状态码4
       console.log(xhr.responseText); // 输出“Hello, Ajax”
    };
    xhr.send();

（3）运行程序

使用node app.js命令启动服务器，然后在浏览器中访问 “http://localhost:3000/demo01.html”，查看控制台中的输出结果。

 0表示创建了Ajax对象；

1表示调用open()方法已经对Ajax对象进行了配置，

4表示服务器端的响应数据已经接收完成，触发事件处理函数。

 

（4）将onload事件修改为onreadystatechange事件

修改demo01.html文件，编写如下代码。

xhr.onreadystatechange = function () {
  console.log(xhr.readyState);              // 获取Ajax状态码2 3  4
  // 对Ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
  if (xhr.readyState === 4) {
    console.log(xhr.responseText);         // 输出Hello, Ajax
  };
};

（5）运行程序

刷新浏览器页面，查看控制台中的输出结果。

 2表示请求已经发送了但是还没有接收到服务器端响应的数据；

3表示已经接收到服务器端的部分数据了；

4表示服务器端的响应数据接收完成了。