Ajax学习笔记2-CSDN博客

本文链接：https://blog.csdn.net/qq_43763188/article/details/122623459

Ajax

一、异步

异步：程序执行时不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果，如果已有返回结果，则调用事先准备好的回调函数处理异步代码执行结果。

二、Ajax封装

在实际情况中，需要发送多个Ajax请求，为解决代码重复问题，需要将Ajax请求代码封装在函数中，发送请求时调用函数即可。

使用Ajax技术向服务器端发送请求时，它一般都会返回JSON类型的数据，但是客户端拿到的却是一个JSON字符串，如果我们想拿到JSON数据，就要把JSON字符串转换为JSON对象，我们希望把这个操作封装在函数中，这样函数调用者就不需要关注这一细节。

key : value//JSON数据格式
JSON.parse();//将数据转换为JSON对象
JSON.stringif();//将JSON对象转换为字符串

        function ajax(options) {
            //设置默认值
            var defaults={
               type:'get',
               url:'',
               header:{
                   'Content-Type':'application/x-www-form-urlencoded'
               },
               success:function(){},
               error:function(){},
            }
            //assign是浅拷贝，使用它将options对象中的属性覆盖defaults对象中的属性
            Object.assign(defaults,options);
            var xhr = new XMLHttpRequest();
            //根据post和get方式的不同分别设置
            var params = '';
            for (var attr in defaults.data) {
                params += attr + '=' + defaults.data[attr] + '&';
            }
            params = params.substr(0, params.length - 1);

            if (defaults.type == 'get') {
                defaults.url = defaults.url + '?' + params;
            }

            xhr.open(defaults.type, defaults.url);
            if (defaults.type == 'post') {
                var contentType = defaults.header[Content - Type];
                xhr.setRequestHeader('Content-Type', contentType);
                if (contentType == 'application/json') {
                    xhr.send(JSON.stringify(defaults.data))
                } else {
                    xhr.send(params);
                }

            } else {
                xhr.send();
            }
            //监听xhr对象下面的onload事件，当xhr对象接受完响应数据后触发
            //当http状态码为200时，调用处理成功情况的函数，否则调用处理失败的函数
            xhr.onload = function () {
                //xhr.getAllResponseHeader()获取响应头中的数据
                var contentType = xhr.getAllResponseHeaders('Content-Type');
                var resopnseText = xhr.responseText;
                //如果响应类型中包含application/json，将json字符串转换为json对象
                if (contentType.includes('application/json')) {
                    resopnseText = JSON.parse(resopnseText);
                }
                if (xhr.status == 200) {
                    defaults.success(xhr.responseText, xhr);
                } else {
                    defaults.error(xhr.responseText, xhr);
                }

            }
        }

        ajax({
            url: "http://localhost:3000/first",
            success: function (response) {
                console.log('hhhhh' + response);
            },
        });

三、模板引擎

在传统网站中，客户端向服务端发送请求，服务端都将数据和HTML文件拼接好，再将拼接好的HTML字符串发送给客户端。但是使用Ajax技术向服务器端发送请求时，服务器端大多采用JSON数据格式响应内容，数据和HTML的拼接需要在客户端完成。在客户端拼接时也需要使用模板引擎提供的模板语法。
art-template模板引擎使用：①下载art-template模板引擎库文件并在HTNL页面中引入库文件②准备art-template模板③告诉模板引擎将哪一个数据和哪一个模板进行拼接④将拼接好的html字符串添加到页面中⑤通过模板语法告诉模板引擎，数据和htm字符串要如何拼接。

<!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>
    <!-- 1.将模板引擎的库文件引入当前页面 -->
    <script src='template-web.js'></script>
</head>
<body>
    <div id="div1"></div>
    <!-- 2.准备art-template模板 -->
    <script type="text/html" id="tp1">
        <h1>{{username}}{{age}}</h1>
    </script>
    <script type="text/javascript">
        // 3.告诉模板引擎将那个数据和哪个模板拼接
        var html=template('tp1',{username:'alice',age:18});
        document.getElementById('div1').innerHTML=html;
    </script>
</body>
</html>

四、FormData对象

FormData对象的作用：①模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数格式②异步上传二进制文件。
使用场景一：将表单转换为表单对象，然后将转换后的表单对象作为参数传递到服务端。步骤：①准备表单，html表单中需要name属性，在表单提交时要将内容作为参数传递给服务端，name会作为请求参数的属性名称②将HTML表单转换为FormData对象，使用FormData构造函数创建FormData对象，FormData构造函数可以接受一个表单BOM对象作为参数，构造函数内部会将表单控件中的数据拼接成请求参数所需的格式③提交表单对象，直接将创建的FormData对象放在Ajax对象下的send()方法中。FormData对象不能用于get请求。

<form id="form">
        <input type="text",name="username">
        <input type="password",name="password">
        <input type="button" id="button",value="提交">
    </form>
    <script type="text/javascript">
        var button=document.getElementById("button");
        var form=document.getElementById("form");
        button.onclick=function(){
            //将普通的html表单转换为表单对象
            var formData=new FormData(form);
            //创建Ajax对象，进行配置
            var xhr=new XMLHttpRequest();
            xhr.open('post','http://localhost:3000/formData');
            xhr.send(formData);
            xhr.onload=function(){
                if(xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
        }
    </script>

FormData对象的实例方法：

formData.get('username');//获取表单对象中属性的值
formData.set('username','value');
//set设置表单对象中属性的值，如果设置表单属性存在，将会覆盖原有的值.如果不存在，将会创建这个表单属性
formData.delete('key');//删除表单对象中属性的值
formData.append('key'，'value');
//向表单对象中追加属性值，set与append方法的区别是，在属性名已存在的情况下，set会覆盖已有原有值，而append会保留两个值。