关于Ajax的一些使用

Posted 2021-01-10 lakemonster

Ajax

• 一种不用刷新页面便可以与服务器通讯的方法
• 数据在客户端与服务器之间的独立传输,服务器不再返回整个页面
• 提升用户体验

1. 不用刷新页面便可以和服务器通讯的方法有很多:

---- Flash

----Java applet

----框架:如果使用了一组框架构造了一个网页,可以只是更新这个其中的一个框架

---- 隐藏的iframe

---- XMLHttpRequest :该对象是对javascript的一个扩展,可以使网页与服务器进行通信.是创建Ajax的应用的最佳选择.实际上通常把Ajax当做XMLHttpRequest的对象的代名词

2. 为什么要兼容IE5

1. XMLHttpRequest 最早是在IE5中以ActiveX组件的形式出现的,不是W3C的标准,

function createXMLHTTPRequest() {     
                 //1.创建XMLHttpRequest对象     
                 //这是XMLHttpReuquest对象无部使用中最复杂的一步     
                 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码     
                 var xmlHttpRequest;  
                 if (window.XMLHttpRequest) {     
                     //针对FireFox，Mozillar，Opera，Safari，IE7，IE8     
                    xmlHttpRequest = new XMLHttpRequest();     
                     //针对某些特定版本的mozillar浏览器的BUG进行修正     
                     if (xmlHttpRequest.overrideMimeType) {     
                         xmlHttpRequest.overrideMimeType("text/xml");     
                     }     
                 } else if (window.ActiveXObject) {     
                     //针对IE6，IE5.5，IE5     
                     //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中     
                     //排在前面的版本较新     
                     var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];     
                     for ( var i = 0; i < activexName.length; i++) {     
                         try {     
                             //取出一个控件名进行创建，如果创建成功就终止循环     
                             //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建     
                            xmlHttpRequest = new ActiveXObject(activexName[i]);   
                            if(xmlHttpRequest){  
                                break;  
                            }  
                         } catch (e) {     
                         }     
                     }     
                 }     
                 return xmlHttpRequest;  
             }
    //这个是兼容性比较好的版本

function getHTTPObject(){
    var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlHttp;
}
//目前`比较简单的版本

3. XMLHttpRequest的方法

• abort() 停止当前请求

• getAllRequestHeaders() 把HTTP请求的所有响应首部作为键/值返回

• getResponseHeader("header") 返回指定首部的串值

• open(‘method‘, ‘url‘ ) 建立服务器的连接调用

• setRequestHeader("header", "value") 把指定首部设置为所提供的值,4.在设置首部之前必须先调用open()

4.XMLRequest 属性

• onreadystatechange:

  每个状态改变都会触发这个事件处理器,通常会调用一个JavaScript函数,请求到服务器中会产生不同状态,服务器触发

• readyState

请求状态:

• 0 ====> 未初始化
• 1 ====> 正在加载
• 2 ====> 已经加载
• 3 ====> 交互中
• 4 ====> 完成

• responseText

服务器的响应,表示为一个串

• responseXML

服务器的响应表示为XML,这个对象可以解析为DOM对象

• status

服务器HTTP状态码 200===> ok 404===>not found

• statusText

HTTP状态码相对的文本

发送请求

• setRequestHeader(header,value)

  • 当浏览器向服务器请求页面的时候,会伴随这个请求发送一组首部信息,这些首部信息是一系列描述请求的元数据(metadata),首部信息用来声明请求是GET还是POST请求

  • Ajax请求中,发送首部的工作setRequestHeader

  • 如果用Post请求向服务器发送数据,需要将"Content-type"的首部设置为"application/x-www-form-urlencoded",它会告诉服务器正在发送数据,并且数据已经符合URL编码

  • 该方法必须是在open()之后才能调用

json解析

//从服务器获取返回的数据
xmlHttp.onreadystatechange = function(){

    if(xmlHttp.onreadyState == 4){
        if(xmlHttp.status == 200){
            xmlHttp.responseText();
            var text = xmlHttp.responseText;
               var jsonText = evel("("+text+")");
                console.log("name:"+jsonText.name",age:"+jsonText.age);
        }else{
            console.log("false");
        }
    }
}   
//服务器端数据
{
    "name":"lakerMonster",
     "age":100
}