Skip to content

Commit 0703420

Browse files
zhouxiaotianzhouxiaotian
committed
AJAX&NODE
1 parent 9c73c46 commit 0703420

13 files changed

Lines changed: 867 additions & 2 deletions

File tree

‎10期JS正式课/正式课第七周/CRM/API.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737

3838
3、获取指定客户的信息
3939
URL:/getInfo GET
40-
参数:?id=1 传递给服务器对应的客户的ID
40+
参数:?id=1 传递给服务器对应的客户的ID /getInfo?id=12
4141
返回:
4242
'{
4343
code:0,

‎10期JS正式课/正式课第七周/CRM/json/custom.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"id":4,"name":"刘燕娇","age":20,"phone":"15816345987","address":"北京市昌平区"},{"name":"王晨","age":72,"phone":"16856986666","address":"北京市海淀区","id":5},{"name":"珠峰培训","age":"8","phone":"111111","address":"333333","id":"7"}]
1+
[{"id":4,"name":"刘燕娇","age":20,"phone":"15816345987","address":"北京市昌平区"},{"name":"王晨","age":72,"phone":"16856986666","address":"北京市海淀区","id":5},{"name":"珠峰培训","age":"8","phone":"111111","address":"333333","id":"7"},{"name":"刘玉强","age":"20","phone":"10000000","address":"北京","id":"71"}]

‎10期JS正式课/正式课第七周/CRM/serverStudent.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
var http = require('http'),
2+
url = require('url'),
3+
fs = require('fs');
4+
var server = http.createServer(function (request, response) {
5+
var urlObj = url.parse(request.url, true),
6+
pathname = urlObj.pathname,
7+
query = urlObj.query;
8+
9+
//->处理静态资源文件的请求
10+
var reg = /\.([0-9a-zA-Z]+)/i;
11+
if (reg.test(pathname)) {
12+
var suffix = reg.exec(pathname)[1].toUpperCase(),
13+
suffixMIME = 'text/plain';
14+
switch (suffix) {
15+
case 'HTML':
16+
suffixMIME = 'text/html';
17+
break;
18+
case 'CSS':
19+
suffixMIME = 'text/css';
20+
break;
21+
case 'JS':
22+
suffixMIME = 'text/javascript';
23+
break;
24+
}
25+
var conFile = 'NOT FOUND',
26+
status = 404;
27+
try {
28+
conFile = fs.readFileSync('.' + pathname, 'utf-8');
29+
status = 200;
30+
} catch (e) {
31+
suffixMIME = 'text/plain';
32+
}
33+
response.writeHead(status, {'content-type': suffixMIME + ';charset=utf-8;'});
34+
response.end(conFile);
35+
return;
36+
}
37+
38+
//->处理客户端的AJAX请求(把API文档上提供的功能都实现了)
39+
40+
//->首先获取文件中的所有客户信息,并且把获取的信息转换为JSON格式的对象
41+
var customData = fs.readFileSync('./json/custom.json', 'utf-8');
42+
customData.length === 0 ? customData = '[]' : null;//->防止文件中什么都没有,我们获取的空字符串在接受JSON.PARSE方法转换的时候会报错,我们把空字符串变成'[]'
43+
customData = JSON.parse(customData);
44+
45+
//->初始定义返回的结果变量
46+
var result = {
47+
code: 1,
48+
msg: 'ERROR',
49+
data: null
50+
};
51+
52+
//->获取所有的客户信息
53+
if (pathname === '/getAllList') {
54+
if (customData.length > 0) {
55+
result = {
56+
code: 0,
57+
msg: 'SUCCESS',
58+
data: customData
59+
};
60+
}
61+
response.writeHead(200, {'content-type': 'application/json;charset=utf-8;'});
62+
response.end(JSON.stringify(result));
63+
return;
64+
}
65+
66+
//->获取指定客户的信息
67+
if (pathname === '/getInfo') {
68+
//->把客户端传递进来的ID获取到,ID从QUERY中存储着呢
69+
var customId = query['id'];
70+
//->在所有的客户信息中遍历,ID和传递进来的ID相同的那一项,获取到那一项之后，把信息返回给客户端即可
71+
customData.forEach(function (item, index) {
72+
if (customId == item['id']) {
73+
result = {
74+
code: 0,
75+
msg: 'SUCCESS',
76+
data: item
77+
};
78+
return false;//->结束FOREACH循环
79+
}
80+
});
81+
response.writeHead(200, {'content-type': 'application/json;charset=utf-8'});
82+
response.end(JSON.stringify(result));
83+
return;
84+
}
85+
86+
//->增加客户信息:把客户端传递进来的用户输入的内容存储到CUSTOM.JSON文件中
87+
if (pathname === '/addInfo') {
88+
//->获取客户端传递的内容,由于客户端使用的是POST请求,我们需要获取请求主体中的内容(不是GET请求的问号传参了,所以不能使用QUERY获取了)
89+
var str = '';
90+
request.on('data', function (chunk) {//->正在一点点的接收客户端请求主体中的内容,每接收一点点就会触发依稀回调函数执行,CHUNK就是当前这一次接收的一小部分内容
91+
str += chunk;
92+
});
93+
request.on('end', function () {//->全部接收完了,该干啥干啥
94+
//->把获取的内容转换为JSON对象
95+
str = JSON.parse(str);
96+
//->根据当前所有客户信息中的最大编号给新增的信息加编号:最大的编号+1即可
97+
str['id'] = Number(customData[customData.length - 1]['id']) + 1;
98+
/*var max = customData[customData.length - 1]['id'];
99+
max += 1;
100+
str['id'] = max;*/
101+
//->把我们需要增加的放到CUSTOMDATA数组中,然后在把最新的数组放入到CUSTOMER.JSON中即可
102+
customData.push(str);
103+
fs.writeFileSync('./json/custom.json', JSON.stringify(customData), 'utf-8');
104+
//->返回客户端成功或者失败
105+
response.writeHead(200, {'content-type': 'application/json;charset=utf-8'});
106+
response.end(JSON.stringify({
107+
code: 0,
108+
msg: 'SUCCESS'
109+
}));
110+
});
111+
}
112+
});
113+
server.listen(88, function () {
114+
console.log('ok');
115+
});

‎10期JS正式课/正式课第七周/CRM/后台开发.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
1、创建服务，监听端口，发布我们的项目
2+
3+
2、

‎10期JS正式课/正式课第七周/第四天/ajax/README.txt‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
ajax
2+
异步javascript和xml
3+
4+
利用浏览器提供的API实现的ajax请求。
5+
API 应用程序编程接口
6+
7+
标准浏览器
8+
XMLHttpRequest
9+
低版本ie
10+
ActiveXObject
11+
12+
处理浏览器兼容性
13+
1、渐进增强 先保证低版本浏览器
14+
2、优雅降级 先保证标准浏览器
15+

‎10期JS正式课/正式课第七周/第四天/ajax/bottle/ajax.js‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
/**
2+
* Created by zhufengpeixun on 2016/10/29.
3+
*/
4+
//{
5+
// url: '',ajax请求地址
6+
// method: 'get',http方法
7+
// headers: {},自定义请求首部
8+
// async: true,是否为异步请求
9+
// data: {},往服务器发送的参数
10+
// success: function () { 成功时执行的回调函数
11+
// },
12+
// error: function () { 失败时执行的回调函数
13+
// },
14+
// cache: false 是否缓存
15+
// dataType:'json' 格式化服务器返回的数据类型
16+
//}
17+
(function () {
18+
/**
19+
* ajax核心逻辑
20+
* @param {Object} options 用户配置参数
21+
*/
22+
function ajax(options) {
23+
// 判断参数是否为一个对象
24+
if (!tools.isType(options, 'Object')) {
25+
throw new TypeError('参数类型错误');
26+
}
27+
// 获取ajax对象
28+
var xhr = tools.getXHR();
29+
30+
// 设置http方法默认值
31+
options.method || (options.method = 'get');
32+
options.url || (options.url = '/');
33+
// 因为undefined在低版本ie存在一个bug，可以被重写的bug
34+
// 所以这里不直接判断是否等于undefined 而是判断void表达式
35+
options.async === void 0 || (options.async = true);
36+
37+
var url = options.url;
38+
// 将data格式化为querystring格式
39+
var data = tools.param(options.data);
40+
41+
// 将querystring格式的data拼接到url后面
42+
// 1、get系方法 将data格式化为querystring拼接到url后
43+
// 如果是get系 则将data设置为空
44+
if (/^get|delete|head$/ig.test(options.method) && data) {
45+
url = tools.appendToURL(url, data);
46+
data = null;
47+
}
48+
49+
// 2、如果cache为false 需要往url后面添加随机数
50+
if (options.cache === false) {
51+
var ran = (Math.random()).toString(36).slice(2);
52+
url = tools.appendToURL(url, '_=' + ran);
53+
}
54+
55+
56+
// 执行open方法
57+
xhr.open(options.method, url, options.async);
58+
59+
// 设置自定义请求首部
60+
if (xhr.setRequestHeader && options.headers) {
61+
for (var header in options.headers) {
62+
if (!options.headers.hasOwnProperty(header)) {
63+
continue;
64+
}
65+
xhr.setRequestHeader(header, options.headers[header]);
66+
}
67+
}
68+
69+
// step 3 接收服务器响应
70+
xhr.onreadystatechange = function () {
71+
// 判断http事务是否完成
72+
if (xhr.readyState === 4) {
73+
// 获取http响应主体
74+
var response = xhr.responseText;
75+
// 判断状态码是否成功
76+
if (/^2\d{2}$/.test(xhr.status) || xhr.status === 304) {
77+
// 判断是否需要将响应主体格式化json对象
78+
if (options.dataType === 'json') {
79+
// 因为response不是合法的json字符串的话，执行JSONParse会报错。所以这里用try catch包住
80+
try {
81+
response = tools.JSONParse(response);
82+
} catch (ex) {
83+
options.error && options.error(ex);
84+
return;
85+
}
86+
}
87+
options.success && options.success(response);
88+
89+
} else if (/^(4|5)\d{2}$/.test(xhr.status)) {
90+
options.error && options.error(new Error('服务器出错'));
91+
}
92+
}
93+
};
94+
95+
// step 4 发送请求
96+
xhr.send(data);
97+
}
98+
99+
var tools = {
100+
/**
101+
* 判断视距类型
102+
* @param {*} data 需要判断类型的数据
103+
* @param {string} type 数据格式
104+
* @return {boolean} 数据格式是否匹配
105+
*/
106+
isType: function (data, type) {
107+
return Object.prototype.toString.call(data) === '[object ' + type + ']';
108+
},
109+
/**
110+
* 利用惰性函数获取ajax对象
111+
*/
112+
getXHR: (function () {
113+
var XHRList = [function () {
114+
return new XMLHttpRequest();
115+
}, function () {
116+
return new ActiveXObject('Microsoft.XMLHTTP');
117+
}, function () {
118+
return new ActiveXObject('Msxml2.XMLHTTP');
119+
}, function () {
120+
return new ActiveXObject('Msxml3.XMLHTTP');
121+
}];
122+
123+
var xhr = null;
124+
while (xhr = XHRList.shift()) {
125+
try {
126+
xhr();
127+
return xhr;
128+
} catch (ex) {
129+
130+
}
131+
}
132+
throw new ReferenceError('当前浏览器不支持ajax功能');
133+
})(),
134+
/**
135+
* 将对象格式化为querystring格式
136+
* @see {a:1,b:2} => a=1&b=2
137+
* @param data
138+
*/
139+
param: function (data) {
140+
// 因为该方法的目的就是返回一个字符串，参数已经是一个字符串则直接返回
141+
if (typeof data === 'string') {
142+
return data;
143+
}
144+
// 如果参数为null或者undefined 返回空字符串
145+
if (data === null || data === void 0) {
146+
return '';
147+
}
148+
// 如果data是一个对象
149+
if (tools.isType(data, 'Object')) {
150+
var arr = [];
151+
for (var key in data) {
152+
if (!data.hasOwnProperty(key)) continue;
153+
// 因为url中不能存在非英文字符
154+
arr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
155+
}
156+
return arr.join('&');
157+
}
158+
159+
// 参数既不是string 也不是对象、null、undefined 则直接toString返回
160+
return data.toString();
161+
},
162+
/**
163+
* 往url后面拼接字符串
164+
*/
165+
appendToURL: function (url, str) {
166+
// 先调用param方法，格式化下str
167+
str = this.param(str);
168+
if (!str) {
169+
return url;
170+
}
171+
// 判断url中是否存在问号
172+
var hasQuery = /\?/.test(url);
173+
return url + (hasQuery ? '&' : '?') + str;
174+
},
175+
/**
176+
* 将json字符串格式化为json对象
177+
* @param {string} JSONString json字符串
178+
* @return {Object} 转化后的json对象
179+
*/
180+
JSONParse: function (JSONString) {
181+
if (window.JSON) {
182+
return JSON.parse(JSONString)
183+
}
184+
return eval('(' + JSONString + ')');
185+
}
186+
};
187+
188+
this.ajax = ajax;
189+
}());

‎10期JS正式课/正式课第七周/第四天/ajax/bottle/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<script src="ajax.js"></script>
7+
<script>
8+
ajax({
9+
url: './ajax.js',
10+
method: 'post',
11+
headers: {
12+
'abcd': '123',
13+
'Content-type': 'application/x-www-form-urlencoded'
14+
},
15+
async: true,
16+
data: {a: 1, b: 2},// a=1&b=2
17+
success: function (data) {
18+
console.log(data)
19+
},
20+
error: function (ex) {
21+
console.error(ex);
22+
},
23+
cache: false,
24+
dataType: 'text'
25+
})
26+
</script>
27+
</head>
28+
<body>
29+
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)