ajax

概念：Asynchronous Javascript And Xml 異步j(luò)avascript和xml(數(shù)據(jù))

作用：不用刷新頁面就可以修改頁面內(nèi)容

特點： 1赶站、異步請求數(shù)據(jù) 2、dom編程（局部修改數(shù)據(jù)）

ajax入門

//1纺念、創(chuàng)建對象XMLHttpRequest
var xmlhttp=new XMLHttpRequest();
//2贝椿、請求
xmlhttp.open("請求方式","請求地址",true);
xmlhttp.send();
//3、處理陷谱、回調(diào)
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){//判斷狀態(tài)
        //處理數(shù)據(jù)
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

ajax請求與發(fā)送數(shù)據(jù)

1.png

ajax工具類封裝

• type:請求類型
• url:請求地址
• data:發(fā)送數(shù)據(jù)
• dataType:返回的數(shù)據(jù)類型
• success:成功時執(zhí)行的方法

//創(chuàng)建工具類
    function ajax(option){
        //創(chuàng)建對象
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open(option.type, option.url, true);
        //不同的請求方式烙博，執(zhí)行不同的方法
        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) {
                //不同的數(shù)據(jù)類型，執(zhí)行不同的方法
                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>";
            }
        }
    });