zoukankan      html  css  js  c++  java
  • 原生的AJAX

      AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML【Extensible Markup Language】 ),是指一种创建交互式网页应用的网页开发技术。对于传统的数据交互而言,数据都是存储在服务器端,想要请求数据或者提交数据,只能同步实现数据的传输,那么在数据提交或者是数据获取的过程中,用户必须等待信号传递、数据处理、数据打包等过程,无法实现用户在等待过程中也能进行其他操作的体验,这对于浏览器而言并不是一个友好的体验。

      使用AJAX就解决了这个问题,他通过少量数据的传输,获得改变页面少量信息的数据,再通过JS控制页面的局部刷新,使得页面交互过程不必再刷新整个页面,也不用用户等待数据处理完成。由于用户并不关心数据什么时候处理完成,所以AJAX的实现是一个异步的过程。

      总而言之,AJAX的优势就是在于:

    • 使用Javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
    • AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

    使用原生JS执行流程,主要为以下步骤:

    1. 创建XMLHttpRequest对象(考虑浏览器兼容的问题)
    var xhr = function getXmlHttpObject() {
        var objXMLHttp = null;
        if (window.XMLHttpRequest) {
            objXMLHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return objXMLHttp;
    }

    2、使用XMLHttpRequest对象打开一个连接(指定连接方式和连接地址以及是否同步),接收三个参数,分别为请求的类型,请求的路径以及指明采用同步还是异步,异步请求为true

    xhr.open("POST","URL ",true);

    3、建立连接之后,需要发送数据。这时候需要对数据有一个说明,所以需要设置请求的头部(请求的类型和请求的编码格式),请求头的设置只能在open之后,send之前

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    4、发送请求,根据请求类型,采用get直接调用send()方法,数据通过url发送大服务器;采用post需要将数据作为方法的参数传递。

    xhr.send(data);

    5、设置回调函数,当ajax数据传递完成,并且客户端和服务端正常,那么就可以执行ajax完成后的操作。这里是一个事件监听函数,信息在客户端和服务端传递时就会触发该函数,而我们就能在响应完成后的xhr对象上获得服务端返回的数据

    ajax状态码(readyState):
    0 - (未初始化)还没有调用send()方法
    1 - (载入)已调用send()方法,正在发送请求
    2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
    3 - (交互)正在解析响应内容
    4 - (完成)响应内容解析完成,可以在客户端调用了

    xhr.onreadystatechange=function(){
        //如果readyState为4,表示响应已经被完全接收。
        if(xhr.readyState==4){
            //如果获得的结果状态代码为200,表示服务端正常返回
            if(xhr.status==200){
                var txt=xhr.responseText;
                document.getElementById("err").innerHTML=txt;
            }
        }
    }

    完整代码:

    var xhr = getXmlHttpObject();
    xhr.open("get", "./users.json", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send();
    xhr.onreadystatechange = function() {
        //如果readyState为4,表示响应已经被完全接收。
        if (xhr.readyState == 4) {
            //如果获得的结果状态代码为200,表示服务端正常返回
            if (xhr.status == 200) {
                var txt = xhr.responseText;
                console.log(txt);
            }
        }
    }
    
    function getXmlHttpObject() {
        var objXMLHttp = null;
        if (window.XMLHttpRequest) {
            objXMLHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return objXMLHttp;
    }
  • 相关阅读:
    标签的讲解
    属性分类
    LeetCode 003. 无重复字符的最长子串 双指针
    Leetcode 136. 只出现一次的数字 异或性质
    Leetcode 231. 2的幂 数学
    LeetCode 21. 合并两个有序链表
    象棋博弈资源
    acwing 343. 排序 topsort floyd 传播闭包
    Leetcode 945 使数组唯一的最小增量 贪心
    Leetcode 785 判断二分图 BFS 二分染色
  • 原文地址:https://www.cnblogs.com/zzmiaow/p/8030405.html
Copyright © 2011-2022 走看看