前端小白的学习之路(Ajax 三)

吃清心的椰羊

已于 2024-03-10 17:47:26 修改

阅读量494

点赞数 10

文章标签：学习

于 2024-03-10 17:46:48 首次发布

本文链接：https://blog.csdn.net/weixin_245249828/article/details/136605099

版权

提示：本文是我跟随老师封装的一个简易的ajax，可以大致了解到Ajax的工作原理

Ajax的工作原理 :

当你在网页上点击按钮或者提交表单时，通常会触发一个事件，比如JavaScript函数。在Ajax中，当这个事件触发时，JavaScript会创建一个XMLHttpRequest对象。这个对象是用来和服务器进行通信的。然后，JavaScript通过这个对象发送HTTP请求到服务器，请求特定的资源或者数据。

一旦服务器收到了这个请求，它会处理这个请求，可能是从数据库中检索数据或者执行其他操作，然后将结果返回给浏览器。

浏览器接收到服务器返回的数据后，JavaScript会解析这个数据，然后根据需要更新页面的内容。这个过程是异步的，也就是说，在等待服务器响应的过程中，用户可以继续与页面交互。

代码:

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>

<body>
    <h3 class="msg"></h3>

    <script>
        // 定义$$对象
        var $$ = {};

        // 把这个对象
        // {appid:76991983,appsecret:"KcQs38fI",unescape:1, city: "漠河"}
        // 转成以下格式的字符串
        // appid=76991983&appsecret=KcQs38fI&unescape=1&city=漠河

        // 添加方法
        $$.ajax = function (option) {
            // 定义变量记录ajax相关的参数
            var url = option.url;
            var type = option.type || 'get';
            var async = option.async === undefined ? true : option.async;
            var data = option.data;
            var str = '';
            if (data) {
                for (var key in data) {
                    str += key + "=" + data[key] + "&"
                }
                // 删除最后一个字符&
                str = str.slice(0, str.length - 1);
            }
            // 判断是执行同源策略的代码
            // ajax
            // 使用ajax四个步骤
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 1) {
                    // 请求之前
                    option.beforeSend && option.beforeSend();
                }
                // 判断请求完成
                if (xhr.readyState === 4) {
                    // 判断是否响应成功
                    if (xhr.status === 200) {
                        // 表示响应成功
                        // var content = xhr.responseText;
                        option.success && option.success(xhr.responseText);
                    }
                    else {
                        // 表示响应成功
                        option.error && option.error(xhr.responseText);
                    }

                    // 请求完成
                    option.complete && option.complete();
                }
            }
            // 判断请求是get方式，还是其他方式post
            if (type == "get" && str) {
                // get 请求方式，需要把数据拼接在接口地址尾部
                url = url + "?" + str;
            }
            xhr.open(type, url, async);
            // 判断用户请求是post 设置一下请求头
            if (type == "post") {
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            }
            // post 方式请求，需要在send(数据)
            xhr.send(type == 'get' ? null : str);
        }

        

        //调用我封装的ajax函数
        $$.ajax({
            url: '03_data.txt',// 数据地址/文档地址/接口地址
            type: 'get',// 请求方式
            success: function (content) {// 请求成功执行的回调函数
                // 如果这个content本身就是一个对象，就不需要parse解析了
                var obj = JSON.parse(content);
                console.log("obj:", obj);
                // 渲染数据
                document.querySelector(".msg").innerHTML = obj.message;
            },
            error: function (err) {
                console.log(err)
            }
        })

        // 天气接口
        // http://v1.yiketianqi.com/free/day?appid=你的账号信息&appsecret=你的账号信息&unescape=1&city=%E6%BC%A0%E6%B2%B3
        $$.ajax({
            url: 'http://v1.yiketianqi.com/free/day',// 数据地址/文档地址/接口地址
            type: 'get',// 请求方式
            data: {
                appid: "你的账号信息",
                appsecret: "你的账号信息",
                unescape: 1,
                city: "漠河"
            },
            success: function (content) {// 请求成功执行的回调函数
                // 如果这个content本身就是一个对象，就不需要parse解析了
                var obj = JSON.parse(content);
                console.log(obj);
            },
            error: function (err) {
                console.log(err)
            }
        })

    </script>
</body>

</html>