ajax

ajax是前端与后端进行数据交互的一种重要手段!!!

下面我将说一下怎么使用原生js代码实现利用ajax来读取静态文件。

ajax的是什么我就不在介绍了,我主要讲怎么用写一个简单的ajax。
1.首先我们要创建一个ajax的对象,但是考虑到兼容性的问题,为了兼容ie6,我们做了如下处理:

if(window.XMLHttpRequest) {
    var oAjax = new XMLHttpRequest();
} else {
    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}

2.连接服务器是使用open方法:open(传输方式,文件名,异步传输)
3.发送请求oAjax.send();
4. 接受返回

oAjax.onreadystatechange = function() {
    if(oAjax.readyState == 4) {
        if(oAjax.status == 200) {
            fnSucc(oAjax.responseText);
        } else {
            if (fnFaild) {
                fnFaild(oAjax.status);
            }
        }
    }
}

其中oAjax.readyState表示浏览器与服务器交互到哪一步了(0,1,2,3,4分别表示如下状态!)
0:(未初始化)还没调用open()方法
1:(载入)已经调用send()方法,正在发送请求
2:(载入完成)send()方法,已经收到全部响应内容
3:(解析)正在解析全响应内容
4:(完成)响应内容解析完成,可以在客户端调用
oAjax.status是 http状态码
oAjax.responseText是返回的文本内容
以上就是一个简单ajax应用的方法
当然为了方便我们可以将其简单封装为一个ajax库

function ajax(url, fnSucc, fnFaild) {
    if(window.XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    } else {
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    oAjax.open('GET', url, true);

    oAjax.send();

    oAjax.onreadystatechange = function() {
        if(oAjax.readyState == 4) {
            if(oAjax.status == 200) {
                fnSucc(oAjax.responseText);
            } else {
                if (fnFaild) {
                    fnFaild(oAjax.status);
                }
            }
        }

    }
}

你可能感兴趣的:(前端-js,随笔)