//原生js写ajax就像打电话
//打电话分下面4步
//1.拿出手机
//2.拨号
//3.说话
//4.听对方说话
//ajax也分下面4步
//1.创建ajax对象
//2.连接到服务器
//3.发送请求（告诉服务器我要什么文件）
//4.接收返回值
下面是原生js写ajax的具体写法
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
//1.创建ajax对象
//只兼容非ie6的浏览器，在ie6浏览器上运行会提示没有被定义
//var oAjax = new XMLHttpRequest();//这才是ajax实际的请求
//alert(oAjax);
//ie6浏览器下按照下面方法写,但是在别的浏览器中不能用，会报错。
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//alert(oAjax);
//鉴于上面出现的问题，可以采取下面的方法解决，用if判断是否为IE6浏览器
if(window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6浏览器。()里面加window的原因下面会有描述。
{
var oAjax = new XMLHttpRequest();//创建ajax对象
}
else//如果没有XMLHttpRequest，那就是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.发送请求
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，就代表成功
{
alert("成功"+oAjax.responseText);//读取a.txt文件成功就弹出成功。后面加上oAjax.responseText会输出a.txt文本的内容
}
else
{
alert("失败");
}
}
};
}
};
/*//上面if里面需要些window的原因
//js里面的变量和属性
var a = 12;
alert(a);//页面上弹出12很正常，而实际上输出的是下面的写法，是属于window的，只是window能省就省了。
alert(window.a);//输出结果是一样的
window.alert(window.a);
//想a这种全局变量实际上是winow的一个属性。
//如果不定义一个变量a直接像下面那样输出a
alert(a)//系统会报错，而不是undefind，因为没有定义变量a。
alert(window.a);//如果是这样写，系统就不会报错了，会显示undefind。
//出现上面的原因是因为直接写a从根上就找不到a，而前面加上window只是找不到window的属性a了。*/
但是，不能每次用ajax的时候都写那么多代码，要把这段ajax代码封装起来，方便使用。
封装ajax
//最后把代码封装起来,封装起来以后，要给这个函数加上一个参数url.参数是为了替换要读取的文件名
function ajax(url,fnSucc)
{
if(window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
}
oAjax.open("GET",url,true);//把要读取的参数的传过来。
oAjax.send();
oAjax.onreadystatechange=function()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
fnSucc(oAjax.responseText);//成功的时候调用这个方法
}
else
{
if(fnfiled)
{
fnField(oAjax.status);
}
}
}
};
}
将封装的ajax调用
//引用封装的ajax文件window.onload=function()
{
varoBtn = document.getElementById("btn1");
oBtn.onclick =function()
{
ajax('a.txt',function(str){//读取a.txt文件里面的内容alert(str);//将读取的内容输出 })
}
};
网友评论