zoukankan      html  css  js  c++  java
  • 原生AJAX基础讲解及兼容处理

      AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)。

      AJAX不是新技术 ,但却是热门的技术。它可以在不重载(刷新)整个页面的情况下与服务器进行数据交互并更新网页模块。
      AJAX的优点有很多:可以局部刷新、按需加载,这样就减轻了服务器的数据流量。并且在页面更新的同时,用户可以浏览器网页的其它内容而不受影响,也减轻了结构负担。AJAX也不是万能的,在有以上优点的同时SEO也受到了影响。
      在学习AJAX之前,必须先有HTML/XHTML、CSS、JavaScript/DOM的基础。
      AJAX与服务器进行数据交互,必然涉及到服务器端,与此同时也就涉及到了服务器请求对象的创建(new XMLHttpRequest())、确认请求方式(open())、发送请求(send())以及响应请求(responseText)。
      创建对象:
        IE9+及其它浏览器支持使用new XMLHttpRequest()的创建对象方式,而IE8及以下则使用new ActiveXObject()的方式进行创建。
        看了网上许多人使用如下代码进行兼容:

    1 try {
    2     xml = new ActiveXObject("Msxml2.XMLHTTP");
    3 } catch(e) {
    4     try {
    5         xml = new ActiveXObject("Microsoft.XMLHTTP");
    6     } catch(e1) {
    7         xml = new XMLHttpRequest();
    8     }
    9 }

        笔者用IE11调试功能测试IE10及以下不写new ActiveXObject("Msxml2.XMLHTTP")也是没问题的,于是在创建对象时可以使用代码:
        var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
      确认请求:
        xml.open('get', 'url', true/false);
        第一个参数表示:string. 访问方式,有两具值:get/post,大部分的时候使用get
        第二个参数表示:string. 要连接的服务器网址
        第三个参数表示:boolean. 表示是否需要异步请求(true为发起异步加载)
      发送请求:
        xml.send();
        如果需要发送数据则采用xml.send(str);
      响应数据:
        xml.onreadystatechange = function() {
          if (xml.readyState == 4 && xml.status == 200) {
            alert(xml.responseText);
          }
        }

      status返回链接的状态,一般返回200与404,200表示成功返回,404表示未找到页面。
      readyState有5个值,分别为:0、1、2、3、4。而每当值改变时都会触发一次onreadystatechange。
      readyState的5个值含义分别为:

    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成,且响应已就绪

      也就是当请求完成,并且找到页面时,然后才获取服务器上的数据。

  • 相关阅读:
    openCV学习——一、图像读取、显示、输出
    caffe配置文件
    5.卷积神经网络
    【caffe】基本数据结构blob
    URLSearchParams对象
    window.history对象
    在React项目中添加ESLint
    memorization-根据输入重新计算render的数据
    React重置非受控组件state的方法
    彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight
  • 原文地址:https://www.cnblogs.com/wuyuchang/p/3904655.html
Copyright © 2011-2022 走看看