封装Ajax

封装过程的框架如下：

<script>
function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method == 'get') {
        // get请求
        if (data) {
            // 如果有值
            url += '?';
            url += data;
        }
        else {

        }
        // 设置 方法 以及 url
        ajax.open(method, url);
        // send即可
        ajax.send();
    }
    else {
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method, url);
        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }
        else {
            // 木有值 直接发送即可
            ajax.send();
        }
    }
}
</script>

示例：

<script>
function ajax(method,url,data,success){
        var http=new XMLHttpRequest();
        if(method=="get"){//get请求
            if(data){
                url+="?";//get请求不能在send里面传数据，必须在路径后面拼接
                url+=data;
            }
            http.open(method,data);
            http.send();
        }
        else{//post请求
            http.open(method, url);
            if (data) {
                http.send(data);
            }
            else {
                http.send();
            }
        }
        http.onreadystatechange=function(){
            if(http.readyState==4&&http.status==200){
                success(http.response)
            }
        }
    }
    ajax("post","./data/stu.txt", null, showinfo);//调用方法并传参
    function showinfo(data){//第五步  界面更新
        var stu=JSON.parse(data);
        var ul=document.createElement("ul");
        for(var i=0;i<stu.length;i++){
            var li = document.createElement("li");
            li.innerHTML="姓名：" + stu[i].name + "/年龄：" + stu[i].age + "/性别：" + stu[i].sex + "/地址：" + stu[i].add;
            ul.appendChild(li);
        }
        document.body.appendChild(ul)
    }
</script>

上述案例中使用的是本地的数据。

输出结果：