ajax工作方式
一、创建对象
XMLHttpRequest 对象用于在后台与服务器交换数据。
可以:
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
//1.创建Ajax对象
//非IE6
//加不加window,代表的是变量或属性
if (window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{//IE6
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
二、连接服务器
open(方法,文件名,传输方式)
同步:多件事一起 事情一个个来
异步:一件一件来 多件事一起
oAjax.open('Get','/Home/AAA',true);//true,异步
三、发送请求
oAjax.send();
四、接收数据
oAjax.readyState //浏览器和服务器,进行到哪一步了
0(未初始化)还没调用 open()方法
1(载入)已调用 send()方法,正在发送请求
2(载入完成) send()方法完成,已收到全部响应内容
3(解析)正在解析响应内容
4(完成)响应内容解析完成,可以在客户端调用了
oAjax.onreadystatechange = function () {
if (oAjax.readyState == 4)
{//读取完成
if (oAjax.status == 200)//成功
{
alert('成功');
}
else
{
alert('失败');
}};};
完整代码:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
oBtn.onclick = function () {
//1.创建Ajax对象
//非IE6
//加不加window,代表的是变量或属性
if (window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{//IE6
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//alert(oAjax);
//2.连接服务器
//open(方法,文件名,传输方式)
oAjax.open('Get','/Home/AAA',true);//异步
//同步:多件事一起 事情一个个来
//异步:一件一件来 多件事一起
//3.发送请求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange = function () {
//oAjax.readyState //浏览器和服务器,进行到哪一步了
//0(未初始化)还没调用 open()方法
//1(载入)已调用 send()方法,正在发送请求
//2(载入完成) send()方法完成,已收到全部响应内容
//3(解析)正在解析响应内容
//4(完成)响应内容解析完成,可以在客户端调用了
if (oAjax.readyState == 4)
{//读取完成
if (oAjax.status == 200)//成功
{
alert('成功');
}
else {
alert('失败');
}
};
};
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
</body>
</html>