前端学习（1431）：ajax封装六

ajax.js

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
// 创建web服务器
const app = express();app.use(bodyParser.json());// 静态资源访问服务功能
app.use(express.static(path.join(__dirname)));// 对应01html文件
app.get('/first', (req, res) => {res.send('Hello, Ajax');
});// 对应02html文件
app.get('/responseData', (req, res) => {res.send({ "name": "zs" });
});// 对应03html文件
app.get('/get', (req, res) => {res.send(req.query);
});// 对应04html文件
app.post('/post', (req, res) => {res.send(req.body);
});// 对应05html文件
app.post('/json', (req, res) => {res.send(req.body);
});// 对应06html文件
app.get('/readystate', (req, res) => {res.send('hello');
});// 对应07html文件
app.get('/error', (req, res) => {//console.log(abc);res.status(400).send('not ok');
});// 对应08html文件
app.get('/cache', (req, res) => {fs.readFile('./test.txt', (err, result) => {res.send(result);});
});// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

ajax10.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript">function ajax(options) {// 存储的是默认值var defaults = {type: 'get',url: '',data: {},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: function() {},error: function() {}};// 使用options对象中的属性覆盖defaults对象中的属性Object.assign(defaults, options);// 创建ajax对象var xhr = new XMLHttpRequest();// 拼接请求参数的变量var params = '';// 循环用户传递进来的对象格式参数for (var attr in defaults.data) {// 将参数转换为字符串格式params += attr + '=' + defaults.data[attr] + '&';}// 将参数最后面的&截取掉 // 将截取的结果重新赋值给params变量params = params.substr(0, params.length - 1);// 判断请求方式if (defaults.type == 'get') {defaults.url = defaults.url + '?' + params;}/*{name: 'zhangsan',age: 20}name=zhangsan&age=20*/// 配置ajax对象xhr.open(defaults.type, defaults.url);// 如果请求方式为postif (defaults.type == 'post') {// 用户希望的向服务器端传递的请求参数的类型var contentType = defaults.header['Content-Type']// 设置请求参数格式的类型xhr.setRequestHeader('Content-Type', contentType);// 判断用户希望的请求参数格式的类型// 如果类型为jsonif (contentType == 'application/json') {// 向服务器端传递json数据格式的参数xhr.send(JSON.stringify(defaults.data))} else {// 向服务器端传递普通类型的请求参数xhr.send(params);}} else {// 发送请求xhr.send();}// 监听xhr对象下面的onload事件// 当xhr对象接收完响应数据后触发xhr.onload = function() {// xhr.getResponseHeader()// 获取响应头中的数据var contentType = xhr.getResponseHeader('Content-Type');// 服务器端返回的数据var responseText = xhr.responseText;// 如果响应类型中包含applicaition/jsonif (contentType.includes('application/json')) {// 将json字符串转换为json对象responseText = JSON.parse(responseText)}// 当http状态码等于200的时候if (xhr.status == 200) {// 请求成功 调用处理成功情况的函数defaults.success(responseText, xhr);} else {// 请求失败 调用处理失败情况的函数defaults.error(responseText, xhr);}}}ajax({url: 'http://localhost:3000/responseData',success: function(data) {console.log('这里是success函数');console.log(data)}})/*请求参数要考虑的问题1.请求参数位置的问题将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置get 放在请求地址的后面post 放在send方法中2.请求参数格式的问题application/x-www-form-urlencoded参数名称=参数值&参数名称=参数值name=zhangsan&age=20application/json{name: 'zhangsan', age: 20}1.传递对象数据类型对于函数的调用者更加友好2.在函数内部对象数据类型转换为字符串数据类型更加方便*/</script>
</body></html>

ajax1.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript">// 1.创建ajax对象var xhr = new XMLHttpRequest();// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求// 1)请求方式 2)请求地址xhr.open('get', 'http://localhost:3000/responseData');// 3.发送请求xhr.send();// 4.获取服务器端响应到客户端的数据xhr.onload = function() {// console.log(typeof xhr.responseText)// 将JSON字符串转换为JSON对象var responseText = JSON.parse(xhr.responseText);// 测试：在控制台输出处理结果console.log(responseText)// 将数据和html字符串进行拼接var str = '<h2>' + responseText.name + '</h2>';// 将拼接的结果追加到页面中document.body.innerHTML = str;}</script>
</body></html>

运行结果