nodejs搭建服务器及原生ajax的使用

app.js 文件
执行 node app.js 启动服务器

// 引入http模块
let http = require('http');
// 引入fs模块
let fs = require('fs');
// 引入url模块
let url = require('url');
// 引入path模块
let path = require('path');
// 引入querystirng模块
let qs = require('querystring');
// 定义MT对象
const MT = {
	'html': 'text/html',
	'htm': 'text/html',
	'css': 'text/css',
	'txt': 'text/plain',
	'js': 'text/javascript',
	'png': 'image/png',
	'jpg': 'image/jpg',
	'jpeg': 'image/jpeg'
}
// 创建服务器对象
let server = http.createServer(function(req, res) {
	// 获取前端请求的路径
	let url_obj = url.parse(req.url, true);
	// 获取pathname部分 路径不带query和hash的部分 如: /web/index.html
	let pathname = url_obj.pathname.slice(1); 
	// 获取后缀名  如: html
	let extName = pathname.split('.').pop();	
	// 获取请求方式  如: get或者post
	let method = req.method.toLowerCase();
	// 获取pathObj 将pathname字符串转成对象
	let pathObj = path.parse(pathname);
	
	// 处理get请求
	if (pathname === 'login' && method === 'get') {
		// 获取用户名
		let username = url_obj.query.username;
		// 获取密码
	    let password = url_obj.query.password;
	    // console.log('get请求', username, password);
	    // 设置响应头
	    res.setHeader('content-type', 'text/plain;charset=utf-8');
	    // 返回数据给浏览器
	    res.end(JSON.stringify({
	      error:0,
	      data:'get成功'
	    }))
	    return
	 }

	// 处理post请求
	if (pathname === 'login' && method === 'post') {
		// 定义变量用于接收数据
	    let allData = '';
	    // data事件
	    req.on('data', function(data) {
	      allData += data;
	    })
	    // end事件, 当数据接收完毕之后会执行end事件
	  	req.on('end', function() {
	      // 处理post数据
	      let obj = qs.parse(allData);
	      // 获取用户名
	      let username = obj.username;
	      // 获取密码
	      let password = obj.password;
	      // console.log('post请求', username, password);
	      // 设置响应头
	      res.setHeader('content-type', 'text/plain;charset=utf-8');
	      // 返回数据给浏览器
	      res.end(JSON.stringify({
	        error:0,
	        data:'post成功'
	      }))
	    })
	    return
	}
	// 判断ext部分是否为空
	if (!pathObj.ext) {
		// 如果没有输入index.html, 自动拼接index.html
		pathname = path.join(pathname, '/index.html');
	}
	// 读取文件并返回
	fs.readFile(pathname, function(err, data) {
		// 捕获错误
		if (err) {
			res.setHeader('content-type', 'text/plain;charset=utf-8');
			res.end('抱歉，您读取的' + pathname + '不存在');
			return;
		}
		// 自适应Mime Type
		res.setHeader('content-type', MT[extName] + ';charset=utf-8');
		res.end(data);
	})
})
// 监听端口号
server.listen(3000);

原生ajax发送请求
html内容

<button id="get">发送get请求</button>
<button id="post">发送post请求</button>

原生Ajax发送get请求

get.onclick = function() {
	var xhr = null;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest(); 
	} else if (window.ActiveXObject) {
		xhr = new ActiveXObject('Microsoft.XMLHttp'); // IE
	}
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			// 将得到的json字符串解析为对象
			var obj = JSON.parse(xhr.responseText);
			// console.log(obj)
		}
	}
	xhr.open('get', '/login?username=xxx', true); // 调用open方法
	xhr.send(); // 调用send方法
}

原生Ajax发送post请求

// post请求
post.onclick = function() {
	var xhr = null;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		xhr = new ActiveXObject('Microsoft.XMLHttp');
	}
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			// 将得到的json字符串解析为对象
			var obj = JSON.parse(xhr.responseText);
			// console.log(obj);
		}
	}
	xhr.open('post', '/login', true); // 调用open方法
	xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
	xhr.send('username=xxx&password=123456'); // 调用send方法
}

jquery中发送ajax

// ajax发送 
$.ajax({
	url: '/login',  // 请求路径
	type: 'get/post', // 请求方式
	data: { username: 'xxx', password: 123456 }, // 发送请求携带的数据
	dataType: 'json',  // 返回的数据类型
	success: function(data) {
		console.log(data); // data 返回的数据
	}
})