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;
    
  • 相关阅读:
    SQL删除多表关联数据的三种方法
    如何防范SQL注入攻击
    非关系型数据库和关系型数据库有哪些区别?
    Asp.Net生命周期的详解
    ASP与ASP.NET区别
    COOKIE和SESSION有什么区别?
    关于SQL数据库中cross join 和inner join用法上的区别?
    Java-编程规范与代码风格
    TCP 连接建立与关闭(三次握手与四次挥手)
    OSI 七层模型
  • 原文地址:https://www.cnblogs.com/roddy/p/6514072.html
Copyright © 2011-2022 走看看