JavaScript高级程序设计读书笔记（17）——Ajax

Ajax

Ajax的作用：通过js代码获取服务器的数据；
Ajax的效果：在不加载整个页面的情况下，通过一个url地址获取到服务器的数据，然后进行页面的局部刷新；
使用步骤：
1、创建XMLHTTPReuest对象；
2、配置对象信息；
3、发送请求；
4、获取服务器端返回的数据。
下面是代码示例：

function myajax(type,URL,params,dataType,callback){
                //1、创建对象和兼容处理
                var xhr=null;
                if(window.XMLHttpRequest){
                    xhr=new XMLHttpRequest();
                }else{
                    //低版本浏览器
                    xhr=new ActiveXObject("Micosoft.XMLHTTP");
                }
             // 2、设置对象
            if(type=="get"){
                URL+="?"+params;
            }
             xhr.open(type,URL,true);
             // 3、发送请求
             if(type=="get"){
                 xhr.send(null);
             }else if(type=="post"){
                 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                 xhr.send(params);
                 // 这里的params表示的是提交的参数
             }
             //4、回调函数，获取服务端返回的数据
             xhr.onreadystatechange=function(){
                 if(xhr.readyState==4){
                     if(xhr.status==200){
                         var result=null;
                         if(dataType=="json"){
                             result=xhr.responseText;
                             // 将JSON数据格式转换成字符串返回给result
                             result.JSON.parse(result);
                         }else if(dataType=="xml"){
                             result=xhr.responseXML;
                         }else{
                             result=xhr.responseText;
                         }
                         callback(result);
                     }
                 }
             }
        }
        window.onload=function(){
            var btn=document.getElementById("btn");
            var username=document.getElementById("username");

            btn.onclick=function(){
                var usernameValue=username.value;
                var type="get";
                var URL="check.php";
                var params="username="+usernameValue;
                var dataType="text";
                myajax(type,URL,params,dataType,function(result){
                    document.getElementById("result").innerText=result;
                });
            }
        }