AJAX

目前问题

1.数据重新填写

2.页面内容重新获取

3.不能局部修改页面的内容

4.等待过程中无法操作页面(同步)

ajax

概念：Asynchronous Javascript And Xml 异步javascript和xml(数据)

作用：不用刷新页面就可以修改页面内容

特点：1、异步请求数据 2、dom编程（局部修改数据）

ajax入门

//1、创建对象XMLHttpRequest
var xmlhttp=new XMLHttpRequest();
//2、请求
xmlhttp.open("请求方式","请求地址",true);
xmlhttp.send();
//3、处理、回调
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){//判断状态
        //处理数据
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

ajax请求与发送数据

1.png

ajax工具类封装

• type:请求类型

• url:请求地址

• data:发送数据

• dataType:返回数据类型

• success:成功时执行的方法

 //创建工具类
    function ajax(option){
        //创建对象
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open(option.type, option.url, true);
        //不同的请求方式，执行不同的方法
        if(option.type=="get"){
            xmlhttp.send();
        }else if(option.type=="post"){
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlhttp.send(option.data);
        }       
        xmlhttp.onreadystatechange = function() {
            //成功
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //不同的数据类型，执行不同的方法
                if(option.dataType=="text"){
                    option.success(xmlhttp.responseText);
                }else if(option.dataType=="script"){
                    option.success(xmlhttp.responseText);
                }else if(option.dataType=="json"){
                    var json=eval("("+xmlhttp.responseText+")");
                    option.success(json);
                }else if(option.dataType=="xml"){
                    option.success(xmlhttp.responseXML);
                }
            }
        }
    }

    //使用工具类
    ajax({
        type:"get",
        url:"/ajax/ajax?op=json3",
        dataType:"json",
        success:function(data){
            for(i in data){//i就是下标
                content.innerHTML=content.innerHTML+data[i].username+","+data[i].password+"<br>";
            }
        }
    });