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技术简述_第1张图片 

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

Ajax技术简述_第2张图片

二、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文件中导入,如下:

Ajax技术简述_第3张图片

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

 打开postman工具进行测试

Ajax技术简述_第4张图片

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

 

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

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

Ajax技术简述_第5张图片

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

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

你可能感兴趣的:(ajax,javascript,xml)