3.03.30ajax

最新推荐文章于 2024-11-06 23:34:29 发布

以哲_ok

最新推荐文章于 2024-11-06 23:34:29 发布

阅读量114

点赞数

文章标签：网络 http https

本文链接：https://blog.csdn.net/m0_59593735/article/details/125231765

版权

3.03.30 ajax

1.网络基础

协议

协议是一种网络传输的约定
进行信息传输的约定，图文信息等信息传输的协议
比如：
- http:// 超文本传输协议
- https:// 安全的超文本传输协议（http经过后端配置再加入ssl协议后就变成了https）
- file:/// 文件传输协议

服务器的地址
一个ip地址对应一个域名
一般用户都用域名访问网站而不用ip,因为ip是一串数字，难以记忆，而域名是一串有意义的字符，方便记忆，如：www.baidu.com 对应 183.232.231.172

端口

设备与外界通信的出口
随着计算机网络技术的发展，原来物理上的接口（如键盘、鼠标、网卡、显示卡等输入/输出接口）已不能满足网络通信的要求，TCP/IP协议作为网络通信的标准协-议就解决了这个通信难题。TCP/IP协议集成到操作系统的内核中，这就相当于在操作系统中引入了一种新的输入/输出接口技术，因为在TCP/IP协议中引入了-一种称之为"Socket（套接字）“应用程序接口。有了这样一种接口技术，一台计算机就可以通过软件的方式与任何一台具有Socket接口的计算机进行通信。-端口在计算机编程上也就是"Socket接口”。
有了这些端口后，这些端口又是如何工作呢？例如一台服务器为什么可以同时是Web服务器，也可以是FTP服务器，还可以是邮件服务器等等呢？其中一个很重要的原-因是各种服务采用不同的端口分别提供不同的服务，比如：通常TCP/IP协议规定Web采用80号端口，FTP采用21号端口等，而邮件服务器是采用25号端口-。这样，通过不同端口，计算机就可以与外界进行互不干扰的通信。一台服务器为什么可以同时是Web服务器，也可以是FTP服务器，还可以是邮件服务器等等呢？其中一个很重要的原因是各种服务采用不同的端口分别提供不同的服务，比如：通常TCP/IP协议规定Web采用80号端口，FTP采用21号端口等，而邮件服务器是采用25号端口。这样，通过不同端口，计算机就可以与外界进行互不干扰的通信。

5500 vscode插件开启的http服务
80 默认端口（http）
443 默认端口（https）
3306 mysql 服务的端口

静态网页与动态网页

静态网页：不存在任何后台的数据请求的网页，图文信息的数据是固定的，不会更新的
动态网页：页面的数据可以更新的，数据可以从后台请求数据，存在数据的前后端的交互
数据的前后端交互
- 是指前端负责编写界面、请求数据、渲染数据（拿到数据并把数据表现出来）
- 后台负责处理数据、编写接口、响应数据（处理各种请求并响应数据）

2. ajax概念

是一项创建动态网页的技术
ajax可以读取本地或远程的文档
ajax需要在http服务环境下才可以使用
ajax这项技术需要通过XMLHttpRequest这个对象来实现，这个对象仅仅支持http服务请求
ajax可以实现不跳转刷新页面（局部刷新页面），异步请求
Asynchronous JavaScript and XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

HTTP是计算机通过网络进行通信的规则

HTTP是一种无状态[不建立持久的连接]协议
一个完整的HTTP请求过程，通常有7个步骤：
- 建立TCP连接
- web浏览器向web服务器发送请求命令
- web浏览器发送请求头信息
- web服务器应答
- web服务器发送应答头信息
- web服务器向浏览器发送数据
- web服务器关闭TCP连接

一个HTTP请求一般由4部分构成：

HTTP请求的方法或动作[GET/POST]
- GET:一般用于信息获取。使用URL传递参数。对所发送信息的数量也有限制[2000字符左右]。
- POST:一般用于修改服务器上的资源。对所发送信息的数量无限制。
正在请求的URL
请求头，包含一些客户端环境信息、身份验证信息等
请求体，即请求正文，包含客户提交的查询字符串信息、表单信息等
请求头和请求体之间一般会有一段空行用来表示请求头的结束

一个HTTP响应一般由3部分构成：

一个数字和文字组成的状态码，用了显示请求是成功还是失败
响应头，和请求头一样包含许多有用的信息如服务器类型、日期事件、内容类型和长度等
响应体，即响应正文。

HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：

1xx：信息类，表示收到Web浏览器请求，正在进一步的处理中
2xx:成功，表示用户请求被正确接收，理解和处理例如 200 ok
3xx：重定向，表示请求没有成功，客户必须采取进一步的动作
4xx：客户端错误，表示客户端提交的请求有错误，如 404 NOT Found，意味着请求中所引用的文档不存在
5xx:服务器错误，表示服务器不能完成对请求的处理如 500

3. jquery的ajax(别人封装)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ 学习 </title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .weather-box {
            width: 300px;
            margin: 0 auto;
        }
        .weather-box li {
            margin-top: 50px;
        }
        .weather-box li > div {
            height: 40px;
            line-height: 40px;
            border-bottom: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="weather-box">
        <ul>
            <!-- <li>
                <div>时间</div>
                <div>天气</div>
                <div>温度</div>
            </li> -->
        </ul>
    </div>

    <script src='./jquery/jquery.js'></script>
    <script>
        // jquery是什么? 是js库
        // jquery有个叫做ajax的函数，这个函数是实现数据前后端交互的函数，是实现Ajax这项技术的函数

        // 调用ajax函数
        // 调用者：$
        // 参数：对象
        // 返回值：忽略
        // 功能：可以向指定的数据地址发起请求，然后接收服务端响应的数据（数据前后端交互）


        // 定义对象
        // var obj = {success:function(res){}}
        // 调用ajax函数 
        // obj.success这个函数是在封装ajax的过程中调用
        // $.ajax(obj)

        // 调用ajax函数
        $.ajax({
            url: "static/data.txt",// 数据地址（请求地址）
            type: "get",  //请求方式 （本地文档只能是用get）
            success: function(res){// 请求完成并且响应成功执行的回调函数
                // console.log(res,'1.0');// data.txt的内容 这是字符串
                // 把json格式的字符串处理成json对象（解析json格式字符串）
                var arr = JSON.parse(res);
                // console.log(arr);
                // console.log(typeof arr);
                // 字符串
                var str = '';
                // 循环arr数组
                for(var i = 0 ; i < arr.length ; i ++){
                    str += `
                            <li>
                                <div>时间: ${arr[i].time}</div>
                                <div>天气: ${arr[i].wea}</div>
                                <div>温度: ${arr[i].tem}</div>
                            </li>
                        `
                }
                // 渲染字符串
                $(".weather-box ul").html(str);
            },
            error: function(err){//请求失败
                console.log(err,'2.0');
                // 什么情况下会执行该回调函数?
                // 1. url地址写错，或者其他参数写错
                // 2. 不存在data.txt这个文档
                // 3. 后台发生异常
                // 4. 如果不是跨域的地址，就时打开方式错误
            }
        })


        // 校验json格式数据
        // https://www.bejson.com/
    </script>
</body>

</html>

上面用到的static/data.txt

[   
    {
		"time": "2022-03-29 14:00",
		"wea": "晴朗",
		"tem": "25°C"
	},
	{
		"time": "2022-03-30 14:00",
		"wea": "阴天",
		"tem": "26°C"
	},
	{
		"time": "2022-03-31 14:00",
		"wea": "下雨",
		"tem": "24°C"
	}
]

请求所需的参数，可以写成以下的方式：

比如：
    $.ajax({
        url: "https://www.yiketianqi.com/free/day?appid=59841858&appsecret=Vbvq4xbL&unescape=1&city="+ $(".box .text").val(),
        type: "GET",
        success: function (res) {
            console.log(res);
            var str="";
            str += `
                    <li>"cityid ":${res.cityid}</li>
                    <li>"city   ":${res.city}</li>
                    <li>"update_time    ":${res.update_time}</li>
                    <li>"wea    ":${res.wea}</li>
                `
            
            // 渲染字符串
            $(".weather-box ul").html(str);
        },
        error: function (err) {
            console.log(err);

        }
    })
可以写成：
    $.ajax({
        url: "https://www.yiketianqi.com/free/day",
        type: "GET",
        data:{
            appid:"59841858",
            appsecret:"Vbvq4xbL",
            unescape:"1",
            city:$(".box .text").val(),
        },
        success: function (res) {
            console.log(res);
            var str="";
            str += `
                    <li>"cityid ":${res.cityid}</li>
                    <li>"city   ":${res.city}</li>
                    <li>"update_time    ":${res.update_time}</li>
                    <li>"wea    ":${res.wea}</li>
                `
            
            // 渲染字符串
            $(".weather-box ul").html(str);
        },
        error: function (err) {
            console.log(err);

        }
    })

jq的ajax的参数对象中还有两个常用的属性beforeSend与complete

    $.ajax({
        url: "",// 接口地址
        type: "get",//请求的方式
        //请求所需要的参数
        data: { 
        },
        // 发起请求之前执行的函数
        beforeSend: function(){
        },
        //请求成功执行的函数
        success: function(res){
        },
         //请求失败执行的函数
        error: function (err) {
        },
        // 请求完成执行的函数
        complete: function(){ 
        }
    })

4.表单提交数据

表单有阉割版ajax的作用

    <form action="https://yiketianqi.com/free/day" method="get">
        <div>
            <input type="text" name="city" placeholder="请输入城市，例如：广州">
        </div>
        <div>
            <input type="text" name="appid" value="76991983" readonly>
        </div>
        <div>
            <input type="text" name="appsecret" value="KcQs38fI" readonly >
        </div>
        <div>
            <input type="text" name="unescape" value="1" readonly>
        </div>
        <div>
            <input type="submit" value="查询天气">
        </div>
    </form>