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 οnclick="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 οnclick="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>