• javascirpt系列之 XMLHttpRequest对象(续篇)


      —— 生命中最可贵的东西永远是时间,多挤点时间充实自己,别再肆意糟蹋青春。

      接着昨天的内容。前面说的4个重要的步骤,已经都得到实现,在这里XMLHttpRequest还有两个方法,setRequestHeader()方法设置HTTP请求的头信息。abort()方法终止正在进行中的请求。一般极少这样做,并且终止之前,应当先清除onreadystatechange事件处理程序。(指派一个空函数给onreadystatechange,若给它null值,会发生难以预料的错误)

      xhr.setRequestHeader(header, value),调用此方法之前必须进行以下步骤:

    •   确保state是打开的,也就是说已经调用open()方法,否则抛出 "InvalidStateError" 异常;
    •   确保send()没有被调用,否则也会抛出 "InvalidStateError" 异常;
    •   HTTP header字段名和字段值设置正确有效,否则抛出“SyntaxError”异常,值得注意的是,空字符串却是合法有效的,但是一般不这么使用。

      例如:发送表单信息,设置请求头为:

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

         请求纯文本形式时,设置请求头为:

            xhr.setRequestHeader('Content-Type', 'text/plain');

      向服务端发送了请求,服务端自然会返回响应,而HTTP响应包含3部分:

    •   一个数字和文字组成的状态码,用来显示请求的成功和失败;
    •   一个响应头集合;
    •   响应的主体

      这些都可以通过XMLHttpRequest对象的属性和方法使用。status和statusText属性以数字和文本形式返回HTTP状态码。例如:200和“OK”表示请求成功,404和“Not Found”表示URL不能匹配到服务器上的任何资源。使用getResponseHeader()和getAllResponseHeaders()能获得响应头。

      响应主题可以从responseText属性中得到文本形式的数据,可以从responseXML属性中得到XML Document形式的数据。XMLHttpRequest对象通常使用异步:发送请求后,send()方法立即返回,直到响应返回,前面描述的响应方法和属性才有效,同时监听XMLHttpRequest对象上的readystatechange事件。

      下面定义一个startRequest()函数来演示如何监听readystatechange事件。

    function startRequest(url, callback){
        var req = new XMLHttpRequest();    //示例不考虑兼容
        req.open("GET", url, true);
        req.onreadystatechange = function(){
            if(req.readystate == 4){
                if(req.status === 200 || res.status === 304){
                     var type = req.getResponseHeader("Content-Type");
               if(type.indexOf("xml") !== -1 && req.responseXML){
                callback(req.responseXML);
               }else if(type === "application/json"){
                callback(JSON.parse(req.responseText));
              }else{
                       callback(req.responseText);
              }
                }
            }
        }
        req.send(null);      
    }

      XMLHttpRequest对象也支持同步调用,当然异步处理HTTP响应是最佳的方式。send()方法之后无需阻塞到请求完成,而是继续下面的代码。如果服务器发送的XML作为响应,可以通过responseXML属性获得一个XML Document对象,可以直接使用DOM方法进行操作。XHR2中应该还能自动解析“text/html”类型的响应。

      在实际应用中,我们主要用到这么几种格式作为响应:XML、JSON、HTML、CSV,当然还可以使用其他纯文本格式。就个人而言,最喜欢用到的是XML和JSON格式。XML格式可以直接使用,JSON就更加融合于Javascript结构,但是它们都有语法严格,内容冗长的缺点。CSV格式是目前存活的比较古龙的数据检索系统,它用逗号来标识数据的开始和结束。格式极为简单,读取相对高效,但是无法包含任何解释性的标识,也就是说只能通过位置来访问它们,不如JSON和XML的(属性名、标签)使用方便。

      总之,要添加大块得数据到前端页面,可选择使用HML格式,只用几行代码就能轻松添加到页面;要是项目比较复杂,需要多人合作,可以选择XML,比较通用;若需要快速检索数据,可以选择JSON和XML。当然选择格式还得同时兼顾客户端和服务端的编码,选择合适的才是最好的。

  • 相关阅读:
    试下七牛云CDN
    【问题】 Cocos3.x 左边和上方有黑边,任意点一下才能对齐
    【MySQL】MySQL8 密码问题
    【测绘每日一题】白塞尔公式应用
    【GIS】(转载)EPSG:900913 转换 EPSG:4326
    python 三引号回车不能自动生成函数注释的问题
    python fastapi + uvicorn 记录日志的最佳实践,结合nb_log
    支持pycahrm代码自动补全的库才是好库,不能代码补全的库很垃圾。fastapi暴击flask
    【PG】小麦苗PGCA+PGCE第9期证书邮寄
    EXSI的运维管理
  • 原文地址:https://www.cnblogs.com/moltboy/p/3080879.html
Copyright © 2020-2023  润新知