发送ajax请求的步骤
第1步就是创建ajax对象
IE7+,Firefox,Opera, Chrome, Safari都支持原生的XHR对象
var xhr = new XMLHttpRequest();
第2步:连接服务器,使用open()方法
第3步:发送数据,使用send()方法
第4步:接收返回
下面用代码详细说明
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
if(window.XMLHttpRequest)
{
// IE7+,Firefox,Opera, Chrome, Safari
var oAjax = new XMLHttpRequest();//创建ajax对象
}
else//如果没有XMLHttpRequest,那就是IE6浏览器
{
// IE6
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
}
// 2.连接服务器
// open(方法、文件名、异步传输)
// 方法:
// 传输方式是get方式还是post方式。
// 文件名
// 告诉服务器要读哪个文件
// 异步传输
// 异步:多件事一件一件的做
// 同步:多件事情一起进行
// 但是js里面的同步和异步和现实的同步异步相反。
// 同步:多件事一件一件的做
// 异步:多件事情一起进行
// ajax天生是用来做异步的
oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是为了消除缓存,每次的t的值不一样。
// 3.发送请求,这里是get请求,请求参数在url中
oAjax.send();
// 4.接收返回
// 客户端和服务器端有交互的时候会调用onreadystatechange
oAjax.onreadystatechange=function()
{
// oAjax.readyState // 浏览器和服务器,进行到哪一步了。
// 0->(未初始化):还没有调用 open() 方法。
// 1->(载入):已调用 send() 方法,正在发送请求。
// 2->载入完成):send() 方法完成,已收到全部响应内容。
// 3->(解析):正在解析响应内容。
// 4->(完成):响应内容解析完成,可以在客户端调用。
if (oAjax.readyState==4)
{
if (oAjax.status==200) //判断是否成功,如果是200,就代表成功
{
//读取a.txt文件成功就弹出成功。后面加上oAjax.responseText会输出a.txt文本的内容
alert("成功"+oAjax.responseText);
}
else
{
alert("失败");
}
}
};
}
};
网友评论