XMLHttpRequest 对象与属性

最新推荐文章于 2024-09-25 11:57:12 发布

waj89757

最新推荐文章于 2024-09-25 11:57:12 发布

阅读量620

点赞数

分类专栏： ajax 文章标签： xmlhttprequest http服务器 callback function 服务器 url

ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

　　XMLHttpRequest 对象用于在后台与服务器交换数据。

小例子

   
   
    
     1 
    
    //
    
    初始化XMLHttpRequest对象
    
    

    
     2 
    
     
    
    var xhr
    
    =
    
    null
    
    ;

    
     3 
    
    var textName
    
    =
    
    null
    
    ;

    
     4 
    
    var infoTag
    
    =
    
    null
    
    ;

    
     5 
    
     
    
    //
    
    创建XmlHttpRequest对象并返回
    
    

    
     6 
    
     
    
    function CreateXMLHttpRequest(){

    
     7 
    
        var xmlHttp;

    
     8 
    
        
    
    if
    
    (window.XMLHttpRequest){

    
     9 
    
            xmlHttp
    
    =
    
    new
    
     XMLHttpRequest();

    
    10 
    
        } 

    
    11 
    
        
    
    else
    
     
    
    if
    
    (window.ActiveXObject){

    
    12 
    
            xmlHttp
    
    =
    
    new
    
     ActiveXObject(
    
    '
    
    Microsoft.XMLHTTP
    
    '
    
    );

    
    13 
    
        }

    
    14 
    
        
    
    return
    
     xmlHttp;

    
    15 
    
    }

    
    16 
    
     
    
    //
    
    异步检查用户名是否存在
    
    

    
    17 
    
    
    
    function Check(){

    
    18 
    
        textName
    
    =
    
    document.getElementById(
    
    '
    
    user
    
    '
    
    );

    
    19 
    
        infoTag
    
    =
    
    document.getElementById(
    
    '
    
    info
    
    '
    
    );

    
    20 
    
        var sendData
    
    =
    
    '
    
    userName=
    
    '
    
    +
    
    textName.value;

    
    21 
    
        
    
    if
    
    (textName.value
    
    !=
    
    ""
    
    ){

    
    22 
    
            xhr
    
    =
    
    CreateXMLHttpRequest();

    
    23 
    
            xhr.onreadystatechange
    
    =
    
    CallBack_ShowData; 

    
    24 
    
            xhr.open(
    
    '
    
    Post
    
    '
    
    ,
    
    '
    
    Server_php/ServerCheck.php
    
    '
    
    ,
    
    true
    
    );

    
    25 
    
            
    
    //
    
    post方式需要下面两句设置Header
    
    

    
    26 
    
    
    
            xhr.setRequestHeader(
    
    "
    
    content-length
    
    "
    
    ,sendData.length);

    
    27 
    
            xhr.setRequestHeader(
    
    "
    
    Content-Type
    
    "
    
    ,
    
    "
    
    application/x-www-form-urlencoded
    
    "
    
    ); 

    
    28 
    
            
    
    //
    
    要POST的数据        
    
    

    
    29 
    
    
    
            xhr.send(sendData);

    
    30 
    
        }

    
    31 
    
        
    
    else
    
    {

    
    32 
    
           infoTag.innerHTML
    
    =
    
    '
    
    请输入用户名
    
    '
    
    ;

    
    33 
    
        }

    
    34 
    
    }

    
    35 
    
    function CallBack_ShowData(){

    
    36 
    
        
    
    if
    
    (xhr.readyState 
    
    ==
    
     
    
    4
    
    ){

    
    37 
    
        
    
    if
    
    (xhr.status
    
    ==
    
    200
    
    ){

    
    38 
    
            var data
    
    =
    
    xhr.responseText;

    
    39 
    
            
    
    //
    
    如果用户名存在则清空user，并使其获得焦点
    
    

    
    40 
    
    
    
            
    
    if
    
    (data.split(
    
    '
    
    |
    
    '
    
    )[
    
    1
    
    ]
    
    ==
    
    '
    
    Error
    
    '
    
    ){

    
    41 
    
                textName.value
    
    =
    
    ''
    
    ;

    
    42 
    
                textName.focus();                    

    
    43 
    
            }

    
    44 
    
            
    
    //
    
    不存在则让下一输入框获得焦点
    
    

    
    45 
    
    
    
            
    
    else
    
    {

    
    46 
    
                infoTag.focus();

    
    47 
    
            }

    
    48 
    
            
    
    //
    
    显示异步传输过来的数据
    
    

    
    49 
    
    
    
            infoTag.innerHTML
    
    =
    
    data.split(
    
    '
    
    |
    
    '
    
    )[
    
    0
    
    ];

    
    50 
    
        }

    
    51 
    
        }

    
    52 
    
    }

方法	属性
open()	onreadystatechange
setRequestHeader()	status
send()	readyState
getResponseHeader()	statusText
getAllResponseHeaders()	responseText responseXML responseBody responseStream

open 初始化HTTP请求参数,语法(method, url, async, username, password)|method指定请求方式,一般是[GET、POST]不区分大小写; url指定请求地址,大多数浏览器都限制在同域下[要求url与请求页面具有相同的主机名和端口],可以为绝对地址也可以为相对地址; async指定请求是异步还是同步,默认是异步[true]则通常许指定一个onreadystatechange句柄[用于异步回调],同步则指定为[false]; username 和 password 参数是可选的[及在请求的url需要授权时填写];

setRequestHeader 单独指定请求的某个http头,语法(headerStr,valueStr)|headerStr指定头名称,如果存在则覆盖 valueStr指定值[此方法必须在open方法后调用]

send 发送请求到http服务器并接收回应,语法(varBody)|指定请求中发送的数据;此方法的同步或异步方式取决于open方法中的async参数,如果async == False,此方法将会等待请求完成或者超时时才会返回;如果async == True，此方法将立即返回。

getAllResponseHeaders 获取响应的所有http头,语法()|每个http头名称和值用冒号分割，并以\r\n结束。当send方法完成后才可调用该方法。

getResponseHeader 从响应信息中获取指定的http头,语法(headerStr)|headerStr指定头名称,当send方法成功后才可调用该方法;

onreadystatechange当readyState属性改变时调用该属性指定的方法

status2**：操作成功收到，分析、接受[200常用] |4**：客户端请求错误 |5**：服务器响应错误

statusTextstatusText属性和status属性的功能基本相同．他们的区别在于status返回的是http状态码[数字形式]; 而statusText返回的是以文本形式返回http状态信息.比如在请求一个不存在的网页时status返回404, 而statusText则返回Not Found

readyState

0	未初始化	还没有调用send()方法
1	载入	已调用send()方法，正在发送请求
2	载入完成	send()方法执行完成，已经接收到全部响应内容
3	交互	正在解析响应内容
4	完成	响应内容解析完成，可以在客户端调用了

responseText_responseXML_responseBody_responseStream

responseText	将响应信息作为字符串返回;XMLHTTP默认将响应数据的编码定为UTF-8;
responseXML	将响应信息格式化为Xml Document对象并返回;如果响应数据不是有效的XML文档，此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息
responseBody	以unsigned array格式表示直接从服务器返回的未经解码的二进制数据
responseStream	以Ado Stream对象的形式返回响应信息

最后还有一个abort方法，用于取消当前请求.