• AJAX 初识


      AJAX全称为 Asynchronous Javasript And XML,是在浏览器端进行网络编程(发送请求,接收响应)的技术方案。AJAX 也就是浏览器提供的一套API,可以供 Javascript 调用,从而通过代码来控制请求和响应,实现网络编程。

    AJAX 使用基本模板

    使用 AJAX 的过程相当于访问一个页面

         // 1.创建一个 XMLHttpRequest 的对象(相当于打开了一个浏览器)
         // 兼容方案
         var
    xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); // 2,输入网址(get或post 根据需求设置,一般参数通过url传递则使用 get, 关于账户密码等敏感信息使用 post) xhr.open('get', 'time.php'); // 3.敲回车,开始请求 // 因为响应需要时间,所以无法通过返回值的方式返回响应 // var response = xhr.send(); // console.log(response); xhr.send(); // 3.等待响应 xhr.addEventListener('readystatechange', function () { if (this.readyState === 4) { // 获取响应体 console.log(this.responseText); } });

    详解等待状态(readyState)

     readyState 状态描述 含义
    0 unsent 初始化,请求了一个代理对对象,
    1 opened open()方法已经调用,建立一个与服务端特定端口的连接
    2 header_receive 已经接收到了响应头,但是还没有接收响应体
    3 loading 正在下载响应体
    4 done 响应体下载完成,可以直接使用 responseText

    遵循HTTP

    var xhr = new XMLHttpRequest();
    
            // 设置请求行
            xhr.open('get', 'time.php');
    
            // 设置请求头
            xhr.setRequestHeader('Accept', 'text/plain');
    
            // 设置请求体
            xhr.send(null);
    
            xhr.addEventListener('readystatechange', function () {
                if (this.readyState === 4 && this.status === 200) {
    
                    // 获取响应状态码
                    console.log(this.status);
    
                    // 获取响应状描述
                    console.log(this.statusText);
    
                    // 获取响应头信息
                    console.log(this.getResponseHeader('Content-Type'));    // 指定响应头
                    console.log(this.getAllResponseHeaders()); // 全部响应头
    
    
                    // 转换成数组
                    console.log(this.getAllResponseHeaders().split("
    "));
    
                    // 获取响应头中的某一个信息
                    console.log(this.getResponseHeader('server'));
    
                }
            });

    同步与异步

    同步:在同一时刻只能做同一件事,在执行一些耗时的事情时不去做其他事情,而是等待

    异步:在执行一些耗时的事情是去做其他事情,而不是等待(性能更好,默认为 true)

    同步:

                    console.time('ajax同步');
            const xhrSync = new XMLHttpRequest();
            xhrSync.open('get', 'time.php', false);
            xhrSync.send();            // 同步代码会卡在 send() 这里 
            console.log(xhrSync.responseText);
            console.timeEnd('ajax同步');    

    异步:

    // 异步性能更好,时间更短
            console.time('ajax异步');
            const xhr = new XMLHttpRequest();
         // 这里 第三个参数默认为 true,即不写true时为异步(大多数使用) xhr.open(
    'get', 'time.php', true); xhr.send(); console.log(xhr.responseText); console.timeEnd('ajax异步');
  • 相关阅读:
    thinkphp6 模型中时间戳报错
    php获取真实的ip信息
    java 获取字符串长度
    thinkphp6 linux首次部署Access denied
    mysql5.7 分配子账户和解决进程错误
    springboot controller引用请求体和返回体方法
    微信公众号token 验证
    springboot常量定义
    python 抓接口 利用requests 增加 headers示例
    asp.net web api 如何设置允许后台跨域访问
  • 原文地址:https://www.cnblogs.com/duxiu-fang/p/10910450.html
Copyright © 2020-2023  润新知