zoukankan      html  css  js  c++  java
  • Ajax 的简介与使用

    一、什么是Ajax

    Ajax 的全称是 Asynchronous JavaScript and XML(即异步的 JavaScript 和 XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

    二、Ajax的优缺点

    1、优点:

    • 通过异步模式,提升了用户体验
    • 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
    • Ajax 引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载

    2、缺点

    • 不支持浏览器back按钮
    • 安全问题,Ajax 暴露了与服务器交互的细节
    • 对搜索引擎的支持比较弱

    三、Ajax 的使用 -- 实现步骤

    1、创建 XMLHttpRequest 对象,即创建一个异步调用对象

    var XHR;
    if(window.XMLHttpRequest){
      XHR=new XMLHttpRequest();                   //IE7+, Firefox, Chrome, Opera, Safari...
    }else{
      XHR=new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5

    2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

    XHR.open(method,url,async);
    // method:请求类型,GET 或 POST---------可选
    // url:文件在服务器上的位置--------------必要参数
    // async:true(异步)或 false(同步)----可选
    // 以上参数使用时均要加上“”

    3、设置响应 HTTP 请求状态变化的函数

    XHR.onreadystatechange = function () {
        //异步调用成功
        if (XHR.readyState === 4) {
            if ((XHR.status >= 200 && XHR.status < 300) || XHR.status === 304) {
                //获得服务器返回的数据
                data = JSON.parse(XHR.responseText);
                // 渲染数据
                renderDataToDom();
            } else {
                console.log('unsuccess');
            }
        }
    };

    4、发送 HTTP 请求

    request.send();

    5、获取异步调用返回的数据 (JSON

    6、使用 JavaScript 和 DOM 实现局部刷新

    四、Ajax中的一些处理总结

    1、服务器响应处理

    • responseText:获得字符串形式的响应数据
    • responseXML:获得XML 形式的响应数据

    2、同步处理

    XHR.open("GET","demo_get.html",false);
    XHR.send();    // 直接在 send() 后面处理返回来的数据
    document.getElementById("target").innerHTML=XHR.responseText;

    3、异步处理

    异步处理相对比较麻烦,要在请求状态改变事件中处理

    XHR.onreadystatechange=function(){     //接收到服务端响应时触发
        if(XHR.readyState==4&&XHR.status==200){
            document.getElementById("target").innerHTML=XHR.responseText;
        }
    }

    下面是 XMLHttpRequest 对象的三个重要的属性

    • onreadystatechange:存储函数,每当 readyState 属性改变时,就会调用该函数
    • readyState:存有 XMLHttpRequest 的状态

    0:请求未初始化

    1:服务器连接已建立

    2:请求已接收

    3:请求处理中

    4:请求已完成,且响应已就绪

    • XHR.status:表示响应状态码。比较常见的有:

    200:“OK”(当 readyState 等于 4 且状态为 200 时,表示响应已就绪)

    304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)

    403:(禁止) 服务器拒绝请求

    404:(未找到) 服务器找不到请求的网页

    408:(请求超时) 服务器等候请求时发生超时

    500:(服务器内部错误) 服务器遇到错误,无法完成请求

  • 相关阅读:
    Eclipse / android studio 添加第三方jar包 步骤
    Android checkbox 自定义点击效果
    Android 程序打包和安装过程
    Android 基础
    (转)Genymotion安装virtual device的“unable to create virtual device, Server returned Http status code 0”的解决方法
    (转)eclipse 导入Android 项目 步骤
    微信开放平台注册 步骤
    Android Studio 初级安装
    数组
    作用域问题代码
  • 原文地址:https://www.cnblogs.com/Leophen/p/11208931.html
Copyright © 2011-2022 走看看