• AJAX的基本原理之XMLHttpRequest


    AJAX的基本原理

    AJAX 组成
    1.表示      XHTML+CSS
    2.动态显示和交互 DOM
    3.数据交互和操作 XML、XSLT
    4.异步数据获取  XMLHttpRequest
    5.绑定和处理数据 JavaScript

    ----------------------------------------
    AJAX 基本流程

                 提交
    1.   XMLHttpRequest————>请求

             返回          分析
    2、3. 服务器————>数据———-->JavaScript处理------>html呈现


     XMLHttpRequest 对象属性
     XMLHttpRequest是XMLHttp组件的对象,通过这个对象,Ajax可以像桌面应用程序一样只与服务器进行数据层的交换,而不必每次都刷新界面,也不必每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又回忆了响应速度,缩短了用户的等待时间。

     onreadystatechange:指定当readyState属性改变时的事件处理句柄,属性只写。
        XMLHttpRequest对象属性onreadystatechange是readyState状态改变的事件触发器,用来指定当readyState属性发生改变时的处理事件。

    在使用过程中,通常通过将事件处理函数名称赋予onreadystatechange的方式,来为XMLHttpRequest指定事件触发器,而在事件处理函数中判

    断readyState状态值并做相应的处理。
        如上:http_request.onreadystatechange = processRequest;processRequest作为事件处理函数,并在processRequest函数体内在

    readyState状态为 4 时开始执行。
     readyState:返回当前请求的状态,属性只读。
        这些状态用长度为4的整形数据表示,其属性的状态含义如下:
        0:未初始化(对象已经建立,但是未初始化,即尚未调用open方法创建http请求)
        1:初始化(对象已经建立,但是未调用send方法发送http请求)
        2:发送数据(send方法已经被调用,但是当前的状态以及http头未知)
        3:数据传送中(已经接收部分数据,因为响应及http头不全,这时通过response系统方法获取部分数据会出现错误)
        4:传送完成(数据完毕,此时可以通过response系统方法获取完整的回应数据)
     responseBody:将回应信息正文以unsigned byte 数组形式返回,属性只读。
     responseText:以字符串的形式返回服务器响应信息,属性只读。
     responseXML:将响应信息格式化为XML Document对象返回,属性只读。
      
        XMLHttpRequest对象的方法以及含义如下:
        abort:取消当前请求;
            语法:http_request.abort();调用此方法,当前请求返回uninitialized状态。
        getAllResourceHeaders:获取相应的全部http头信息;像JSP中的HttpServletRequest对象一样,获取http请求的     请求头信息,语法

    :headers = http_request.getAllResourceHeaders();
        getResourceHeader:从响应信息中获取指定的http头信息。
            语法:head = http_request.getResourceHeader("header-name");
        open:创建一个新的http请求,并指定此请求的方法,URL,以及验证信息(用户名/密码)。
            语法:http_request.open(method,url,async,user,password);
            async为布尔值,指定请求是否异步方式,默认为true;如果为真,当state状态改变时会调用onreadystatechange属性指向的回调函数

    。如果服务器需要验证,则应该指定用户名和密码 。
        send:发送请求到http服务器并接收回应。创建http请求后,就可以向服务器发送http请求,send方法被调用
           语法:http_request.send(varBody);
          参数varBody为要发送给服务器的内容。如果没有内容要发送,varBody参数可以省略,但最好写为null,因为如果省略不写在Firfox中会

    报错,所以就为http_request.send(null);。此方法的同步或异步方式取决于open方法中的async参数。
        setRequestHeader:单独设定请求的某个头。
     status:返回当前HTTP请求的状态码,属性只读。如:404=“文件未找到”,200=“成功”
     statusText:返回当前HTTP请求的状态行,属性只读。

    XMLHttpRequest 的创建

    <script language="javascript" type="text/javascript">

    var request;

    function createRequest() {
     try {
      request = new XMLHttpRequest();
     } catch (trymicrosoft) {
      try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (othermicrosoft) {
       try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
        request = false;
       }
      }
     }

     if (!request)
      alert("Error initializing XMLHttpRequest!");
    }
    </script>

  • 相关阅读:
    2w字 + 40张图带你参透并发编程!
    完了,这个硬件成精了,它竟然绕过了 CPU...
    一文详解 Java 并发模型
    详解匈牙利算法与二分图匹配
    机器学习 | 详解GBDT在分类场景中的应用原理与公式推导
    Python | 浅谈并发锁与死锁问题
    LeetCode 91,点赞和反对五五开,这题是好是坏由你来评判
    LeetCode 90 | 经典递归问题,求出所有不重复的子集II
    【Azure DevOps系列】什么是Azure DevOps
    MSIL入门(四)之委托delegate
  • 原文地址:https://www.cnblogs.com/ericwen/p/ajaxXMLHttpRequest.html
Copyright © 2020-2023  润新知