ajax请求步骤与自定义指令创建的步骤

最新推荐文章于 2023-04-19 11:02:53 发布

ZJNing

最新推荐文章于 2023-04-19 11:02:53 发布

阅读量265

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/ZJNing/article/details/126629980

版权

本文详细介绍了AJAX请求的五个步骤，包括初始化XMLHttpRequest对象、设置请求方法和URL、发送请求、监测状态变化以及解析并获取数据。同时，展示了如何在Vue中创建一个自定义指令，通过实例讲解了如何匹配指令并进行元素操作，如设置样式和添加输入元素。

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

一、ajax请求的五个步骤

AJAX（Asynchronous JavaScript and XML）：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这就意味着可以在不重新加载整个网页的情况下，对网页的局部进行更新。

1、初始化变量，获取到XMLHttpRequest

//   1.初始化变量

  var xhr = new XMLHttpRequest()

2、连接地址

规定请求的类型、URL 以及是否异步处理请求：

//   2.连接接地址

   xhr.open(method, url)

3、发送请求

// 3.发送请求
xhr.send()

4、监测状态改变

//   4.监测状态改变
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    consolo.log(xhr)
                }
            }
        }

5、获取数据

//   4.监测状态改变
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    //   5.获取数据
                    var response = JSON.parse(xhr.response)
                    // console.log(response,'response');
                    var list = response.result.list
                    console.log(list, 'list');
                    resolve(list)
                } else {
                    reject(xhr.status)
                }
            }
        }

二、自定义指令创建步骤

创建一个简单自定义指令：

首先：匹配指令

<body>
    <div id="root">
        <div v-box></div>
    </div>
</body>

其次：用directives方法进行注册

并给指令box进行赋值设置

<script>
    Vue.config.productionTip = false
    let vm = new Vue({
        el:"#root",
        data() {
            return {
                
            };
        },
        directives: {
            box(element) {
                // 外边框
                element.style.border = "1px solid #666"
                element.style.height = "150px"
                element.style.width = "300px"
                element.style.background = "aqua"

                // input
                var input = document.createElement('input')
                element.appendChild(input)
                input.style.background = "pink"
                input.autofocus = true
                input.style.height = "40px"
                input.placeholder = "请输入"
            }
        }
    })
</script>