ajax｜青训营笔记

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许在不重新加载整个页面的情况下，通过后台与服务器进行异步通信，获取数据并更新部分页面内容。

传统的网页应用程序在与服务器进行通信时，通常需要整个页面进行刷新或重新加载。而使用AJAX技术，可以通过JavaScript发送HTTP请求与服务器交互，然后在后台处理响应，无需刷新整个页面。

AJAX主要通过以下几个核心技术实现：

异步：AJAX请求是异步执行的，即网页在发送AJAX请求后，可以继续执行其他操作，不需要等待服务器响应。
XMLHttpRequest对象：AJAX通过XMLHttpRequest对象创建HTTP请求，并发送到服务器。

AJAX技术的优势包括：

提升用户体验：由于不需要整个页面的刷新，用户界面更加动态、快速响应。
节省带宽：由于只更新页面的一部分内容，而不是整个页面，可以减少对服务器和网络带宽的消耗。
提高性能：通过异步请求，可以在后台同时处理多个请求，提高系统的并发性能。
与服务器交互：可以使用AJAX发送不同类型的请求（如GET、POST），与服务器进行数据交换。

关于原生ajax的用法：

window.onload = function () {

    var $ = function (id) {
        return document.getElementById(id);
    }

    $("btn").onclick = function () {
        var ajax = null;
        //1.创建ajax对象 --- 其实创建的为XMLHttpRequest对象
        if (window.XMLHttpRequest) { //判断是否为非IE6
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            ajax = new XMLHttpRequest();
        } else {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //2、连接服务器：open(方法，文件名，同步异步)
        /*
        * 参数一：post/get：与POST相比，GET更简单也更快，并且在大部分情况下都能用
        * 区别：
        * 参数二：请求的文件
        * 参数三：同步异步
        * 同步：而同步正好和异步相反——》理解为：一件一件的来
        * 异步：让我们共同进步  吃饭、看电视同步进行  ——》理解为：多件事一起做
        * 同步（false）：一件一件的来  异步（true）：多件事一起做(Ajax天生是做异步的)
        * */
        ajax.open("GET", "data.txt", true);

        //3、发送数据
        ajax.send();

        //4、接受返回的数据
        /*
        * 问题：ajax是跟网络打交道的，所以服务器发送过来的东西，时间是不一定的，
        * 有可能立马返回来了，也有可能是1分钟、5分钟等等，根据网速而定。
        * 那返回的值怎么办呢？实际上它是以一个事件存在的，当服务器的信息返回回来的时候，
        * 这个事件就会被调用
        * */
        ajax.onreadystatechange = function () {
            /**
             * onreadystatechange意思是当与服务器发生交互时，会发生的事件
             那我怎么知道东西有没有发送过来呢？所以这也是有个状态的。
             readyState：告诉我们浏览器和服务器进行到哪一步了
             从 0 到 4 发生变化。
             0: 请求未初始化（还没有调用到open方法）
             1: 服务器连接已建立（已调用send方法，正在发生请求）
             2: 请求已接收（send方法完成，已接收到全部响应内容）
             3: 请求处理中（解析响应内容）
             4: 请求已完成，且响应已就绪
             status
             200: "OK"
             404: 未找到页面
             */
            alert(ajax.readyState);
            if (ajax.readyState == 4 && ajax.status == 200) {
                alert("请求成功，" + ajax.responseText);
            }
        }
    }
}

ajax｜ 青训营笔记

ajax｜ 青训营笔记

ajax｜青训营笔记

ajax｜青训营笔记