Ajax 技术
作者：陈文龙
第1章 认识Ajax
1.1 初识 ajax
我们平常上网，不管是注册账号，还是浏览网页，其本质就是通过客户端向服务器发送请求，服务器接到请求后返回处理后的数据给客户端；
在我们之前学习代码中，向服务器提交数据典型的应用是就是 form 表单，其中的 action 就是我们提交数据的服务器端地址；
完成一个 form 表单；
当我们点击提交按钮时，页面就会跳转到服务器页面；
但是，我本不想让页面跳转，数据也能被发送到服务器端，同时，还可以接受服务器返回的数据；
当我注册一个网站的账号时，填写完用户名并没有点击提交，但是，用户名如果有重复，文本框的傍边便会提示我更换用户名；
类似的功能还有 验证短信的发送、百度搜索的关键字推举、无刷新的分页等等……
想要完成这些类似的功能实现，我们今天所要学习的ajax技术，就是核心技术；
ajax 也是技术名词的缩写：
Asynchronous [ə'sɪŋkrənəs; eɪ-] ：异步的；
JavaScript ：JavaScript语言
And ：和、与
XML ：数据传输格式
1998年微软公司（Microsoft）的Outlook Web Access第一次使用了ajax技术，允许客户端脚本发送HTTP请求，并随后集成在IE4.0中应用（XMLHTTP），到2005年，谷歌（Google）把Ajax成功应用于自家的多款Web系统中（Gmail邮箱、Google Map、Google 搜索建议），
从此Ajax被越来越多的人所接受…
客户端通过HTTP向服务器发送请求
1.2 快速入门
<body>
<form action="1-1-1.php" method="get">
<input type="text" name="names" value=""><br>
<input type="button" value="提交">
</form>
</body>
<script>
//获取DOM对象
var inp = document.getElementsByTagName('input');
//绑定点击事件
inp[1].onclick = function(){
//获取文本值
var v = inp[0].value;
//获取ajax对象
var xhr = new XMLHttpRequest();
//监听状态变化
xhr.onreadystatechange = function(){
//判断状态值
if(xhr.readyState == 4){
//获取服务器返回信息
alert(xhr.responseText);
}
}
//打开链接
xhr.open('get','/test');
//发送连接
xhr.send();
}
</script>
http.js
var fs = require('fs');
// 服务器模块
var http = require('http');
var server = http.createServer();
server.listen(8080,function(){
console.log('服务器启动成功,请访问：http://127.0.0.1:8080')
})
server.on('request',function(req,res){
var method = req.method;
var urls = require('url').parse(req.url);
if(method == 'GET'){
if(urls.pathname.indexOf('.html')>=0){
fs.readFile('.'+urls.pathname,function(err,data){
res.end(data);
})
}else if(urls.pathname == '/test'){
res.end('123')
}
// console.log(urls.pathname);
}else if(method == 'POST'){
}else{
res.end('err_method')
}
})
