Ajax用来解决什么问题?
AJAX解决的问题就是“无刷新更新页面”,用传统的HTML表单方式进行页面的更新时,每次都要将请求提交到服务器,服务器返回后再重绘界面,这样界面就会经历:提交→变白→重新显示这样一个过程,用户体验非常差,使用AJAX则不会导致页面重新提交、刷新。
Ajax的技术核心是XMLHttpRequest对象(简称XHR);
XHR为向服务器发送请求和解析服务器响应提供了流畅的接口;能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据;
虽然名字中包含XML的成分,但Ajax通信鱼数据格式无关;这种技术就是无刷新页面即可从服务器取得数据,但不一定是XML数据;
使用Ajax发送请求需要如下几步:
1、创建XMLHttpRequest对象
2、准备发送
3、执行发送动作
4、指定回调函数
如下是一个简单的AJAX请求模板,后面将进行简单的封装以实现浏览器的兼容性
// 使用Ajax发送请求需要如下几步:
// 1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2、准备发送
xhr.open('get','./data.php?username='+username+'&password='+password,true); //username及password为需要请求或者提交的数据
// 3、执行发送动作
xhr.send(null);
// 4、指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
}
}
}
1.新建一个XMLHttpRequest对象
XMLHttpRequest不支持低版本的ie浏览器,可以使用ActiveXObject来支持对低版本的浏览器的兼容性;
我们将此进行简单的封装:
var xhr = null;
//判断浏览器的兼容性
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//标准
}else{
xhr = new ActiveXObject("Microsoft");//IE6
}
2.发送
使用XHR对象,要调用的第一个方法是open(),接收三个参数
参数一:请求方式(get获取数据;post提交数据)
参数二:请求地址URL
参数三:同步(true)或者异步(false)标志位,默认是true表示异步,false表示同步
说明:
1.URL相对于执行代码的当前页面(也可以是使用绝对路径);
2.调用open()方法并不会真正发送请求,而只是启动一个请求以备发送;
2.1 get请求方式
如果是get请求那么请求参数必须在url中传递, encodeURI()用来对中文参数进行编码,防止乱码
var param = 'username='+username+'&password='+password;
xhr.open('get','data.php?'+encodeURI(param),true); //get.php为自定义服务器数据(后面的php文件均为,将不再重复说明)
// 3、执行发送动作
xhr.send(null);//get请求这里需要添加null参数
2.2post请求方式
post请求参数通过send传递,不需要通过encodeURI()转码,必须设置请求头信息:
var param = 'username='+username+'&password='+password;
xhr.open('post','data.php',false);
// 3、执行发送动作
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);//post请求参数在这里传递,并且不需要转码
3.回调函数
函数调用的条件就是readyState状态发生变化,而onreadystatechange事件则是用来监听每次状态变化后的readyState的值,从而实现响应后的操作;
readyState的状态值:
1-----------表示已经发送了请求
2-----------浏览器已经收到了服务器响应的数据
3-----------正在解析数据
4-----------数据已经解析完成,可以使用了
通常我们支队readyState值为4的阶段感兴趣,因为这时所有数据都已经就绪;虽然服务器返回的数据已经可以使用了,但是这个数据不一定是正常的;
我们仍然需要通过Http状态码来判断,我们的响应是否成功;
http的常见状态码( *.status),例子中为 xhr.status
200表示响应成功
404没有找到请求的资源
500服务器端错误
我们通常通过200表判断服务器返回的数据是正常的,不是200的话表示数据是错误的
// 4、指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
此处未研究回调函数返回的数据格式,将在下一篇文章中进行详细分析XML与JSON格式数据;
4.总结
此处做个总结,以post请求方式,将整个Ajax请求过程串联起来:
html部分:
<form>
用户名:
<input type="text" name="username" id="username"><span id="info"></span>
<br> 密码:
<input type="text" name="password" id="password">
<input type="button" value="登录" id="btn">
</form>
js部分:
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
var uname = document.getElementById('username').value;
var pw = document.getElementById('password').value;
// 1、创建XMLHttpRequest对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); //标准
} else {
xhr = new ActiveXObject("Microsoft"); //IE6
}
// 2、准备发送
var param = 'username=' + uname + '&password=' + pw;
xhr.open('post', 'data.php', true);
// 3、执行发送动作
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(param); //post请求参数在这里传递,并且不需要转码
// 4、指定回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
}
}
}
</script>