ajax

Ajax如何使用

什么是ajax?

• AJAX（Asynchronous JavaScript And XML），（异步 JavaScript 和 XML），中文名：阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。
• AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
• 前端通过与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

为什么要使用AJAX

• 更自然、流畅的用户体验，对用户的操作即时响应
• 在不中断用户操作的情况下与Web服务器进行通信
• 更灵敏的响应用户访问，实现近似于桌面应用程序的交互效果
• 通过局部更新页面降低网络流量，提高网络的使用效率

同步与异步

• 同步，可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。

• 异步，执行完函数或方法后，不必阻塞性地等待返回值或消息，只需要向系统委托一个异步过程，那么当系统接收到返回值或消息时，系统会自动触发委托的异步过程，从而完成一个完整的流程。

• 所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

• 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务； //执行栈

• 异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕， //任务队列

• "任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

• 具体来说，异步运行机制如下：

• （1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

• （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

• （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

• （4）主线程不断重复上面的第三步。

XMLHttpRequest对象

• AJAX的核心对象是XMLHttpRequest，即AJAX的异步操作，和服务器 交互主要依赖该对象。
• XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力
• 以前浏览器负责显示和发送请求接收响应。两件事情同一时刻只能做一件，没法同时进行。这样会让用户感觉不好(友好性不好)，
• 使用XMLHttpRequest对象，可以把浏览器解脱出来，可以让浏览器只负责显示，而完成请求的事情由XMLHttpRequest对象负责。
• 这样两者各负其责，效率更高，效果更好，用户体验很好，用户永远不会看到浏览器空白

ajax的编写步骤

• 使用 new XMLHttpRequest创建xhr对象
• xhr.open 初始化请求参数
• xhr.send 发送网络请求
• xhr.onreadystatechange 添加事件,设置回调函数
• xhr.responseText 返回给前端的数据

<script>
 
    let xhr = new XMLHttpRequest();
    xhr.open("POST","text.txt","true");
    //xhr.open("POST","content.php","true");
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            console.log(xhr.responseText);
        }
    }
    xhr.send();

XMLHttpRequest对象的兼容

 let xhr;
    if (window.ActiveXObject) {
        //ie
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    } else {
        //非ie
        xhr =  new XMLHttpRequest();
    }

XMLHttpRequest的属性与状态码

• onreadystatechange:每次对象状态改变所触发事件的事件处理程序(每当 readyState 属性改变时，就会调用该函数。)

• readyState:对象状态值：(存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。)

  ​ 0 = 请求未初始化（uninitialized）对象创建完毕就是0

  ​ 1 = 正在加载（loading）(服务器连接已建立) 1：对象设置完成后就是1.即调用open函数后，装载，准备工作

  ​ 2 = 加载完毕（loaded）( 请求已接收) 调用send函数后，变成，因为，只要调用send说明加载完毕

  ​ 3 = 交互（interactive）(请求处理中)到服务端了

  ​ 4 = 完成（complete）(请求已完成，且响应已就绪) 服务器端处理完毕了

• responseText:从服务器进程返回的数据的字符串形式

• status: 从服务器返回的数字代码，如404（未找到）或200（就绪）

• responseXML: 从服务器进程返回的数据的字符串形式 //JSON