zoukankan      html  css  js  c++  java
  • AJAX --- 一种创建交互式网页应用的网页开发技术

    AJAX

    ajax核心技术就是 XMLHttpRequest 对象,简称XHR对象。这种客户端与服务器不刷新页面请求数据技术主要是利用XMLHttpRequest对象实现的,IE7 之前版本的浏览器是通过 ActiveXObject 对象实现的。

    创建XHR实例

    var xhr = (typeof XMLHttpRequest === "object") ? new XMLHttpRequest() : new ActiveXObject();
    

    指定readyStatechange事件处理程序

    • 请求/响应步骤: 启动请求 → 发送请求 → 接收部分数据 → 接收完整数据
    • 用户通过检测XHR对象的 .readyState 属性来判断当前请求/响应阶段。
    XHR.readyState 说明
    0 未启动请求
    1 启动请求
    2 发送请求
    3 接收部分数据
    4 接收完整数据

    每次 .readyState 属性值发生变化都会触发一个 readyStatechange 事件,用户可以监听这个事件来判断数据是否接收完毕。

    xhr.onreadyStatechange = function() {
        // xhr.readyState
    };
    

    启动请求

    XHR对象的 .open( method, url, bool ) 方法是启动一个请求(注意:这里并没有发送请求!)。

    参数 说明
    method 请求方法(get、post...)
    url 请求url
    bool 是否异步发送
    xhr.open( "get", "index.php", false );
    

    发送请求

    XHR对象的 .send( null ) 方法是正式发送请求。

    xhr.send( null );
    

    接收数据

    当服务器响应请求后,响应的数据会自动填充 XHR 对象的属性中。

    属性 说明
    responseText 响应文本
    responseXML 响应数据的XML DOM文档
    status 响应HTTP状态
    statusText 响应HTTP状态说明
    // 建议判断status的状态码来确定下一步动作
    xhr.onreadyStatechange = function() {
        if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) {
            console.log( xhr.responseText );
        }
    }
    

    取消XHR请求/响应

    • 通过XHR对象的 .abort() 方法来取消请求或者关闭响应。
    • 终止请求之后, XHR 会停止触发事件,并且禁止访问与响应有关的属性。
    • 终止请求之后,最好释放XHR引用,避免内存浪费。
    xhr.abort();
    xhr = null;
    
  • 相关阅读:
    《2019年软件工程助教培训计划》
    地铁线路项目-结对编程
    预培训-个人项目(地铁线路规划)
    粗读《构建之法》后的问题
    netapp 修改IP地址
    jump server 2.6.1 安装与配置
    CCNA-实验1-Manage_IOS
    系统结构综合实践期末大作业 第22组
    2017级系统综合实践第7次实践作业 01组
    2017级系统综合实践第6次实践作业 01组
  • 原文地址:https://www.cnblogs.com/roddy/p/6514072.html
Copyright © 2011-2022 走看看