• JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)


    XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应;但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话。
     

    大多数浏览的客户端JavaScript都包含此功能。

    HTTP协议 规定了Web浏览器如何从Web服务请求文档,如何向Web服务器传送表单内容,以及如何响应
    这些请求和传递。
    Web浏览器处理了很多HTTP(通常HTTP并不在脚本的控制之下)
    1、用户点击一个链接
    2、提交一个表单
    3、输入一个URL
     
    通常JavaScript代码可能脚本化HTTP,但并不总是如此。
    如设置一个对象的Window.Location 
    下载图像                <img>
    下载文档                <iframe>
    下载脚本执行         <script> src属性
     
    当脚本把这些属性设置为一个URL,就会启动一个HTTP GET 请求来下载该URL的内容。
    因此可以将信息编码到一个图像的URL查询字符串部分,并设置一个src属性,从而把信息
    传送给Web服务器。(注:web服务器必须实际返回一个图像(任意大小 如:1px*1px 透明图)
    所以使用以上方法,对HTTP进行脚本化是可能的,但可移植性差。
        在现代浏览器中,XMLHttpRequest对象得到很好的支持,并且提供对HTTP协议的完全的访问,
        包括做出POST和HEDAD请求以及普通的GET请求的能力。可同步或异步地返回Web服务器的请求,
    并且能够以文本或者一个DOM文档的形式返回内容。(可接收任何形式的文本文档)
    XMLHttpRequest对象是名为Ajax的Web应用程序架构的一项关键功能。
     
    20.1 使用XMLHttpRequest(新版本为XMLHttpRequest 2)
    使用其脚本化HTTP有3个步骤
    1、创建一个XMLHttpRequest对象
    2、指定HTTP请求并向一个Web服务器提交
    3、同步地或异步地获得服务器的响应
     
    如:var request=new XMLHttpRequest();
    使用open()方法来指定该请求的方法和URL
    request.open("GET",url,false);
    方式中有 GET POST HEAD 
    URL    web服务器的URL  
    最后一个参数是指定是否为异步,true 异步 (缺省值),false 同步  
     
    除了以上3个可选参数,还有第4个和第5个参数 可选参数,名字和密码
    当从一个需要授权的服务器获取一个URL的时候需要用到这两个参数。
     
    open()     并不实际地向Web服务器发送请求,它只是保存自己的参数,等到稍后实际发送请求的时候再使用。
    在发送请求之前,必须设置所有所需的请求头部。
    如:
    request.setRequestHeader("user-Agent","XMLHttpRequest");
                  setRequestHeader("Accept-language","en");
                  setRequestHeader('''');
    注:Web浏览器自动为建立的请求添加相关的cookie,只有当想要向服务器发送一个假的cookie
    的时候,才需要显式地设置 "cookie" 头部
     
    最后,把请求发送给服务器。
    request.send(null)
    send()函数的参数是请求体。对于 HTTP Get请求,参数一般总是null(是否可有不为null参数体)
     
    注:XMLHttpRequest是一个客户端对象,它的方法不允许像核心JavaScript函数那样省略参数
    (至少Firefox是如此)
     
    20.1.3 获取一个同步响应
        send()并不返回一个状态代码。一旦它返回,可以使用请求对象的status属性来检查服务器返回的HTTP状态代码。
    这个代码可能值在HTTP协议中定义了
    状态200:请求成功
    状态404:请求的URL不存在
    等。可查阅相关文档。
    以下代码紧接在send()函数后。
    if(request.status==200)
    {
        alert(request.responseText);
    }
    else
    {
    }
    注:XMLHttpRequest对象也提供了对返回的HTTP头部的访问
    getResponseHeader()
     
    20.1.4 处理一个同步响应
     
    来自服务器的异步响应就像是来自用户的异步鼠标点击:当它发生时,需要被通知。这通过一个事件句柄来实现
    在onreadystatechange属性上控制,只要readyState改变,事件句柄函数就被调用。
    readyState是指定一个HTTP请求的状态的整数值。
     
    表20-1  XMLHttpRequest的readyState的值
    readyState                        含义
    0                                    open()还没调用
    1                                    open()已经调用,但是send()还没有调用
    2                                    send()已经调用,但服务器还没有响应
    3                                    正在从服务器接收数据。readyState  3 在Firefox和Internet Explorer中略有不同。
     
    注:和客户端JavaScript中的大多数事件相反,没有事件对象传递给onreadystatechange句柄,
    且XMLHttpRequest对象也不会作为参数传递给事件句柄,因此要在句柄函数内部直接访问
    XMLHttpRequest声明的对象(在其有效范围内)
     
    如:
    request.onreadystatechange=function()
    {
        if(request.readyState==4)
            {
                if(request.status==200
                    {
                        alert(requst.responseText);
                    }
            }
    }
     
    注:
    1、Firefox在较大 的下载过程中,会在readyState==3中多次调用onreadystatechange句柄,以提供下载过程反馈
    2、IE只有当readyState实际变化时才调用,且responseText在这一状态中查询不到。
     
    20.1.5 XMLHttpRequest 的安全性
    作为同源安全策略的一部分, XMLHttpRequest对象可以只向某些服务器发布HTTP请求。
    而使用该对象的文档是通过这些服务器下载,但是如果需要也可以绕过它,通过使用一个
    服务器端的脚本作为代理来接收某些异地URL的内容。
    注:XMLHttpRequest安全限制有一个非常重要的意义:做出HTTP请求且不会与其他的URL样式一起工作。
    如不会和使用file://协议的URL一起工作。
    这意味着不能从自己的本地文件系统测试 XMLHttpRequest脚本。(必须放入Web服务器中)
     
    HTTP POST
    使用POST请求,数据在请求体中传递给服务器,而不是编码到URL之中
    request.send();
    疑问:1 客户端请求体的格式  2、服务器返回的数据格式  
     
    20.2.5
    XMLHttpRequest对象的一个缺点就是没有提供指定的一个请求的过期值的方法,对于 同步的请求来说,
    如果服务器挂起,Web浏览器在send()方法中,保持阻塞,并且所有处理都被冻结起来。
    (但异步请求一般不会,但还是设置过期较好)
    解决办法:使用setTimeout()来设置过期值
    在setTimeout指定的处理函数中调用XMLHttpRequest.abort()方法来取消请求。
     
     
    20.3 AJAX
    Ajax应用程序的关键特征就是,它使用脚本化的HTTP来与一个Web服务器通信而没有导致页面重载。
     
    20.3.2 单页面应用程序 
        只需要一个页面载入的JavaScript驱动的Web应用程序。
        使用XMLHttpRequest对象和Ajax架构实现。
     
    注:沿着这种思路设计的Web应用程序可能含有少量的JavaScript启动代码。(如只是一个开始启动的动画屏幕)
        一旦开始,启动代码会使用一个XMLHttpReuqest对象来下载应用程序的实际的代码,然后这些代码和eval()方法一起
    执行。这样JavaScript代码就能接管控制,载入XMLHttpRequest所需的数据并使用DOM将这些数据以DHTML的形式
    提交以显示给用户。
     
    20.3.3 远程脚本调用 RPC
        比Ajax早4年出现,基本思想相同,设置iframe的src=
    如果Web服务器返回一个其中包含<script>标记的HTML文档,该标记包含的JavaScript会被浏览器执行。
    并且可以调用在包含在该iframe的窗口中定义的方法 。
    通过这种形式,服务器可以以JavaScript的形式把非常直接的命令发送给它的客户机
     
    iframe跨越访问以及window.parent的访问 
    变量的寻找方式 
    独立的全局执行环境
     
    20.3.4 关于Ajax的警告
     
    在设计Ajax应用程序时需要注意的3个问题
    1、可视化反馈
    2、URL有关
    3、使用Ajax加载,内容变化后,地址工具栏中的URL始终不变(前进、后退按钮失效) 这是合理的,因为是单页面应用程序。
     
    20.4 使用<script>标记脚本 化HTTP
    设置src 并设置src值中?后的参数
    动态。
     
  • 相关阅读:
    js获取cookie
    js 获取父页元素
    【HDU4571 Travel in time】二维多状态spfa
    【HDU4360】 最短路变形
    百度人脸识别模块使用分享
    APICloud · 跨越2018,技术改变世界
    Android平台targetSdkVersion设置及动态权限
    UIPullRefreshFlash模块demo示例
    webToImage (网页转图片)模块试用分享
    生成带二维码图片并通过微信分享
  • 原文地址:https://www.cnblogs.com/tlxxm/p/4396995.html
Copyright © 2020-2023  润新知