1. 初识Ajax
./public/Ajax.html
我是客户端
server.js
/*
传统网站中存在的问题：
网速慢的情况下，页面加载时间长，用户只能等待;
表单提交后，如果一项内容不合格，需要重新填写所有表单内容;
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间;
*/
/*
AJax:
它是浏览器提供的一套方法，```可以实现页面无刷新更新数据```，提高用户浏览网站应用的体验;
应用场景：
.页面上拉加载更多数据;
.列表数据无刷新分页;
.表单项离开焦点数据验证;
.搜索框提示文字下拉列表;
*/
/*
Ajax的运行环境
Ajax技术需要运行在网站环境中才能生效，
当前课程会使用Node创建的服务器作为网站服务器;
*/
const express = require('express');
const path = require('path');
const app = express();
//静态资源的访问
app.use(express.static(path.join(__dirname, 'public')));
app.get('/first', (req, res) => {
res.send('Hello, Ajax!');
});
app.listen(3000, function () {
console.log('server is listening ... ... ');
});
2. 请求方式
./public/01_返回JSON对象.html
./public/02_传递get请求参数.html
./public/03_传递post请求参数.html
./public/04_请求参数的格式.html
2.1 参数传递
server.js
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
/*
服务器端响应的数据格式：
在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式;
当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接;
然后将拼接的结果展示在页面中。
*/
/*
在http请求与响应的过程中，无论是请求参数还是响应内容，
如果是对象类型，最终都会被转换为对象字符串进行传输。
res.send({"name": "ZhangSan"});
如上, 服务器响应的是JSON对象, 但是会被转换为字符串进行传输,
所以在客户端接收的实际上"{"name": "ZhangSan"}",这是一个字符串，所以在客户端要进行转换, 将其转换成JSON对象！！！
*/
/*
1.application/x-www-form-urlencoded :
name=Zhang&age=23
===>
app.use(bodyParser .urlencoded());
```表示解析application/x-www-form-urlencoded格式的数据```
2.application/json :
{name: 'Zhang', age: '34', sex: 'man'}
===>
app.use(bodyParser.json());
```表示解析application/json格式的数据```
在请求头中指定Content-Type属性的值是application/x-www-form-urlencoded ，则是告诉服务器当前请求参数的格式是x-www-form-urlencoded(name=Zhang&age=23)!
在请求头中指定Content-Type属性的值是application/json，则是告诉服务器当前请求参数的格式是json({ name: 'Zhang', age:'23'})!
*/
//静态资源访问
app.use(express.static(path.join(__dirname, 'public')));
// 解析application/x-www-form-urlencoded数据格式(name='Zhang'&age=23)
app.use(bodyParser .urlencoded());
// responseData路由
app.get('/responseData', (req, res) => {
res.send({"name": "ZhangSan"}); // 响应JSON数据给客户端
});
// getArgs路由
app.get('/getArgs', (req, res) => {
res.send(req.query); // 响应给客户端
});
// postArgs路由
app.post('/postArgs', (req, res) => {
res.send(req.body);
});
app.use(bodyParser .json()); // 解析客户端发来application/json数据格式
// json路由
app.post('/json', (req, res) => {
res.send(req.body);
});
app.listen(3000, () => {
console.log(`Server started on port`);
});
2.2 Ajax状态码
test.html
app.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname));
app.get('/readyState', (req, res) => {
res.send('请求结束');
})
app.listen(3000, () => {
console.log(`Server started on port`);
});
3. 错误处理
3.1 init
3.2 模拟测试
error.html
app.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname));
app.get('/error',(req, res) => {
// console.log(abc); // 此时服务端出错(输出了一个不存在的变量), 此时将返回400状态码给客户端
res.status(400).send('not ok');
});
app.listen(3000);
console.log('app start successful!');
4. Ajax缓存
4.1 init
4.2 测试 cache.html
app.js
const express = require('express');
const path = require('path');
const fs = require('fs');
const server = express();
server.use(express.static(__dirname));
server.get('/cache', (req, res) => {
fs.readFile('./test.txt',(err, result)=>{
res.send(result);
});
});
server.listen(3000);
console.log('server start successful!');
下图中的IE浏览器就会出现此问题。
好，采用上述的解决方案去解决该问题，结果如下图所示。
5. Ajax异步编程
init.html
app.js
const express = require('express');
const path = require('path');
const server = express();
server.use(express.static(__dirname));
server.get('/first', (req, res) => {
res.send('Ok!');
});
server.listen(3000, () => {
console.log('server start successful!');
});
6. Ajax封装
test.html
app.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname));
app.get('/index', (req, res) => {
res.send('Ajax函数封装'); /* 此时响应头的数据类型是: text/html */
// res.send({"name": "Wang", "age": 23}); /* 此时响应头的数据类型是：application/json */
});
app.post('/index',(req, res) => {
// res.send("HelloWorld!!!!!!");
res.send({"name": "Wang", "age": 23});
});
app.listen(3000, () => {
console.log(`Server started on port`);
});
7. 浏览器模板引擎
init.html
8. Ajax案例
8.1 gitee地址
https://gitee.com/studyCodingEx/studys
8.2 效果演示
参考链接
您阅读本篇文章共花了：
发表评论