目录
一、AJAX简单介绍
1.1、传统网站中存在的的问题
(1)、网速慢的情况下,页面加载的时间长,用户只能等待。
(2)、表单提交后,如果一项内容不合格,需要从新填写所有表单内容。
(3)、页面跳转,重新加载页面,造成资源浪费,增加用户等待时间。
AJAX:是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用体验。
1.2、应用场景
(1)、页面上拉,加载更多数据。
(2)、列表数据无刷新分页。
(3)、表单项离开焦点数据验证。
(4)、搜索框展示文字下拉列表。
优势:无刷新获取数据,根据用户事件来更新部分页面内容。
缺点:没有浏览历史,不能回退,存在跨域问题。SEO不友好。
1.3、AJAX运行环境
Ajax技术需要运行在网站环境,使用Node创建服务器。
XML:可扩展标记语言,被用来传输和存储数据。(没有提前定义好的预定义标签)
HTTP:超文本传输协议,规定了浏览器与万维网之间的通信规则 。
1.4、AJAX的实现
1、创建ajax对象:
var xhr=new XHTMLHttpRequest();
2、告诉Ajax请求地址及请求方式:
xhr.open('get','http://www.example.com');
3、发送请求:
xhr.send();
4、获取服务器端与客户端响应数据
xhr.οnlοad=function(){
console.log(xhr.responseText);
}
1.5、服务器端响应得数据格式
真实项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式,当客户端响应数据时,要将JSON数据和HTML字符串进行拼接,然后将拼接的结果展示在页面上。
在http请求与响应的过程中,无论请求参数还是响应结果,如果是对象类型,最终都会被转为字符串进行传输。
JSON.parse() //将json字符串转换成json对象。
字符串拼接发送到客户端页面。
二、Node.js安装与介绍
2.1、Node.js介绍
node.js是一个基于Chrome V8引擎的JS运行时。
1、首先登陆node.js的官网,点击下载,根据自己的操作系统选择安装包,跟普通安装程序的安装步骤一样,选择安装路径,等待安装完成。
2、安装完成后,我们需要检测自己的node.js是否安装成功:
(1)win+r键,弹出运行框
(2)输入cmd回车
(3)在窗口中输入node -v回车
(4)如果出现v数字版本号就证明node.js已经安装成功了
2.2、Express框架的介绍与基本使用
1、安装此包
(1)在vscode的最外层启动终端,输入npm init --yes回车
(2)接着安装框架:输入npm i express回车进行安装
(3)等待安装成功
2、基本使用
创建一个js文件
//1、引入express
const express=require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(requset,response)=>{
//设置响应
response.send('HELLO EXPRESS');
)};
//4、监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000端口监听中......");
})
右键打开终端输入node (文件名).js回车会出现(服务已经启动,8000端口监听中......),此时服务器已经打开。
在网页中打开http://127.0.0.1:8000回车,会出现服务器端所做出的响应(HELLO EXPRESS),可以右击检查Network中的响应请求。
三、简单案例操作
3.1、发送GET请求
以下代码是我们需要在html中所做的操作(用到一部分ES6的知识):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover", function () {
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置类型与url
xhr.open('GET', 'http://127.0.0.1:8000/sever');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
//判断
if (xhr.readyState == 4) {
//处理服务端返回的结果
//判断响应的状态码 200 404 403 401 500
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
//处理行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
}
else {
}
}
}
})
</script>
</body>
</html>
服务端代码
//1、引入express
const express= require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/sever', (request, response) => {
//设置响应头
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应
response.send('HELLO AJAX');
//返回对象类型的值
});
//4、监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000端口监听中......");
})
3.2、发送POST请求
以下代码是我们需要在html中所做的操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover", function () {
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置类型与url
xhr.open('POST', 'http://127.0.0.1:8000/sever');
//设置请求头一般会把身份校验的信息放在这儿
// xhr.setRequestHeader('Content-Type', 'application/x-www-from-urlencoded');
//3.发送
xhr.send('a=100&b=200&c=300');
//4.事件绑定
xhr.onreadystatechange = function () {
//判断
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
//处理服务端返回的结果
result.innerHTML = xhr.response;
}
else {
}
}
}
})
</script>
</body>
</html>
服务端代码:
//1、引入express
const express= require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.post('/sever', (request, response) => {
//设置响应头
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应
response.send('HELLO AJAX');
//返回对象类型的值
});
//4、监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000端口监听中......");
})
注意:每当修改完服务端代码时,都应当重新运行服务器终端。右键打开侧边栏点击在集成终端打开输入node (文件名).js回车会出现(服务已经启动,8000端口监听中......),此时服务器已经打开。当端口改变时,应释放上一个端口重新运行此端口。
。