创建ajax库

最新推荐文章于 2025-09-10 15:47:18 发布

weixin_34174132

最新推荐文章于 2025-09-10 15:47:18 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/XueTing/p/10925712.html

博客介绍了Ajax的使用步骤，包括创建ajax对象、连接服务器、发送请求、接收返回值，还提及了一个完整的ajax库，并说明了如何在index.html中使用ajax。

1. 创建ajax对象

if(window.XMLHttpRequest)    //非IE6浏览器 
{
    var oajax = new XMLHttpRequest();
}
else    //IE6浏览器
{
    var oajax  =  new XMLHttpRequest("Microsoft.XMLHTTP");
}

2. 连接到服务器

//true为异步传输,多个事情可以一起做
//false为同步传输,事情一件件来做

//open('提交方式','文件名',true);
//////////////////////////////////////
oajax.open('GET',url,true);
//////////////////////////////////////

3. 发送请求

oajax.send();

4. 接收返回值

oajax.onctreadystatechange=function(){

if(oajax.redyState == 4)  //读取完成
{
if(oajax.status==200)  //成功
{
   fnSucc(oajax.responseText);  //返回url文件中的信息
}
else    //失败
{
  if(fnFaild){fnFaild(oajax.status);}
}
}
}

5.一个完整的ajax库

//第一个参数是数据源地址
//第二个参数是用来获取数据源中的信息,该函数中的参数oajax.responseText为从数据源获取到的数据信息
//第三个参数相当于catch语句，用来做补救措施的
function ajax(url,fnSucc,fnFaild) { 
    //1.创建ajax对象
    ///////////////////////////////////
    if(window.XMLHttpRequest){
        var oajax = new XMLHttpRequest();
    }
    else
    {
        var oajax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    ///////////////////////////////////
    
    //2.连接服务器(打开服务器并连接)
    oAjax.open('GET',url,true);
    
    //3.发送
    oAjax.send();
    
    //4.接收
    oajax.onreadystatechange=function () {
        if(oajax.readyState==4)
        {
            if(oajax.status==200)
            {
                fnSucc(oajax.responseText);
            }
            else
            {
                if(fnFaild)
                {
                    fnFaild();
                }
            }
        }
    };

}

6.在index.html中使用ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="ajax.js"></script>
    <script>
        window.onload=function () {
            var btn = document.getElementById('btn');
            var ul = document.getElementById('ul');
            btn.onclick=function () {
                //'aaa.txt?t='+new Date().getTime()---->无缓存刷新界面，可解决浏览器中有缓存的弊端
                /*
                第一个参数是数据源地址
                第二个参数是用来获取数据源中的信息,该函数中的参数str为从数据源获取到的数据信息
                第三个参数相当于catch语句，用来做补救措施的
                 */
                ajax('aaa.txt?t='+new Date().getTime(),function (str) {
                    //var arr = eval(str);---->可将[1,2,3,4,5]转换为数组
                    //在json[{a:5,b:7},{a:8,b:9}]中，获取为5的元素
                    //var arr = eval(str)[0].a;
                    var arr = eval(str);
                    for(var i=0;i<arr.length;i++)
                    {
                       var li = document.createElement('li');
                       li.innerHTML='id:'+arr[i].id+'===pwd:'+arr[i].pwd;
                       ul.appendChild(li);
                    }
                },function () {
                    alert('end');
                });
            };
        };
    </script>
</head>
<body>
<input type="button" value="点击" id="btn">
<br>
<br>
<ur id="ul">
</ur>
</body>
</html>

转载于:https://www.cnblogs.com/XueTing/p/10925712.html