Nodejs之Ajax
AJAX开发框架
AJAX实质上也是遵循B/S模式，所以这个框架基本的流程是：
对象初始化
发送请求
服务器接收
服务器返回
客户端接收
修改客户端页面内容。
只不过这个过程是异步的。
AJAX开发步骤
1.客户端事件发生，调用Javacsript函数编写的事件处理程序。
2.在事件处理程序中创建XMLHttpRequest对象
3.配置XMLHttpRequest对象
4.XMLHttpRequest对象发送一个异步HTTP请求到服务器
5.服务器程序接收请求，处理请求，返回响应
6.XMLHttpRequest对象调用callback()函数并处理结果
7.更新HTML
创建XMLHttpRequest对象的方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>账号：</label>
<input type="text"/>
<label>密码：</label>
<input type="password"/>
<button onclick="sendMessage()">注册</button>
<script>
//1.在客户端中用JS调用事件处理程序
function sendMessage(){
//2.创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest){//js Ajax兼容
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE
}
//3.打开连接
//method请求类型（get、post)；URL异步的请求地址；同步或者异步执行配置.这只是配置请求，并没有发起请求
xhr.open("method","url","同步或者异步执行配置");
//6 请求完成后，响应后所执行的函数；也就是响应数据给这个函数
xhr.onreadystatechange=function(){
//7 更新html数据
};
//4 发送请求；如果method是get方法，则send内配置NUll；如果是post方法，则send内配置的是请求的参数
xhr.send(null);
}
</script>
</body>
</html>
在JS第一次执行的时候，
xhr.onreadystatechange=function(){
//7 更新html数据
};这个函数并不会执行，等响应回来后才会执行，发生了一个非阻塞的请求，这个函数叫做回调函数callback()函数。
完全写好后，代码为：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>账号：</label>
<input type="text"/>
<label>密码：</label>
<input type="password"/>
<button onclick="sendMessage()">注册</button>
<script>
//1.在客户端中用JS调用事件处理程序
function sendMessage(){
//2.创建XMLHttpRequest对象
var xhr,a;
if(window.XMLHttpRequest){//js Ajax兼容
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE
}
//3.打开连接
//method请求类型（get、post)；URL异步的请求地址；同步或者异步执行配置.这只是配置请求，并没有发起请求
xhr.open("get","reg.do",true);//true代表异步 false代表同步
//6 请求完成后，响应后所执行的函数；也就是响应数据给这个函数
xhr.onreadystatechange=function(){
//7 更新html数据
a=xhr.responseText;//**会把从app.js中回来的数据放在这里
if(xhr.readyState==4&&xhr.status==200){//添加了这个的属性状态后，打印a就只有一次了
console.log(a)
}
};
//4 发送请求；如果method是get方法，则send内配置NUll；如果是post方法，则send内配置的是请求的参数
xhr.send(null);
// console.log(a);//这里的a是undefined,因为没有执行回调函数，先执行了打印a，所以就是undefined
}
</script>
</body>
</html>
