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);