GET发送请求
应用场景:页面请求服务器上的json数据并显示。
利用ajax+promise实现请求发送:
function ajax(bookId) {
let xhr = new XMLHttpRequest();
return new Promise((res, rej) => {
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
if(200 <= xhr.status <= 304){
res(xhr.responseText);
}else{
rej('error reject');
}
}
};
let url = 'http://localhost:8080/json/bookContentBy' + bookId + '.json';
xhr.open('GET', url);
xhr.send(null);
});
}
ajax.then(function(msg){
//console.log(msg);
});
GET发送请求时Node搭建服务器
let http = require('http');
let url = require('url');
//下面利用http.createServer搭建服务器
let server = http.createServer(onRequest);
let fs = require('fs');
let baseUrl = __dirname;
function resolve(pathname) {
return baseUrl+pathname;
}
server.listen(8080);
console.log('server running at port 8080');
function onRequest(req, res) {
let pathname = url.parse(req.url).pathname;
console.log(pathname);///json/bookContentBy001.json
//利用fs.readFile预读文件,若文件存在则返回,否则报错
fs.readFile(resolve(pathname),function (err,content) {
if(err){
res.writeHead(404,{'Content-Type':'application/json;charset="utf-8"'});
res.write(err.message);
res.end();
}else{
//请求的是JSON数据因此请求头包含Content-Type:application/json
//由于请求时ajax请求且跨域,因此要设置Access-Control-Allow-Origin属性,即请求源(协议+域名+端口)
//设置缓存,Cache-Control:public,max-age=2000000
res.writeHead(200,{'Content-Type':'application/json;charset="utf-8"','Access-Control-Allow-Origin': 'http://localhost:63342','Cache-Control':'public,max-age=2000000'});//头信息
res.write(content);//将文件内容返回到请求接口,即前面的xhr.responseText
res.end();
}
});
}
POST提交表单
关键是ajax请求,页面为HTML:
//这里action即对应的请求URL
<form method="post" action="http://localhost:8080/file" id="form">
<p>
<label for="name">name:
<input type="text" id="name" name="name" value="zy">
</label>
</p>
<p>
<label for="age">age:
<input type="text" id="age" name="age" value="12">
</label>
</p>
<p>
sex:<label for="boy">
boy:<input type="radio" id="boy" name="sex" data-index="0" checked>
</label>
<label for="girl">
girl:<input type="radio" id="girl" name="sex" data-index="1">
</label>
</p>
<p>
love numbers<label for="loveNumber1">
1:<input type="checkbox" id="loveNumber1" name="love" data-index="0" checked>
</label>
<label for="loveNumber2">
2:<input type="checkbox" id="loveNumber2" name="love" data-index="1">
</label>
<label for="loveNumber3">
3:<input type="checkbox" id="loveNumber3" name="love" data-index="2">
</label>
<label for="loveNumber4">
4:<input type="checkbox" id="loveNumber4" name="love" data-index="3">
</label>
</p>
<p>
<label for="loveFoods">favourite foods:
<select id="loveFoods" name="loveFoods">
<option value="apple">apple 1</option>
<option value="banana">banana 1</option>
<option value="orange">orange 1</option>
<option value="peach">peach 1</option>
</select>
</label>
</p>
<p>
<label for="upload">
<input type="file" value="selectFile" id="upload">
</label>
</p>
<p>
<label for="submit">
<input type="submit" value="submit" id="submit">
</label>
</p>
</form>
获取submit的点击事件并用ajax处理post请求:
document.getElementById('submit').onclick = function (e) {
ajax().then(function (msg) {
console.log(msg);
});
};
function ajax() {
let xhr = new XMLHttpRequest();
let data = serialize(form);
return new Promise((res, rej) => {
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (200 <= xhr.status <= 304) {
res('ok');
} else {
rej('error reject');
}
}
};
let url = 'http://localhost:8080/file';
xhr.open('POST', url);
xhr.send(data);//send请求需要设置请求头,这里data是序列化的表单内容,具体见后面
res(data);
});
}
表单序列化
function serialize(form) {
var parts = [];
for (var i = 0, i1 = form.elements.length; i < i1; i++) {
var field = form.elements[i];
switch (field.type) {
case 'select-one':
case 'select-multiple':
if (field.type.length) {
for (var j = 0, j1 = field.options.length; j < j1; j++) {
var option = field.options[j];
if (option.selected) {
var optionValue = '';
if (option.hasAttribute('value') && option.attributes['value'].specified) {
//specified表明是否有此属性,有的话返回true,若定义了此属性但尚未添加到元素中也返回true。
optionValue = option.value;
} else {
optionValue = optionValue.text;
}
parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optionValue));
}
}
}
break;
case undefined:
case 'file':
case 'submit':
case 'reset':
case 'button':
break;
case 'radio':
case 'checkbox':
if(!field.checked){
break;
}else{
parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.dataset['index']));
break;
}
default:
if(field.name.length){
parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
}
}
}
return parts.join('&');
}
POST提交表单时服务器端设置
let http = require('http');
let url = require('url');
let querystring = require('querystring');
let server = http.createServer(onSubmit);
server.listen(8080);
function onSubmit(req,res) {
let str1 = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
font-size:62.5%;
}
.title{
font-size: 1.5rem;
border-bottom: 2px dashed red;
}
</style>
</head>
<body>
<p>数据已经成功提交</p><p>内容是:<br/>`;
let str2 = `</p>
</body>
</html>`;
if(req.method.toUpperCase() === 'POST'){
console.log('[200]' + req.method +'to' + req.url);
let fullBody = '';
req.on('data',function (chunk) {
fullBody += chunk.toString();
});
req.on('end',function () {
res.writeHead(200,{'Content-Type':'text/html;charset="utf-8"','Access-Control-Allow-Origin': 'http://localhost:63342','Cache-Control':'public,max-age=2000000'});//头信息
res.write(str1);
res.write(JSON.stringify(fullBody));
res.write(str2);
res.end();
});
}
}
页面展示内容为:
数据已经成功提交
内容是:
"name=zy&age=12&sex=0&love=0&loveFoods=apple"