zoukankan      html  css  js  c++  java
  • Ajax(一):XHR的用法

    AJAX
    能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。

    1、在使用xhr对象时,要调用都第一个方法就是open(),它接收3个参数:要发送的请求的类型(get,post等)、请求的url和表示
    是否异步发送请求的布尔值。

    xhr.open('get', 'example.php', false);

    调用open()方法并不会真正发送请求,而只是启动一个请求以备发送,要发送特定的请求,必须像下面这样调用send()方法:

    xhr.open('get', 'example.txt', false);
    xhr.send(null);

    *:只能向同一个域中使用相同端口和协议的url发送请求,如果url与启动请求的页面有任何差别,都会引发安全错误

    2、调用send()之后,请求就会分派到服务器。等到服务器响应之后再继续执行。在收到响应后,响应到数据会自动填充xhr对象到属性,
    相关的属性简介如下:

    responseText:作为响应主体被返回的文本。
    responseXML:如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存包含着响应数据的xml dom文档
    status:响应的http状态
    statusText:http状态的说明。

    通过检测status来决定下一步的操作,不要依赖statusText,因为后者的跨浏览器使用时不太可靠

    3、多数情况下,我们还是要发送异步请求,才能让js继续执行而不必等待响应。此时,可以检测xhr对象的readyState属性,该属性
    表示请求/响应过程的当前活动阶段。

    0:未初始化。尚未调用open()方法
    1:启动。已经调用open()方法,但尚未调用send()方法。
    2:发送。已经调用了send()方法,但未接收到响应。
    3:接收。已经接收到部分响应数据
    4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

    只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。利用这个事件来检测每次状态变化后的state的值。通常我们只对readyState为4的阶段感兴趣,因为此时所有数据都已经就绪。
    不过,必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

    function createXHR(){
        if(typeof XMLHttpRequest !="undefined"){
            return new XMLHttpRequest(); 
        }else if(typeof ActiveXObject !="undefined"){
            if(typeof arguments.callee.activeXString !="string"){
                var versions =    ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
                var i,len;
                for (i=0,len=versions.length;i<len;i++){
                    try{
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                       break;
                    }catch(ex){}
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        }else{
            throw new Error("No XHR object available");
        }
    }
    
    var xhr = createXHR(); 
    xhr.onreadystatechange = function(){ 
        if(xhr.readyState == 4){ 
            if((xhr.status >=200 && xhr.status < 300 ) || xhr.status == 304 ){ 
                alert(xhr.responseText); 
         }else{ 
                alert("Request was unsuccessful : " + xhr.status); 
            } 
        } 
    }
    
    //读取example文本 
    xhr.open("get","example.txt",true); 
    xhr.send(null);
    
        

    另外,在接收到响应之前还可以调用abort()方法来取消异步请求

    xhr.abort()
  • 相关阅读:
    Java中四种XML解析技术
    Android ui utils简单实用的Android界面工具
    Android SAX解析xml文件
    Android SAX解析XML
    《Unix & Linux 大学教程》 第一、二章 学习笔记
    Eclipse设置背景色
    Java中getResourceAsStream的用法
    Android中asset文件夹和raw文件夹区别
    《Unix & Linux 大学教程》 第三、四章 学习笔记
    Android SAX解析实例教程
  • 原文地址:https://www.cnblogs.com/wzndkj/p/8564451.html
Copyright © 2011-2022 走看看