ajax 基础实例

优点：使用ajax读取数据文件，不需要刷新页面就能取出文件数据

1.0 基于ajax请求的理论支持

1.1 js 实现jquray中 ajax请求功能

基于ajax请求的理论支持

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title></title>
    
<script type="text/javascript">
    function ajax(url, fnSucc, fnFaild) {
        //1.创建Ajax对象
        if (window.XMLHttpRequest) {
            var oAjax = new XMLHttpRequest();
        }
        else {
            var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //2.连接服务器
        //open(方法, 文件名, 异步传输)
        oAjax.open('GET', url, true);

        //3.发送请求
        oAjax.send();

        //4.接收返回
        oAjax.onreadystatechange = function () {
            //oAjax.readyState    //浏览器和服务器，进行到哪一步了
            if (oAjax.readyState == 4)    //读取完成
            {
                if (oAjax.status == 200)    //成功
                {
                    fnSucc(oAjax.responseText);
                }
                else {
                    if (fnFaild) {
                        fnFaild(oAjax.status);
                    }
                    //alert('失败:'+oAjax.status);
                }
            }
        };
    }
    window.onload = function () {
        var oBtn = document.getElementById('myDiv');
            oBtn.onclick = function () {
                             ajax('test1.txt?t='+new Date().getTime(),
                                 function (str) { 
                            //?t='+new Date().getTime()  可以控制缓存，即每次改变 test1.txt文件不需要刷新页面既可读取文件改变后的值
                          var oTxt = document.getElementById('txt');
                            oTxt.value = str; 
                                                     }
                                       ); 
                                 }; 
                         }; 
</script> 
</head> 
<body>
                 <input type="button" id="myDiv" value="读取"/><br /> 
          用户名: <input type="text" id="txt" />
                 <input type="text" id="Text1" /> 
</body>
 </html>

js 实现jquray中 ajax请求功能

下面是根据W3C上的解析，自己写的一个小小的ajax请求框架是 ASP.NET MVC

<input type="button" id="btn_nowTime1" onclick="Myajax()" value="请求" />

var createAjax = function () {
        var xhr = null;
        try {
            //IE系列浏览器
            xhr = new ActiveXObject("microsoft.xmlhttp");
        } catch (e1) {
            try {
                //非IE浏览器
                xhr = new XMLHttpRequest();
            } catch (e2) {
                window.alert("您的浏览器不支持ajax，请更换！");
            }
        }
        return xhr;
    };

    var ajax = function (conf) {
        // 初始化
        //type参数,可选
        var type = conf.type;
        //url参数，必填 
        var url = conf.url;
        //data参数可选，只有在post请求时需要
        var data = conf.data;
        //datatype参数可选    
        var dataType = conf.dataType;
        //回调函数可选
        var success = conf.success;

        if (type == null) {
            //type参数可选，默认为get
            type = "get";
        }
        if (dataType == null) {
            //dataType参数可选，默认为text
            dataType = "text";
        }
        // 创建ajax引擎对象
        var xhr = createAjax();
        // 打开
        xhr.open(type, url, true);
        // 发送
        if (type == "GET" || type == "get") {
            xhr.send(null);
        } else if (type == "POST" || type == "post") {
            xhr.setRequestHeader("content-type",
                    "application/x-www-form-urlencoded");
            xhr.send(data);
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (dataType == "text" || dataType == "TEXT") {
                    if (success != null) {
                        //普通文本
                        success(xhr.responseText);
                    }
                } else if (dataType == "xml" || dataType == "XML") {
                    if (success != null) {
                        //接收xml文档    
                        success(xhr.responseXML);
                    }
                } else if (dataType == "json" || dataType == "JSON") {
                    if (success != null) {
                        //将json字符串转换为js对象  
                        success(eval("(" + xhr.responseText + ")"));
                    }
                }
            }
        };
    };

调用：

function Myajax() {
        ajax({
            url: '/home/index',
            success: function (data) {
                alert(data);
            }
        })
     }

开始对XMLHttpRequest 这个对象很模糊，最详解的也摸过于 W3C 上的解析，现在想来这也许就是开发中该用的API 是行业标准了吧！

发现几篇好的文章，就把链接给拿来了

滴答的雨

dipoo