Ajax日记

时间:2023-03-08 16:53:41
Ajax日记

简要讲Ajax 的内容归纳为博客。

AJAX能且仅能从服务器上读取文件,我们使用ajax的时候分为以下几个步骤:

1、  创建ajax对象

2、  链接服务器

3、  发送请求

4、  接收返回值

下面是详细实现过程

 <!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<title>ajax</title>
<script type="text/javascript">
window.onload = function(){
var obtn1 = document.getElementById('btn1');
obtn1.onclick = function(){
//1、创建ajax对象
//var oAjax = new XMLHttpRequest();//非IE6
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6
//兼容写法
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}
else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、链接服务器
//open(方法,url,是否异步)
//同步:一件件事情做。异步:多件事情一起做。
oAjax.open("GET","like.txt",true);
//3、发送请求
oAjax.send();
//4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成,而当oAjax.status == 200时,表示接收数据成功
oAjax.onreadystatechange = function(){
if(oAjax.readyState == 4){
if(oAjax.status == 200){
alert("成功"+oAjax.responseText);
}
else{
alert("失败");
}
}
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="读取文件" />
</body>
</html>

以上过程分四步在服务器上读取了like.txt中的文件

同样的方法可以读取josn文件和XML文件

下面是将以上内容封装为函数的代码,可以直接用

 function ajax(url,fnSucess,fnFaild){
//1、创建ajax对象
//var oAjax = new XMLHttpRequest();//非IE6
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6
//兼容写法
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}
else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、链接服务器
//open(方法,url,是否异步)
//同步:一件件事情做。异步:多件事情一起做。
oAjax.open("GET",url,true);
//3、发送请求
oAjax.send();
//4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成,而当oAjax.status == 200时,表示接收数据成功
oAjax.onreadystatechange = function(){
if(oAjax.readyState == 4){
if(oAjax.status == 200){
alert("成功"+oAjax.responseText);
fnSucess(oAjax.responseText);
}
else{
fnFaild();
}
}
}
}

函数接收三个参数 :第一个参数为url,请求的服务器地址。第二个参数为fnSucess函数,当请求并接收数据成功的时候执行该函数,该函数接收一个参数,该参数为接收的文件字符串。第三个参数为fnFaild()函数,当请求数据失败的时候,执行该函数。

整个Ajax说的神神叨叨,其实也就用这么点东西。