Ajax及其应用

米柒

已于 2023-03-20 23:05:29 修改

阅读量167

点赞数 3

文章标签： ajax javascript 前端

于 2023-03-20 23:04:18 首次发布

本文链接：https://blog.csdn.net/qq_71615662/article/details/129599391

版权

Ajax是一种在不刷新整个页面的情况下实现页面局部更新的技术，通过XMLHttpRequest对象向服务器发送异步请求，接收到响应后更新页面。创建Ajax的基本步骤包括创建对象、监听响应、发送请求。Ajax的核心是异步请求，通过设置method、url和async属性，以及利用onload、onerror等事件处理响应。

摘要由CSDN通过智能技术生成

Ajax概述及其工作原理

什么是Ajax？

Ajax的全称为asynchronous JavaScript and XML，即异步的JavaScript和XML。

异步的理解：

通过Ajax向服务器请求数据，在不刷新整个页面的情况下，更新页面部分内容。

工作原理

原理图：

用户在浏览器中执行一些操作，要经历的步骤：

1.要通过Ajax引擎发送http请求到服务器请求数据。

2.请求成功后，服务器响应将请求的数据给Ajax引擎。

3.Ajax响应，将数据给浏览器。

Ajax就相当于一个服务员或中介，服务器就相当于厨师。客户点好菜由服务员将菜单给厨师，厨师做好后再给服务员，由服务员端到客户面前。这就实现了异步。如果没有服务员直接告诉厨师要吃什么客户就只能在哪里等菜做好拿走，厨师也无暇顾及其他客户，就是一个同步的过程。

因此异步请求是Ajax的核心。

创建Ajax的基本步骤：

1.创建XMLHttpRequest对象

XMLHttpRequest对象是用来与服务器进行数据交换的。

创建方式：

var httpRequest=new XMLHttpRequest();

2.建立监听或服务器响应状态（这一步可在下一步后面）

当从服务器端获取到响应的时候，调用回调函数，进行数据处理，比如展示，监听方式有很多种。

代码示例如下：

oReq.addEventListener("load",function(){
    console.log(this.responseText);
});

3.向服务器发送请求

在步骤一中创建了用于服务器交换数据的XMLHttpRequest对象，要向服务器发送请求。

（1）设置参数，调用该对象的open（）方法

httpRequest.open("method","url",async);

method是请求的类型，常见的有GET和POST。

url是请求地址。

async是设置同步或异步请求，其值为布尔类型，当为true时，使用异步请求；当为false时，使用同步请求，默认值为true。

（2）发送请求到服务端，调用该对象的send（）方法

httpRequest.send();

XMLHttpRequest对象的属性、方法和事件

属性：

readyState属性：

返回一个XMLHttpRequest代理当前所处的状态。

status属性：

只读属性，返回了 XMLHttpRequest 响应中的数字状态码。默认值为200。

如果 XMLHttpRequest 出错，浏览器返回的 status 也为 0。status 200 代表一个成功的请求

statusText属性：

返回了XMLHttpRequest 请求中由服务器返回的一个DOMString 类型的文本信息，这则信息中也包含了响应的数字状态码。比status属性多返回状态对应的文字信息，如：“ok”或者“Not Found”。

response属性：

返回响应的正文。返回类型取决于responseType的值。

responseText属性：

在一个请求发送后，从服务器端返回文本。

只有当responseType为text、“”、document时才能调用此属性，只有请求成功才能获得正确值，请求未完成或请求失败时值为空字符串“”。默认值为空字符串“”。

responseType属性：

是一个枚举字符串值，用于指定响应中包含的数据类型。默认值为text。

responseURL属性：

返回响应的序列化 URL，如果 URL 为空则返回空字符串。如果 URL 有锚点，则位于 URL # 后面的内容会被删除。如果 URL 有重定向，responseURL 的值会是经过多次重定向后的最终 URL。

例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/test', true);
xhr.onload = function () {
  console.log(xhr.responseURL); // http://example.com/test
};
xhr.send(null);

responseXML属性：

只读属性，返回一个包含请求检索的 HTML 或 XML 的Document，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。

只有当responseType为text、“”、document时才能调用此属性，只有请求成功才能获得正确值，请求未完成或请求失败时值为空字符串“”。默认值为null。

timeout属性：

是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。

upload属性：

返回一个XMLHttpRequestUpload对象，用来表示上传的进度。

可以被绑定在upload对象上的事件监听器如下：

withCredentials属性：

是一个布尔类型，它指示了是否该使用类似 cookie、Authorization Headers (头部授权) 或者 TLS 客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。

方法

open（）

方法初始化一个新创建的请求，或重新初始化一个请求。，前面步骤中有提及。

send（）

用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。前面步骤有提及。

abort（）

终止该请求。当一个请求被终止，它的readyState将被置为XMLHttpRequest.UNSENT (0)，并且请求的status 置为 0。无参数，返回值为undefined。

getAllResponseHeaders（）

返回所有的响CRLF分割的字符串，或者 null 如果没有收到任何响应。

事件

abort

当一个请求终止时 abort 事件被触发，比如程序执行XMLHttpRequest.abort（）。

error

当请求遇到错误时，将触发error 事件。

load

当一个XMLHttpRequest请求完成的时候会触发load 事件。

loadend

loadend 事件总是在一个资源的加载进度停止之后被触发 (例如，在已经触发“error”，“abort”或“load”事件之后)。

loadstart

当程序开始加载时，loadstart 事件将被触发。

timeout

当进度由于预定时间到期而终止时，会触发 timeout 事件。

用法示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="posts"></ul>
    <script>
        var url='https://jsonplaceholder.typicode.com/posts';
        //1.new对象
        var xhr=new XMLHttpRequest();
        //2.加监听
        xhr.addEventListener('load',function(){
            if(xhr.status===200){
                console.log('in load event');
                console.log(xhr.response);
                //（1）把数据转换为对象
                var data=JSON.parse(xhr.response);
                //（2）变量，生成li
                var liAll='';
                for(var i=0;i<data.length;i++){
                    var oneLi=`<li>title:${data[i].title} author:${data[i].author}</li>`;
                    liAll=liAll+oneLi;
                }
                //（3）将生成的li加入到ul
                document.querySelector("#posts").innerHTML=liAll;
            }else{
                //其他错误情况返回错误的返回码
                console.log('其他错误情况',xhr.status);
            }  
        })
        //error
        xhr.addEventListener('error',function (e) {
            console.log('error event:',e);
        })
        //3.初始化、设置
        //异步
        xhr.open('GET',url,true);
        //4.发送
        xhr.send();
        console.log('after send');
    </script>
</body>
</html>

效果展示：