Ajax技术简述

目录

一、Ajax技术

1.为什么要使用Ajax技术

2Ajax的工作原理：

二、Ajax的基本实现步骤

1、创建服务器

2.配置Ajax对象

3、获取服务器的响应

三、get请求

---

一、Ajax技术

Ajax：synchronous javascript and xml (异步javascript和xml)

它是浏览器提供的一套方法，可以实现压面无刷新更新数据，提高用户浏览网站应用的体验

1.为什么要使用Ajax技术

在Ajax技术之前传统网站的缺陷：

1. 无法局部刷新，页面跳转，会重新加载整个页面，造成资源浪费，增加用户等待的时间
2. 只能通过刷新页面来获取服务器端的数据,若数据量大、网速慢用户等待的时间会很长
3. 表单提交后，如果一项内容不合格，就需要重新填写所有的表单内容

但是Ajax可以进行局部刷新 能够提升用户浏览网页的体验

2Ajax的工作原理：

传统网站的工作原理：

 

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

二、Ajax的基本实现步骤

1、创建服务器

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('服务器启动成功');

2.配置Ajax对象

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

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

3、获取服务器的响应

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

xhr.onload = function () {};

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

xhr.onreadystatechange = function () {};

（3）Ajax状态码

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

三、get请求

设置open()方法中的第1个参数为“get”，表示设置get请求方式。
语法格式为：

xhr.open('get','http://localhost:3000/demo.html?username=diluc&age=18');
xhr.send();

其中问号后面的username=diluc&age=18表示GET请求参数，多个参数间需要&符号连接。
如下所示：
（1）创建一个新项目，在home.js文件中创建服务器，并去app.js文件中导入，如下：

const express = require('express')
const router = express.Router()
router.get('/first',(req,res)=>{
    res.send('Hello Ajax')
})
module.exports = router;

 打开postman工具进行测试

 2）创建客户端，获取客户端的响应。
a.新建一个html文件，创建xhr对象，并使用open()方法配置xhr对象.如下：

 <script>
        const xhr = new XMLHttpRequest()
        console.log('请求前的状态码是:',xhr.readyState)//0
        xhr.open('get','http://localhost:3000/home/first')
        console.log('请求后的状态码是:',xhr.readyState)//1
    </script>

说明请求已经建立，但是还没有发送（还没有调用send方法）
b.在html文件中，监听onload事件，并使用send()方法发送请求,如下

xhr.onload = function(){
 	console.log('发送请求后的状态码是:',xhr.readyState)
    console.log('服务器响应的数据为:',xhr.responseText)
}
xhr.send()//向服务器端发送请求

 响应已经完成，可以获取并使用服务器的响应了。
c.在html文件，添加一个按钮，将onload事件修改为onreadystatechange事件，从而实现服务器响应的数据传送到页面，如下：

<h2 id = 'pt'></h2>

 xhr.onreadystatechange = function(){
   if(xhr.readyState === 4 && xhr.status === 200){
        document.getElementById('pt').innerHTML = xhr.responseText;
    }
}