（45）2021-03-05（Ajax）

最新推荐文章于 2022-10-03 21:34:56 发布
最新推荐文章于 2022-10-03 21:34:56 发布
阅读量460 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53125613/article/details/114408182
版权

Ajax

Ajax

1、http协议

什么是http协议

传输协议。
前端以什么样的形式给服务器传送数据
服务器以什么样的形式给前端传送数据

常见的协议类型

TCP
保证数据的顺序，尽量不丢失数据。
传输效率不高，只支持1对1.
UDP
不保证数据的顺序，不保证是否丢失数据。
传输效率高，支持1对多，多对1

张老师是个超级有趣的年轻小伙子 = 年轻小伙子超级有趣的

http传输过程

1.四个步骤：
	1-1：建立连接
	1-2：发送请求（客户端发送给服务器）
	1-3：返回响应（服务器发送给客户端）
	1-4：断开连接。
2 只能由客户端发起，不能由服务器发起。
3 交互数据只能是字符串。

TCP三次握手 四次挥手

目的：保证传输通道的连接。
  • 三次握手：

在这里插入图片描述

  • 四次挥手：

在这里插入图片描述

请求报文

请求报文由三部分组成：
1.请求行
	get/post 请求方式
	api/v1/topic_collect/alsotang 请求地址
	http/1.1 传输协议以及版本
2.请求头
	host：请求主机
	Accapt：期望接受的数据类型
	UserAgent：请求终端的信息
	cookie
	referer:表示请求是从哪个url进来的。
3.请求体
	前端给后端（客户端给服务端）的数据。
	get请求：参数会以键值对的形式，用&连接，拼接在URL的后面。键与值之间用=连接。
	post:参数不是放在url后面，而是放在requestbody中。

响应报文

响应报文由三部分组成：
1.状态行
	http/1.1 传输协议以及版本
	200 状态响应码
	ok 对响应码简单的描述。
2.响应头
	Date:服务器事件
	Server：服务器信息
	Content-type:响应体的数据格式以及编码。
3.响应体
	后端给前端的数据

2、Ajax介绍

Asynchronous javascript and xml 异步js和xml

xml：存储数据的格式。 现在用json。

异步和同步

js是单线程的语言。

同步：上面的代码未完成时，下面的代码不会去执行。

异步：上面的代码未完成时，下面的代码也可以执行。

    setTimeout(()=>{
        console.log("延时函数");
    },0);
    console.log("延时函数后的代码");

在延时函数中，虽然延迟时间为0，但是仍然是一个异步代码。异步代码总会在同步之后执行。

传统的前后端交互的缺点

	传统的前后端交互是前后端不分离的，用户触发一个http请求，服务器接受以后，会做出响应，响应的是一个新的页面。也就是说，数据的刷新是通过页面的刷新或者页面的跳转来实现的。
	比如：视频页面下方的留言功能。
	缺点：
		1.用户体验非常不好。
		2.因为少量数据的更新而去刷新这个页面，造成了资源的浪费，同时也会对服务器造成巨大的压力。
	为了解决这个问题，我们急需一种，不用刷新整个页面，只更新部分数据的技术。ajax就是这样的一门技术。 2005年的时候诞生。

3、Ajax的特点

优点：
	不需要别的插件，或者引入别的文件，浏览器默认就支持Ajax。
	用户体验特别好。
	提高性能。（在传输数据的时候不需要整体提交，只需要提交少量的数据。）、
	减轻服务器的压力
	
缺点：
	前进，后退功能无效。
	搜索引擎的支持度不够。

4、状态码与状态值

响应状态码：本次请求的响应状态

值的范围：100-599  
100-199 表示连接继续。
200-299 表示各种意义上的成功
300-399 表示重定向。
400-499 表示客户端错误
500-599 表示服务器错误

常见的状态值

101 表示连接继续
200 成功
302 临时重定向
301 永久重定向
304 缓存
	当你访问这个页面之后，浏览器会自动缓存， 再次访问时，浏览器不会向服务器发送请求了，而是从缓存中获取。
403 无访问权限
404 访问地址不存在
500 服务器错误

请求方式

get/post
get:
	语义：获取
	get参数是在地址栏中
	参数4KB大小。
	get请求会被浏览器缓存
post：
	语义：发送
	post参数是requestBoby
	大小不受客户端限制，但是可能会被服务器限制。
	post请求不会被浏览器缓存，除非通过程序去修改
	请求相对于get比较安全。

5、Ajax使用

1.创建一个xmlhttprequest对象。
2.调用对象的open方法
3.调用对象的send方法
4.onreadystatechange函数，响应时会自动调用。

（1）发送一个get请求

在这里插入图片描述

   <style>
        #box {
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>
    <script>
        function sendMsg() {
            //1.创建一个xmlhttpRequset对象
            var xhr = new XMLHttpRequest();
            // 2.调用open方法
            //open方法有三个参数：
            // 1.请求的方式  method get/post
            // 2.请求的url  
            // 3.是否异步,默认值true,可选参数.
            // https://cnodejs.org/api/v1/topics
            xhr.open("get", "http://localhost/data.php?id=1");
            //3.调用send方法
            xhr.send();
            //4.监听状态的改变。
            xhr.onreadystatechange = function () {
                //状态值 ：0-4 4表示完成
                if (xhr.readyState === 4) {
                    //判断状态码
                    if (xhr.status === 200) {
                        //responseText 返回的数据
                        var box = document.getElementById("box")
                        var res = JSON.parse(xhr.responseText);
                        box.innerHTML = `
                            <h2>编号为：${res.id}</<h2>
                            <h2>标题为：${res.title}</<h2>
                        `;
                    }
                }
            }
        }
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = sendMsg;
        }
    </script>
</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
</body>

（2）发送一个post请求

在这里插入图片描述

    <style>
        #box {
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>
    <script>
        function sendMsg() {
            //1.创建一个xmlhttpRequset对象
            var xhr = new XMLHttpRequest();
            // 2.调用open方法
            //open方法有三个参数：
            // 1.请求的方式  method get/post
            // 2.请求的url  
            // 3.是否异步,默认值true,可选参数.
            xhr.open("post", "http://localhost/post.php");
            //3.调用send方法
            //post请求需要设置请求头。
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send("id=2");
            //4.监听状态的改变。
            xhr.onreadystatechange = function () {
                //状态值 ：0-4 4表示完成
                if (xhr.readyState === 4) {
                    //判断状态码
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                        //responseText 返回的数据
                        var box = document.getElementById("box")
                        var res = JSON.parse(xhr.responseText);
                        box.innerHTML = `
                            <h2>编号为：${res.id}</<h2>
                            <h2>标题为：${res.title}</<h2>
                        `;
                    }
                }
            }
        }
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = sendMsg;
        }
    </script>
</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
</body>

（3）封装get请求

    <style>
        #box {
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>
    <!-- <script src="js/utils.js"></script> -->
    <script>
        function get(url, query, callback, isJson = true) {
            var xhr = new XMLHttpRequest();
            // 如果有参数，需要把参数拼接到url后面。
            if (query) {
                url += "?";
                for (const key in query) {
                    url += `${key}=${query[key]}&`
                }
                // url = url+"id=1&name=zhangsan&"
                // 负数是倒数开始截取。
                url = url.slice(0, -1);
            }
            xhr.open("get", url);
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText;
                        callback(res);
                    }
                }
            }
        }

        window.onload = function() {
            var btn = document.getElementById("btn");
            btn.onclick = function() {
                get("http://localhost/data.php", {
                    id: 1
                }, function(res) {
                    var box = document.getElementById("box")
                    box.innerHTML = `
                            <h2>编号为：${res.id}</<h2>
                            <h2>标题为：${res.title}</<h2>
                        `;
                })
            };
        }
    </script>
</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
</body>

（4）封装post请求

  <style>
        #box {
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>
    <script>
        function post(url, query, callback, isJson = true) {
            var str = "";
            if (query) {
                for (const key in query) {
                    str += `${key}=${query[key]}&`
                }
                str = str.slice(0, -1);
            }
            var xhr = new XMLHttpRequest();
            xhr.open("post", url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(str);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText;
                        callback(res);
                    }
                }
            }
        }
        window.onload = function() {
            var btn = document.getElementById("btn");
            btn.onclick = function() {
                post("http://localhost/post.php", {
                    id: 2
                }, function(res) {
                    var box = document.getElementById("box")
                    box.innerHTML = `
                            <h2>编号为：${res.id}</<h2>
                            <h2>标题为：${res.title}</<h2>
                        `;
                })
            };
        }
    </script>
</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
</body>

（5）封装ajax请求

 <style>
        #box {
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>
    <script>
        //形参： {method, url, query, callback, isJson = true}
        function ajax(params) {
            var xhr = new XMLHttpRequest();
            if (params.method.toLowerCase() === "get") {
                var url = params.url;
                if (params.query) {
                    url += "?";
                    for (const key in params.query) {
                        url += `${key}=${params.query[key]}&`
                    }
                    url = url.slice(0, -1);
                }
                xhr.open("get", url);
                xhr.send();
            } else {
                var str = "";
                var url = params.url;
                if (params.query) {
                    for (const key in params.query) {
                        str += `${key}=${params.query[key]}&`
                    }
                    str = str.slice(0, -1);
                }
                xhr.open("post", url);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                xhr.send(str);
            }
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var res = params.isJson ? JSON.parse(xhr.responseText) : xhr.responseText;
                        params.callback(res);
                    }
                }
            }
        }
        window.onload = function() {
            var btn = document.getElementById("btn");
            btn.onclick = function() {
                // 发送get请求
                ajax({
                        method: "get",
                        url: "http://localhost/data.php",
                        query: {
                            id: 1
                        },
                        callback(res) {
                            var box = document.getElementById("box")
                            box.innerHTML = `
                            <h2>编号为：${res.id}</<h2>
                            <h2>标题为：${res.title}</<h2>
                        `;
                        },
                        isJson: true
                    })
                    // ------------------------------------------------------------
                    // 发送post请求
                    // ajax({
                    //     method: "post",
                    //     url: "http://localhost/post.php",
                    //     query: {
                    //         id: 2
                    //     },
                    //     callback(res) {
                    //         var box = document.getElementById("box")
                    //         box.innerHTML = `
                    //             <h2>编号为：${res.id}</<h2>
                    //             <h2>标题为：${res.title}</<h2>
                    //         `;
                    //     },
                    //     isJson: true
                    // })

            };
        }
    </script>
</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
</body>

data.php

<?php
//设置响应头，解决跨域问题。
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Max-Age:60');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('Content-Type:application/json;charset=utf-8');

// 接受浏览器发送过来的数据
$id = $_GET['id'];

// 返回给浏览器的数据
// json_encode 将数组转为json字符串
echo json_encode(array(
    'id' => $id,
    'title' => 'hello word'
))
?>

post.php

<?php
//设置响应头，解决跨域问题。
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Max-Age:60');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('Content-Type:application/json;charset=utf-8');

// 接受浏览器发送过来的数据
$id = $_POST['id'];

// 返回给浏览器的数据
// json_encode 将数组转为json字符串
echo json_encode(array(
    'id' => $id,
    'title' => 'hello ajax'
))
?>

6、Ajax使用案例：qq测凶吉

weixin_53125613
关注
2021.7.14 AJAX基础
qq_44014425的博客
07-14 143
什么是AJAX? ajax全名：async javascript and xml ajax核心作用：实现了数据请求 + 客户端渲染的局部刷新 AJAX核心：基于XMLHttpRequest创建HTTP请求 操作步骤： 创建xhr实例：let xhr = new XMLHttpRequest; 打开一个URL地址（发送请求前的一些配置信息）—— open方法和它常见的一些参数 method主要两个请求方式：GET和POST(get/delete/head/options/post/put/patc
ajax请求整理(一) 2021.05.12
weixin_49092494的博客
05-12 200
关于整理Ajax请求的整理. ·····首先Ajax就是起一个异步不刷新页面的作用，就只是局部刷新,地址栏不变，归纳为一句话就是: ·····AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 首先我们用的是jQuery的Ajax的一些方法来把服务端上的东西展示出来，关于导入jQuery自己出了很多bug，先总结一下： 当时$.post一直报undefined自己明明确确的是导入了jquery的配置文件但是就是一直报错，最后花了接近3个小时解决了这个bug，细节看图： 首先引入jque
2021-03-15 详解HTTP协议
xumaozeng的博客
03-15 345
2021-03-15 HTTP协议详解概述一、HTTP协议详解之URL二、HTTP协议详解之请求篇三、HTTP协议详解之响应篇四、HTTP协议详解之消息报头篇 概述 HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统 HTTP协议的主要特点如下： 1、支持客户/服务器模式 2、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同，由于HTTP协议简单，使得HTTP服务器的程序规
5http GET 和 POST 请求的优缺点和误区 --前端优化
Insist___的博客
03-23 296
Get和Post在面试中一般都会问到，一般的区别： （1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中） （2）post发送的数据更大（get有url长度限制） （3）post能发送更多的数据类型（get只能发送ASCII字符） （4）post比get慢 （5）post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都...
nodeJS使用UDP传递数据
咕咕鸡的执着
06-03 5476
UDP-数据传输 不可靠的、无连接的服务、传输效率高 效率要求高、对精准性要求相对低 如：在线视频、网络语音电话 nodeJS处理方案–dgram(数据报) dgram模块提供了UDP数据包scoket的实现。官方链接 dgram方法：8close、message、listening、error 使用 首先创建一个客户端 client.js，一个服务端server.js两个文件。 服务端： const dgram = require('dgram')//引入 // 创建一个socket类，sock
2021年最新java面试题--视频讲解(内部培训84个知识点超详细).rar
04-16
Java面试题03.搭建一个java的开发环境 Java面试题04.java中int占几个字节 Java面试题05.java面向对象的特征 Java面试题06.装箱和拆箱 Java面试题07.==和equals的区别 Java面试题08.String Java面试题09.讲一下java中...
漏洞复现-用友UFIDA-YongYou系列
aming小老弟
10-03 1824
UFIDA是中国的一家知名企业软件公司，全称为用友软件股份有限公司（Yonyou Software Co . , Ltd . ）。该公司成立于 1988 年，总部位于北京，是中国领先的企业管理软件和云服务提供商之一。UFIDA主要专注于开发和提供企业级软件解决方案，包括财务管理、人力资源管理、采购管理、销售管理、供应链管理、生产制造管理等。它的产品被广泛应用于各种行业，如制造业、服务业、金融业、医疗保健和公共事业等。UFIDA致力于帮助企业提高管理效率、优化业务流程，并提供数据分析和决策支持工具。
JavaEE - Tomcat和HTTP协议
旧时言的博客
06-06 1万+
HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议.HTTP 诞生与1991年. 目前已经发展为最主流使用的一种应用层协议.最新的 HTTP 3 版本也正在完善中, 目前 Google / Facebook 等公司的产品已经支持了.HTTP 往往是基于传输层的 TCP 协议实现的. (HTTP1.0, HTTP1.1, HTTP2.0 均为TCP, HTTP3 基于 UDP实现)目前我们主要使用的还是 HTTP1.1 和 HTTP2.0 . 当前课堂上讨论的 HTTP 以 1.1 版
VM-CentOS-8+Linux8中编译安装php-8.0.9无错详解教程
圣哥的-Blog
08-19 1049
VM-CentOS-8+Linux8中编译安装php-8.0.9无错详解教程 文章目录VM-CentOS-8+Linux8中编译安装php-8.0.9无错详解教程@[toc]P-01） 系统 &环境P-02） 安装前准备P-03） 编译安装【oniguruma】P-04） 编译安装【libzip】P-05） 安装依赖P-06） 编译安装【libxml2】P-07） 编译安装【libmcrypt】P-08） 编译安装【mhash】P-09） 编译安装【mcrypt】P-10） 编
[Python从零到壹] 十七.可视化分析之Matplotlib、Pandas、Echarts入门万字详解
热门推荐
杨秀璋的专栏
08-24 3万+
前一篇文章讲述了数据预处理、Jieba分词和文本聚类知识，这篇文章主要介绍Matplotlib和Pandas扩展包绘图的基础用法，同时引入Echarts技术，该技术主要应用于网站可视化展示中。本文内容以实例为主，给读者最直观的图形感受。两万字基础文章，希望对您有所帮助。
ajax-请求协议设定
leo628的博客
05-05 814
翻译：URL意外结束时无法识别请求格式由于ASP.NET WEB默认开启 HttpSoap 和 Documentation 协议，HttpPost和HttpGet需要手动在配置文件进行配置，因此需要修改web.config当web server 发送post请求，提示格式错误，需要在web.config中加上一下配置信息&lt;system.web&gt;        &lt;webServic...
【知识梳理】3.5HTTP协议类
weixin_33913377的博客
03-28 192
1.HTTP协议的主要特点 简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。 灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标...
UDP协议发送数据：UDP协议接收数据:UDP协议收发数据注意事项
boss_way的博客
10-27 2306
4 UDP协议发送数据： DatagramSocket：是发送和接收的类 DatagramPacket:此类表示数据报包（） DatagramSocket();创建Socket对象并随机分配端口号 DategramSocket（int port）；创建Socket对象并指定端口号 先创建发送端Socket对象： DategramSocket  ds = new DategramSock
HTTP 状态码
xiaozhupiggg的专栏
06-20 1万+
HTTP状态码当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。HTTP状态码的英文为HTTP Status Code下面是常见的HTTP状态码：200 - 请求成功301 - 资源（网页等）被永久转移到其它URL404 -
基于ssm的二手车交易网站设计与实现.docx
09-17
基于ssm的二手车交易网站设计与实现.docx
zotero 6 插件,包含茉莉花、DOI、绿青蛙、sci-hub等11个常用插件
09-17
zotero 6 插件，茉莉花、DOI、绿青蛙、sci-hub、Better notes、GPT、IF、PDF翻译、Style、TAG、影响因子
linux_命令_tail_的升级版，可使用_tails_同时跟踪多个文件并格式化输出成更方便查看的_tails.zip
最新发布
09-17
linux_命令_tail_的升级版，可使用_tails_同时跟踪多个文件并格式化输出成更方便查看的_tails
基于ssm的房屋出租出售系统设计与实现.docx
09-17
基于ssm的房屋出租出售系统设计与实现.docx
Php-Ajax应用程序架构详解
AJAX（Asynchronous JavaScript and XML）允许页面在不重新加载整个页面的情况下与服务器进行通信，提升了用户体验。而PHP则是一种广泛使用的服务器端脚本语言，常用于处理数据和生成动态网页内容。 **浏览器端框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值