AJAX

本文详细介绍了AJAX的工作原理及兼容性问题解决方法,包括原生JavaScript实现、jQuery简化用法以及如何处理POST请求。此外,还深入探讨了跨域问题的产生原因与解决方案,如JSONP跨域技术的应用。

AJAX 

Asynchronous JavaScript And XML

原生JS AJAX

AJAX兼容性(IE8+)

AJAX是浏览器支持的。

浏览器支持的方式是通过浏览器内部的构造函数:

    现代浏览器: window.XMLHttpRequest

    IE(8之前)浏览器: window.ActiveXObject

var xhr = null;
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if(window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHttp")
} else {
    console.log("不支持AJAX,请升级你的浏览器");
}

1. 初始化(加兼容性判断)

var xhr = null;
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if(window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHttp")
} else {
    console.log("不支持AJAX,请升级你的浏览器");
}

2. 设置onreadystatechange函数

该事件在xhr对象的readyState属性发生变化时触发

xhr.readyState:  本次ajax对象的状态,该属性值表示AJAX发送的生命周期

    0: 未初始化

    1: 调用open方法

    2: 响应头已经回来

    3: 解析了一部分数据(存在于响应正文里)

    4: 解析了全部数据 可以使用这些数据了

xhr.onreadystatechange = function() {
    //这个事件触发的条件是xhr.readyState属性值发生变化时触发。
}

3. 调用open方法

xhr.open(type, url, true);

    type: "http请求的类型" get、post等

    url: "等价于form的action属性 表示将本次请求发送到哪里去" 

    true: 表示是否以异步形式发送 true=异步 false=同步

xhr.open(type, url, true);

4. 调用send方法

xhr.send(data);

    data::"向请求正文中填写的数据"   以k=v&k1=v1的形式书写 

                如果是get请求 没必要写data 可以直接书写null

xhr.send(data);

AJAX综合步骤:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
     do something…… 
   }
} 
xhr.open(type, url, true);
xhr.send(data);

jQuery AJAX

get请求

$.get(url, data, callback);

    url: url字符串    

    data: 携带的数据 可以是字符串 可以是对象 可以省略

    callback: 回调函数

        callback有一个形参,叫data。它就是本次传递回来的数据

$.get("/checkname", data, function(data) {
	console.log(data)
})

post请求

$.post(url, data, callback);

    url: url字符串    

    data: 携带的数据 可以是字符串 可以是对象 可以省略

    callback: 回调函数

        callback有一个形参,叫data。它就是本次传递回来的数据

$.post("/checkname", data, function(data) {
	console.log(data)
})

综合请求

$.ajax(options);

    options: 配置对象

        url: url字符串

        type:  请求类型

        data:  携带的数据

        dataType: 返回值的类型

        success: 成功之后的回调函数

$.ajax({
	url: "/checkname",
	type: "get",
	data: {
		username: "张三"
	},
	dataType: "json",
	success: function(data) {
		console.log(data);
	}
})


自定义封装原生JS的AJAX

有一点注意:

表单post请求提交时,


表单ajax post请求时,


因为表单出现的早,所以后台服务器都能够处理表单post请求提交的数据。

因为后台能够处理表单提交的ajax,所以我们决定将ajax提交的数据伪装成表单提交的数据。

更改方式:

//在open之后,send之前
xhr.open("post", url , true);
// 将ajax提交的数据 伪装成表单提交的
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// 调用send方法
xhr.send(str);
var ajax = {
	get: function (url, data, callback) {
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else if (windwo.ActiveXObject) {
			xhr = new ActiveXObject(Microsoft.XMLHttp);
		} else {
			alert("不支持AJAX");
		}

		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 ) {
				var obj =  JSON.parse(xhr.responseText);
				callback(obj)
			}
		}
		var data_str = "";
		if (typeof data === "string") {
			data_str = data;
		}
		if (typeof data === "object") {
			for (var i in data) {
				if(data[i] instanceof Array) {
					for(var j = 0; j < data[i].length; j++) {
						data_str += i + "=" + data[i][j] + &;
					}
				} else {
					data_str += i + "=" + data[i] + "&";
				}
			}
			data_str = data_str.slice(0, -1);
		}
		xhr.open("get", url + "?" + data_str, true);
		xhr.send(null); 
	},
	post: function (url, data, callback) {
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else if (windwo.ActiveXObject) {
			xhr = new ActiveXObject(Microsoft.XMLHttp);
		} else {
			alert("不支持AJAX");
		}

		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 ) {
				var obj =  JSON.parse(xhr.responseText);
				callback(obj)
			}
		}
		var data_str = "";
		if (typeof data === "string") {
			data_str = data;
		}
		if (typeof data === "object") {
			for (var i in data) {
				data_str += i + "=" + data[i] + "&";
			}
			data_str = data_str.slice(0, -1);
		}
		xhr.open("post", url, true);
		xhr.send(data_str); 
	}
}


cookie 和 session

cookie

登录 使用了一个叫做“cookie”的小标记。它用来记录状态。

流程:

当用户填写完用户名密码等信息时,点击提交。此时一个http携带着数据到达服务器。

服务器接受到数据,在响应头中设置一个set-cookie指令,里面包含着你这一次的登录信息。

下一次,用户点击任何请求交互,都会发出http请求,此时,cookie中的数据就被带到服务器上了。服务器检测cookie标记就能够知道该用户是否已经登录过。

未登录之前    请求头和响应头中都没有任何cookie相关


点击登录提交之后    响应头中多了一个set-cookie的值.请求头中还没有该值

当再次访问其它url时    请求头中有cookie


当用户第一次登录之后,后端设置了set-cookie,前端浏览器在之后的每一次请求中,都携带了cookie。后端就可以识别cookie,进而识别内部的数据,进而识别用户身份。登录状态就模拟成功了。

后端设置cookie

res.setHeader("set-cookie", ["username=" +  one.username, "password=" + one.password]);

后端获取cookie

// 获取cookie
var cookie = req.headers.cookie;
var cookie_username = qs.parse(cookie, ";").username;
var cookie_password = qs.parse(cookie, ";").password;

server.js完整代码

var http = require("http");
var url = require("url");
var fs = require("fs");
var qs = require("querystring");

// 定义一个MIMEType类型对象
var MIMEType = {  
	"*"	      :"application/octet-stream",
	"323"	    :"text/h323",
	"acx"	    :"application/internet-property-stream",
	"ai"	    :"application/postscript",
	"aif"	    :"audio/x-aiff",
	"aifc"    :"audio/x-aiff",
	"aiff"    :"audio/x-aiff",
	"asf"	    :"video/x-ms-asf",
	"asr"	    :"video/x-ms-asf",
	"asx"	    :"video/x-ms-asf",
	"au"	    :"audio/basic",
	"avi"	    :"video/x-msvideo",
	"axs"	    :"application/olescript",
	"bas"	    :"text/plain",
	"bcpio"	  :"application/x-bcpio",
	"bin"	    :"application/octet-stream",
	"bmp"	    :"image/bmp",
	"c"	      :"text/plain",
	"cat"	    :"application/vnd.ms-pkiseccat",
	"cdf"	    :"application/x-cdf",
	"cer"	    :"application/x-x509-ca-cert",
	"class"	  :"application/octet-stream",
	"clp"	    :"application/x-msclip",
	"cmx"	    :"image/x-cmx",
	"cod"	    :"image/cis-cod",
	"cpio"	  :"application/x-cpio",
	"crd"	    :"application/x-mscardfile",
	"crl"	    :"application/pkix-crl",
	"crt"	    :"application/x-x509-ca-cert",
	"csh"	    :"application/x-csh",
	"css"	    :"text/css",
	"dcr"	    :"application/x-director",
	"der"	    :"application/x-x509-ca-cert",
	"dir"	    :"application/x-director",
	"dll"	    :"application/x-msdownload",
	"dms"	    :"application/octet-stream",
	"doc"	    :"application/msword",
	"dot"	    :"application/msword",
	"dvi"	    :"application/x-dvi",
	"dxr"	    :"application/x-director",
	"eps"	    :"application/postscript",
	"etx"	    :"text/x-setext",
	"evy"	    :"application/envoy",
	"exe"	    :"application/octet-stream",
	"fif"	    :"application/fractals",
	"flr"	    :"x-world/x-vrml",
	"gif"	    :"image/gif",
	"gtar"	  :"application/x-gtar",
	"gz"	    :"application/x-gzip",
	"h"	      :"text/plain",
	"hdf"	    :"application/x-hdf",
	"hlp"	    :"application/winhlp",
	"hqx"	    :"application/mac-binhex40",
	"hta"	    :"application/hta",
	"htc"	    :"text/x-component",
	"htm"	    :"text/html",
	"html"	  :"text/html",
	"htt"	    :"text/webviewhtml",
	"ico"	    :"image/x-icon",
	"ief"	    :"image/ief",
	"iii"	    :"application/x-iphone",
	"ins"	    :"application/x-internet-signup",
	"isp"	    :"application/x-internet-signup",
	"jfif"	  :"image/pipeg",
	"jpe"	    :"image/jpeg",
	"jpeg"	  :"image/jpeg",
	"jpg"	    :"image/jpeg",
	"js"	    :"application/x-javascript",
	"latex"	  :"application/x-latex",
	"lha"	    :"application/octet-stream",
	"lsf"	    :"video/x-la-asf",
	"lsx"	    :"video/x-la-asf",
	"lzh"	    :"application/octet-stream",
	"m13"	    :"application/x-msmediaview",
	"m14"	    :"application/x-msmediaview",
	"m3u"	    :"audio/x-mpegurl",
	"man"	    :"application/x-troff-man",
	"mdb"	    :"application/x-msaccess",
	"me"	    :"application/x-troff-me",
	"mht"	    :"message/rfc822",
	"mhtml"	  :"message/rfc822",
	"mid"	    :"audio/mid",
	"mny"	    :"application/x-msmoney",
	"mov"	    :"video/quicktime",
	"movie"	  :"video/x-sgi-movie",
	"mp2"	    :"video/mpeg",
	"mp3"	    :"audio/mpeg",
	"mpa"	    :"video/mpeg",
	"mpe"	    :"video/mpeg",
	"mpeg"	  :"video/mpeg",
	"mpg"	    :"video/mpeg",
	"mpp"	    :"application/vnd.ms-project",
	"mpv2"	  :"video/mpeg",
	"ms"	    :"application/x-troff-ms",
	"mvb"	    :"application/x-msmediaview",
	"nws"	    :"message/rfc822",
	"oda"	    :"application/oda",
	"p10"	    :"application/pkcs10",
	"p12"	    :"application/x-pkcs12",
	"p7b"	    :"application/x-pkcs7-certificates",
	"p7c"	    :"application/x-pkcs7-mime",
	"p7m"	    :"application/x-pkcs7-mime",
	"p7r"	    :"application/x-pkcs7-certreqresp",
	"p7s"	    :"application/x-pkcs7-signature",
	"pbm"	    :"image/x-portable-bitmap",
	"pdf"	    :"application/pdf",
	"pfx"	    :"application/x-pkcs12",
	"pgm"	    :"image/x-portable-graymap",
	"pko"	    :"application/ynd.ms-pkipko",
	"pma"	    :"application/x-perfmon",
	"pmc"	    :"application/x-perfmon",
	"pml"	    :"application/x-perfmon",
	"pmr"	    :"application/x-perfmon",
	"pmw"	    :"application/x-perfmon",
	"pnm"	    :"image/x-portable-anymap",
	"pot"	    :"application/vnd.ms-powerpoint",
	"ppm"	    :"image/x-portable-pixmap",
	"pps"	    :"application/vnd.ms-powerpoint",
	"ppt"	    :"application/vnd.ms-powerpoint",
	"prf"	    :"application/pics-rules",
	"ps"	    :"application/postscript",
	"pub"	    :"application/x-mspublisher",
	"qt"	    :"video/quicktime",
	"ra"	    :"audio/x-pn-realaudio",
	"ram"	    :"audio/x-pn-realaudio",
	"ras"	    :"image/x-cmu-raster",
	"rgb"	    :"image/x-rgb",
	"rmi"	    :"audio/mid http://www.dreamdu.com",
	"roff"	  :"application/x-troff",
	"rtf"	    :"application/rtf",
	"rtx"	    :"text/richtext",
	"scd"	    :"application/x-msschedule",
	"sct"	    :"text/scriptlet",
	"setpay"	:"application/set-payment-initiation",
	"setreg"	:"application/set-registration-initiation",
	"sh"	    :"application/x-sh",
	"shar"	  :"application/x-shar",
	"sit"     :"application/x-stuffit",
	"snd"     :"audio/basic",
	"spc"     :"application/x-pkcs7-certificates",
	"spl"     :"application/futuresplash",
	"src"     :"application/x-wais-source",
	"sst"     :"application/vnd.ms-pkicertstore",
	"stl"     :"application/vnd.ms-pkistl",
	"stm"     :"text/html",
	"svg"     :"image/svg+xml",
	"sv4cpio"	:"application/x-sv4cpio",
	"sv4crc"	:"application/x-sv4crc",
	"swf"	    :"application/x-shockwave-flash",
	"t"	      :"application/x-troff",
	"tar"	    :"application/x-tar",
	"tcl"	    :"application/x-tcl",
	"tex"	    :"application/x-tex",
	"texi"	  :"application/x-texinfo",
	"texinfo"	:"application/x-texinfo",
	"tgz"	    :"application/x-compressed",
	"tif"	    :"image/tiff",
	"tiff"	  :"image/tiff",
	"tr"	    :"application/x-troff",
	"trm"	    :"application/x-msterminal",
	"tsv"	    :"text/tab-separated-values",
	"txt"	    :"text/plain",
	"uls"	    :"text/iuls",
	"ustar"	  :"application/x-ustar",
	"vcf"	    :"text/x-vcard",
	"vrml"	  :"x-world/x-vrml",
	"wav"   	:"audio/x-wav",
	"wcm"     :"application/vnd.ms-works",
	"wdb"     :"application/vnd.ms-works",
	"wks"     :"application/vnd.ms-works",
	"wmf"     :"application/x-msmetafile",
	"wps"     :"application/vnd.ms-works",
	"wri"     :"application/x-mswrite",
	"wrl"     :"x-world/x-vrml",
	"wrz"     :"x-world/x-vrml",
	"xaf"     :"x-world/x-vrml",
	"xbm"     :"image/x-xbitmap",
	"xla"     :"application/vnd.ms-excel",
	"xlc"     :"application/vnd.ms-excel",
	"xlm"     :"application/vnd.ms-excel",
	"xls"     :"application/vnd.ms-excel",
	"xlt"     :"application/vnd.ms-excel",
	"xlw"     :"application/vnd.ms-excel",
	"xof"     :"x-world/x-vrml",
	"xpm"     :"image/x-xpixmap",
	"xwd"     :"image/x-xwindowdump",
	"z"	      :"application/x-compress",
	"zip"     :"application/zip"
}

//临时数据库
var userArr = [
	{username: "zhang", password: "123"},
	{username: "li", password: "123"}
];

var server = http.createServer(function (req, res) {
	var url_obj = url.parse(req.url, true);
	//请求的pathname部分 /index.html
	var pathname = url_obj.pathname;
	//请求方式
	var method = req.method.toLowerCase();
	//请求的query部分 username=&password=
	var query = url_obj.query;
	// 获取cookie
	var cookie = req.headers.cookie;
	var cookie_username = qs.parse(cookie, ";").username;
	var cookie_password = qs.parse(cookie, ";").password;

	if (method === "post" && pathname=== "/regist") {
		res.setHeader("content-type","text/plain;charset=utf-8");
		var data_str = ""; 
		req.on("data", function (data_chunk) {
			console.log("一次加载数据完毕");
			data_str += data_chunk;
		})
		req.on("end", function () {
			console.log("所有加载数据完毕");
			var one = qs.parse(data_str);
			for (var i = 0; i < userArr.length; i++) {
				if (userArr[i].username === one.username) {
					var obj = {
						error : 1,
						data : "用户名已经被占用"
					}
					res.end(JSON.stringify(obj));
					return;
				} 
			}
			var obj = {
				error : 0,
				data : "注册成功"
			}		
			userArr.push({
				username: one.username,
				password: one.password
			});
			console.log(userArr);
			res.end(JSON.stringify(obj));
		})
		return;
	}

	if (method === "post" && pathname=== "/login") {
		var data_str = ""; 
		req.on("data", function (data_chunk) {
			console.log("一次加载数据完毕");
			data_str += data_chunk;
		})
		req.on("end", function () {
			console.log("所有加载数据完毕");
			var one = qs.parse(decodeURIComponent(data_str));
			for (var i = 0; i < userArr.length; i++) {
				if (userArr[i].username === one.username && userArr[i].password === one.password) {
					//这边不给前端返回数据了 直接成功后后端给跳转页面
					fs.readFile("html/welcome.html", function (err, data) {
						if (err) {
							res.setHeader("content-type","text/plain;charset=utf-8");
							res.end("读取welcome.html失败");
							return;
						}
						//设置cookie
						res.setHeader("content-type", "text/html;charset=utf-8");
						res.setHeader("Set-Cookie", ["username=" +  one.username, "password=" + one.password]);
						res.end(data);
					})
					return;
				} 
			}
			var obj = {
				error : 1,
				data : "登录失败"
			}
			res.setHeader("content-type","text/plain;charset=utf-8");
			res.end(JSON.stringify(obj));
		})
		return;
	}

	if (method === "get" && pathname=== "/checkname") {
		for (var i = 0; i < userArr.length; i++) {
			if (userArr[i].username === query.username) {
				var obj = {
					error : 0,
					data : "用户名存在"
				}
				res.setHeader("content-type","text/plain;charset=utf-8");
				res.end(JSON.stringify(obj));
				return;
			}
		}
		var obj = {
			error : 1,
			data : "用户名不存在"
		}
		res.setHeader("content-type","text/plain;charset=utf-8");
		res.end(JSON.stringify(obj));
		return;
	}

	if (pathname=== "/html/welcome.html") {
		if (cookie_username) {
			fs.readFile("html/welcome.html", function(err, data) {
				res.setHeader("content-type", "text/html;charset=utf-8");
				res.end(data);
			});
			return;
		} else {
			res.setHeader("content-type", "text/plain;charset=utf-8");
			// 没有登陆 
			res.end("对不起,未登录");
			return;
		}
	}

	//静态服务器
	fs.readFile("." + pathname, function (err, data) {
		if (err) {
			res.setHeader("content-type","text/plain;charset=utf-8");
			res.end("抱歉," + pathname + "文件不存在");
			return;
		}
		var fileformat = pathname.split(".").pop();
		res.setHeader("content-type", MIMEType[fileformat] + ";charset=utf-8");
		res.end(data);
	})
})

server.listen(3000);





表单的序列化

当表单提交时,不管是post请求也好,get请求也好,数据都被自动组成k=v&k1=v1的形式携带。ajax提交表单数据的时候,携带的数据需要自己组装。 我们把这个过程称之为表单的序列化。如果表单多了,那么人为拼接很麻烦。 而且万一DOM结构更改,需要改变代码。

表单序列化是将 有name属性的表单控件的选中值 按照k=v&k1=v1的形式书写成一段字符串


jQuery的序列化 

$("form").serialize()  => k=v&k1=v1

自定义表单序列化serialize函数

1.  没有书写name属性,表单序列化数据无法添加进来
2.  有些表单控件屏蔽掉了,就算写了name属性,也无法添加进来 比如 input[type="button"]
3.  form.elements 获取form元素中所有的表单控件
4.  form.elements[i].type 获取form元素中表单控件的类型 select的type是select-one
5.  form.elements[i].name 获取form元素中表单控件的name
6.  form.elements[i].value 获取form元素中表单控件的value
7.  form.elements[i].checked 获取form元素中radio checkbox表单控件选中值
function serialize (form) {
	var param_str = "";
	//获取form中的控件
	var elements = form.elements;
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].type === "text" || elements[i].type === "password" || elements[i].type === "select-one") {
			param_str += elements[i].name + "=" +elements[i].value + "&";
		} else if (elements[i].type === "radio" && elements[i].checked) {
			param_str += elements[i].name + "=" +elements[i].value + "&";
		} else if (elements[i].type === "checkbox" && elements[i].checked) {
			param_str += elements[i].name + "=" +elements[i].value + "&";
		} else {

		}
	}
	return param_str = param_str.slice(0, -1);
}


跨域

有两个服务器在互联网上,服务器A,服务器B。

访问服务器A得到一个页面a。 从该a页面发出一个http请求,如果请求的是A的内容,这是允许的,因为a的根在A上。但是如果发送的http请求,请求的是B服务器上的内容。这就是跨域。

域名、端口号、协议 只要有一个不同就是跨域。

同源策略

所谓的同源策略与跨域其实是一回事。 该策略属于安全层面的策略。

不跨域就是同源,跨域就是不同源。

AJAX不能跨域,静态资源不受限制。

jsonp跨域

JSONP原理: 利用script标签不受同源策略影响,并且还能够执行代码的特点。

返回的是函数的执行。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript" src="js/ickt.js"></script>
	<script type="text/javascript">
		// 定义jsonp方法
		function jsonp(url, data, callback) {
			// 组织data成为字符串
			var str = "";
			for(var i in data) {
				str += i + "=" + data[i] + "&";
			}
			str = str.slice(0, -1);
			// 把callback暴露到全局中
			window[data.callbackname] = callback;
			// 因为利用的script标签 所以我们要创建script标签
			var script = document.createElement("script");
			// 设置src
			script.src = url + "?" + str;
			// 没上树 就不会发请求 这是与img标签不一样的地方
			document.body.appendChild(script);
			script.onload = function() {
				document.body.removeChild(script);
				delete window[data.callbackname];
			}
		}


		// 调用jsonp方法
		jsonp("http://localhost:3000/checkName", {username: "wanglaowu", callbackname: "ccc"}, function(data) {
			console.log(data);
		});
	</script>
</body>
</html>
//server.js文件
// 引入http
var http = require("http");
// 引入url
var url = require("url");
// 引入fs
var fs = require("fs");
// 引入querystring
var qs = require("querystring");


// 定义MimeType对象
var MT = {
	"*"	      :"application/octet-stream",
	"323"	    :"text/h323",
	"acx"	    :"application/internet-property-stream",
	"ai"	    :"application/postscript",
	"aif"	    :"audio/x-aiff",
	"aifc"    :"audio/x-aiff",
	"aiff"    :"audio/x-aiff",
	"asf"	    :"video/x-ms-asf",
	"asr"	    :"video/x-ms-asf",
	"asx"	    :"video/x-ms-asf",
	"au"	    :"audio/basic",
	"avi"	    :"video/x-msvideo",
	"axs"	    :"application/olescript",
	"bas"	    :"text/plain",
	"bcpio"	  :"application/x-bcpio",
	"bin"	    :"application/octet-stream",
	"bmp"	    :"image/bmp",
	"c"	      :"text/plain",
	"cat"	    :"application/vnd.ms-pkiseccat",
	"cdf"	    :"application/x-cdf",
	"cer"	    :"application/x-x509-ca-cert",
	"class"	  :"application/octet-stream",
	"clp"	    :"application/x-msclip",
	"cmx"	    :"image/x-cmx",
	"cod"	    :"image/cis-cod",
	"cpio"	  :"application/x-cpio",
	"crd"	    :"application/x-mscardfile",
	"crl"	    :"application/pkix-crl",
	"crt"	    :"application/x-x509-ca-cert",
	"csh"	    :"application/x-csh",
	"css"	    :"text/css",
	"dcr"	    :"application/x-director",
	"der"	    :"application/x-x509-ca-cert",
	"dir"	    :"application/x-director",
	"dll"	    :"application/x-msdownload",
	"dms"	    :"application/octet-stream",
	"doc"	    :"application/msword",
	"dot"	    :"application/msword",
	"dvi"	    :"application/x-dvi",
	"dxr"	    :"application/x-director",
	"eps"	    :"application/postscript",
	"etx"	    :"text/x-setext",
	"evy"	    :"application/envoy",
	"exe"	    :"application/octet-stream",
	"fif"	    :"application/fractals",
	"flr"	    :"x-world/x-vrml",
	"gif"	    :"image/gif",
	"gtar"	  :"application/x-gtar",
	"gz"	    :"application/x-gzip",
	"h"	      :"text/plain",
	"hdf"	    :"application/x-hdf",
	"hlp"	    :"application/winhlp",
	"hqx"	    :"application/mac-binhex40",
	"hta"	    :"application/hta",
	"htc"	    :"text/x-component",
	"htm"	    :"text/html",
	"html"	  :"text/html",
	"htt"	    :"text/webviewhtml",
	"ico"	    :"image/x-icon",
	"ief"	    :"image/ief",
	"iii"	    :"application/x-iphone",
	"ins"	    :"application/x-internet-signup",
	"isp"	    :"application/x-internet-signup",
	"jfif"	  :"image/pipeg",
	"jpe"	    :"image/jpeg",
	"jpeg"	  :"image/jpeg",
	"jpg"	    :"image/jpeg",
	"js"	    :"application/x-javascript",
	"latex"	  :"application/x-latex",
	"lha"	    :"application/octet-stream",
	"lsf"	    :"video/x-la-asf",
	"lsx"	    :"video/x-la-asf",
	"lzh"	    :"application/octet-stream",
	"m13"	    :"application/x-msmediaview",
	"m14"	    :"application/x-msmediaview",
	"m3u"	    :"audio/x-mpegurl",
	"man"	    :"application/x-troff-man",
	"mdb"	    :"application/x-msaccess",
	"me"	    :"application/x-troff-me",
	"mht"	    :"message/rfc822",
	"mhtml"	  :"message/rfc822",
	"mid"	    :"audio/mid",
	"mny"	    :"application/x-msmoney",
	"mov"	    :"video/quicktime",
	"movie"	  :"video/x-sgi-movie",
	"mp2"	    :"video/mpeg",
	"mp3"	    :"audio/mpeg",
	"mpa"	    :"video/mpeg",
	"mpe"	    :"video/mpeg",
	"mpeg"	  :"video/mpeg",
	"mpg"	    :"video/mpeg",
	"mpp"	    :"application/vnd.ms-project",
	"mpv2"	  :"video/mpeg",
	"ms"	    :"application/x-troff-ms",
	"mvb"	    :"application/x-msmediaview",
	"nws"	    :"message/rfc822",
	"oda"	    :"application/oda",
	"p10"	    :"application/pkcs10",
	"p12"	    :"application/x-pkcs12",
	"p7b"	    :"application/x-pkcs7-certificates",
	"p7c"	    :"application/x-pkcs7-mime",
	"p7m"	    :"application/x-pkcs7-mime",
	"p7r"	    :"application/x-pkcs7-certreqresp",
	"p7s"	    :"application/x-pkcs7-signature",
	"pbm"	    :"image/x-portable-bitmap",
	"pdf"	    :"application/pdf",
	"pfx"	    :"application/x-pkcs12",
	"pgm"	    :"image/x-portable-graymap",
	"pko"	    :"application/ynd.ms-pkipko",
	"pma"	    :"application/x-perfmon",
	"pmc"	    :"application/x-perfmon",
	"pml"	    :"application/x-perfmon",
	"pmr"	    :"application/x-perfmon",
	"pmw"	    :"application/x-perfmon",
	"pnm"	    :"image/x-portable-anymap",
	"pot"	    :"application/vnd.ms-powerpoint",
	"ppm"	    :"image/x-portable-pixmap",
	"pps"	    :"application/vnd.ms-powerpoint",
	"ppt"	    :"application/vnd.ms-powerpoint",
	"prf"	    :"application/pics-rules",
	"ps"	    :"application/postscript",
	"pub"	    :"application/x-mspublisher",
	"qt"	    :"video/quicktime",
	"ra"	    :"audio/x-pn-realaudio",
	"ram"	    :"audio/x-pn-realaudio",
	"ras"	    :"image/x-cmu-raster",
	"rgb"	    :"image/x-rgb",
	"rmi"	    :"audio/mid http://www.dreamdu.com",
	"roff"	  :"application/x-troff",
	"rtf"	    :"application/rtf",
	"rtx"	    :"text/richtext",
	"scd"	    :"application/x-msschedule",
	"sct"	    :"text/scriptlet",
	"setpay"	:"application/set-payment-initiation",
	"setreg"	:"application/set-registration-initiation",
	"sh"	    :"application/x-sh",
	"shar"	  :"application/x-shar",
	"sit"     :"application/x-stuffit",
	"snd"     :"audio/basic",
	"spc"     :"application/x-pkcs7-certificates",
	"spl"     :"application/futuresplash",
	"src"     :"application/x-wais-source",
	"sst"     :"application/vnd.ms-pkicertstore",
	"stl"     :"application/vnd.ms-pkistl",
	"stm"     :"text/html",
	"svg"     :"image/svg+xml",
	"sv4cpio"	:"application/x-sv4cpio",
	"sv4crc"	:"application/x-sv4crc",
	"swf"	    :"application/x-shockwave-flash",
	"t"	      :"application/x-troff",
	"tar"	    :"application/x-tar",
	"tcl"	    :"application/x-tcl",
	"tex"	    :"application/x-tex",
	"texi"	  :"application/x-texinfo",
	"texinfo"	:"application/x-texinfo",
	"tgz"	    :"application/x-compressed",
	"tif"	    :"image/tiff",
	"tiff"	  :"image/tiff",
	"tr"	    :"application/x-troff",
	"trm"	    :"application/x-msterminal",
	"tsv"	    :"text/tab-separated-values",
	"txt"	    :"text/plain",
	"uls"	    :"text/iuls",
	"ustar"	  :"application/x-ustar",
	"vcf"	    :"text/x-vcard",
	"vrml"	  :"x-world/x-vrml",
	"wav"   	:"audio/x-wav",
	"wcm"     :"application/vnd.ms-works",
	"wdb"     :"application/vnd.ms-works",
	"wks"     :"application/vnd.ms-works",
	"wmf"     :"application/x-msmetafile",
	"wps"     :"application/vnd.ms-works",
	"wri"     :"application/x-mswrite",
	"wrl"     :"x-world/x-vrml",
	"wrz"     :"x-world/x-vrml",
	"xaf"     :"x-world/x-vrml",
	"xbm"     :"image/x-xbitmap",
	"xla"     :"application/vnd.ms-excel",
	"xlc"     :"application/vnd.ms-excel",
	"xlm"     :"application/vnd.ms-excel",
	"xls"     :"application/vnd.ms-excel",
	"xlt"     :"application/vnd.ms-excel",
	"xlw"     :"application/vnd.ms-excel",
	"xof"     :"x-world/x-vrml",
	"xpm"     :"image/x-xpixmap",
	"xwd"     :"image/x-xwindowdump",
	"z"	      :"application/x-compress",
	"zip"     :"application/zip"
}
 

// 创建服务器
var server = http.createServer(function(req, res) {
	// 使用url解析req.url 获取pathname部分进行路径匹配
	var url_obj = url.parse(req.url, true);
	// 获取pathname部分
	var pathname = url_obj.pathname;
	// 获取query部分
	var query = url_obj.query;
	// 获取请求方式
	var method = req.method.toLowerCase();
 	// 匹配/checkName接口
 	if(pathname === "/checkName" && method === "get") {
 		// 定义callbackname
 		var callbackname = query.callbackname;
 		// 定义对象
 		var json = {
 			error: 0,
 			data: "可以注册"
 		};
 		// JSONP响应
 		res.end(callbackname + "(" + JSON.stringify(json) + ")");
 		// 正常接口响应
 		// res.end(JSON.stringify(json));

 		return;
 	}

	// 静态文件功能
	fs.readFile("." + pathname, function(err, data) {
		// 如果读取失败
		if(err) {
			// 为了避免乱码 设置响应头
			res.setHeader("content-type", "text/plain;charset=utf-8");
			// 告知前端 没有该文件
			res.end("抱歉,您读取的" + pathname + "不存在");
			return;
		}
		// 设置响应头 关键是MimeType类型
		// 获取后缀名
		var extName = pathname.split(".").pop();
		// 设置响应头
		res.setHeader("content-type", MT[extName] + ";charset=utf-8");
		// 把读取到的文件返回
		res.end(data);
	})
})
// 监听端口号
server.listen(3000);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值