ajax学习第五天

已于 2023-03-11 09:58:06 修改
阅读量116 收藏 1
点赞数
分类专栏： ajax 文章标签： ajax 学习 javascript
于 2022-03-09 20:02:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33938234/article/details/123385791
版权

ajax学习第五天

文章目录

1.HTTP协议

1.1 通信

  • 信息的传递和交换
  • 通信的三要素
    • 通信的主体
    • 通信的内容
    • 通信的方式

1.2 互联网中的通信

  • 通信主体：服务器和客户端浏览器

  • 通信内容：网页内容（HyperText），超文本

  • 通信协议：双方完成通信所必须遵守的规则和约定（HTTP协议）

  • 通信方式：

    • 客户端要以HTTP协议的要求的格式把数据**提交**到服务器
    • 服务器要以HTTP协议要求的格式把数据**响应**给客户端

  • 图解

在这里插入图片描述

2.HTTP请求消息

  • HTTP请求：客户端发起的请求
  • HTTP请求消息（请求报文）：客户端发送的服务器的消息

2.1 请求消息的组成部分

  • 图解

在这里插入图片描述

2.2 请求行

  • 图解

在这里插入图片描述

  • 示例
<!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>
    <script src="../day04/lib/jquery.js"></script>
</head>

<body>
    <button id="getBtn">发起get请求</button>
    <button id="postBtn">发起post请求</button>

    <script>
        $(function() {
            // 发起get请求

            $("#getBtn").on("click", function() {
                // $.get("http://www.liulongbin.top:3006/api/get", {
                //     name: "k",
                //     age: 18
                // }, function(res) {
                //     console.log(res);
                // })

                $.ajax({
                    method: 'get',
                    url: "http://www.liulongbin.top:3006/api/get",
                    data: {
                        name: "k"
                    },
                    success: function(res) {
                        console.log(res);
                    }
                })
            })


            // 发起post请求

            $("#postBtn").on("click", function() {
                $.post("http://www.liulongbin.top:3006/api/post", {
                    name: "k",
                    age: 20
                }, function() {
                    console.log(res);
                })
            })
        })
    </script>
</body>

</html>
  • get请求的效果图

在这里插入图片描述

  • post请求的效果图

在这里插入图片描述

2.3 请求头部

  • 请求头部：描述客户端的基本信息
  • 常见的请求头字段
头部字段说明
Host要请求的服务器名
Connection客户端与服务器的连接方式
Content-Length用于描述请求体的大小
Accept客户端可识别的响应内容列表
User-Agent客户端使用的浏览器类型
Content-Type客户端告诉浏览器的实际发送的数据类型
Accept-Encodeing客户端可接收的内容压缩编码形式
Accept-Language客户端可识别的自然语言
  • 图示

在这里插入图片描述

2.4 空行

  • 分隔请求头部和请求体

  • 表示请求头部至此结束

  • 图解

在这里插入图片描述

2.5 请求体

  • 通过**POST请求发送给服务器的数据**

在这里插入图片描述

  • post请求的请求体

在这里插入图片描述

3. HTTP 响应消息

  • 服务器响应给客户端的消息，响应报文

  • 图解

在这里插入图片描述

3.1 状态行

  • 由HTTP协议版本、状态码和状态码的描述文本组成

在这里插入图片描述

  • 示例图

在这里插入图片描述

3.2 响应头部

  • 响应头部用于描述服务器的基本信息，响应头部的键值对组成，键值对之间用冒号分隔

在这里插入图片描述

  • 示例图

在这里插入图片描述

3.3 空行

  • 最后一个响应头部后紧跟一个空行，表示响应头部至此结束
  • 用于分隔响应头部和响应体

在这里插入图片描述

3.4 响应体

  • 存放服务器响应给客户端的资源内容

在这里插入图片描述

4.HTTP请求方法

  • 是HTTP协议中的一部分，用来表明要对服务器上的资源执行的操作，最常用的请求方法是GET和POST
  • 图解

在这里插入图片描述

5. 响应状态码

  • HTTP协议的一部分，用于标识响应的状态

  • 图解

在这里插入图片描述

  • 响应码的MDN文档

<HTTP 响应代码 - HTTP | MDN (mozilla.org)>

5.1 响应码的分类

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

凌歆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5中ajax()方法发送网络数据请求
梦回丹霞的博客
04-07 4941
一、定义和用法 ajax() 方法通过 HTTP 请求加载远程数据。 $.ajax() 返回其创建的 XMLHttpRequest 对象。 语法 jQuery.ajax([settings]) 参数 参数 描述 setting 可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。 async Boolean类型。默认值为true。所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。同步请求将锁住浏览器，用户其它操
jQuery 学习第五课 Ajax 使用说明
01-19
jQuery提供了若干个ajax函数，他们大同小异，只是为了处理不同类型的数据而分开来。最简单的是get(url,parameters,callback),这个函数发起一个GET请求，将服务器返回的数据传递给callback处理。 下面的例子实现了当...
再也不学AJAX了！（二）使用AJAX
weixin_30511039的博客
11-07 69
在上一篇文章中我们知道，AJAX是一系列技术的统称。在本篇中我们将更进一步，详细解释如何使用Ajax技术在项目中获取数据。而为了解释清楚，我们首先要搞清楚我们是从哪里获取数据的，其次我们关注的才是获取数据的具体方式。 一、获取数据 我们知道AJAX用来在项目中以阻止页面刷新的方式获取数据，那么数据从哪里来呢？我们又怎么知道如何获取这些数据？答案是我们通常使用API与各式各样的数据库交互。 “API...
ajax的学多久,ajax第二天学习
weixin_35721739的博客
08-06 424
post方式发送请求要首先设置请求头(参数设置为ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")-->send中放入要发送的参数(key=value&key=value)-->发送数据(ajax.send(context))当xml作为载体的时候servlet中声明发送的格式为xm...
前端交互之“ajax请求的2种方式”
空投在我怀里的博客
05-08 756
一、简单请求 1.只要同时满足以下两大条件，就属于简单请求 1-1.请求方法是以下三种方法之一 HEAD GET POST 1-2.HTTP的头信息不超出以下几种字段： Accept Accept-Language Content-Language Content-Type Content-Type 字段的值：（text/plain）（multipart/form-data）（application/x-www-form-urlencoded） 2.当浏览器发现发现的ajax请求是简单请求时，会
ajax请求设置accept,jQuery.ajax() 如何设置 Headers 中的 Accept 内容
weixin_30446393的博客
08-05 1492
其实很简单，首先如果是常见类型，则请直接设置 dataType 属性$.ajax({dataType: "json",type: "get",success: function (data) {}});设置 dataType 后，会去 accepts 属性(此属性会预置一些常用类型)中直接拿相应的类型添加到 Accept 中。如果想自己自定义 jQuery 中没有的 Accept 内容，可以手动设...
请求首部:Accept-Language
program is a art
03-24 1147
首部字段Accept-Language用来告知服务器用户代理能够处理的自然语言集(指中文或英文等),以及自然语言集的相对优先级.可一次指定多种自然语言集.使用权重q来表示相对优先级 Accept-Language: zh-cn,zh;q=0.7,en-us,en;q=0.3...
揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页
01-19
本人学习AJAX时间并不长，仅10余天，不能说百分之百掌握，但也有所领悟。现在把自己的学习经过和体会写下来，与君共分享。 一、学习经过： AJAX技术的文章和书籍很多，视频也不少，可以说是近两年最热的技术。但...
掌握Ajax，第1部分:Ajax简介
02-04
Ajax由HTML、JavaScript?技术、DHTML和DOM组成，这一杰出的方法可以将笨拙的Web界面转化成交互性的Ajax应用程序。...但是，Ajax不仅仅是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语
Ajax从入门到精通（附教学示例）
05-16
Ajax 由 HTML、javascript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成 交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概 述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。 五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。 但是，Ajax 不仅仅 是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语言那样困难。
请求头（Accept，Accept-Language，Accept-Encoding， Host，Cookie，Referer，User-Agent，Content-Type）
豫
12-29 8630
Accept ：请求报头域，用于指定客户端可接受哪些类型的信息 Accept-Language ：指定客户端可接受的语言类型 Accept-Encoding ：指定客户端可接受的内容编码 Host ：用于指定请求资源的主机 IP 和端口号，其内容为请求 URL 的原始服务器或网关的位置。从 HTTP 1.1 版本开始，请求必须包含此内容。 Cookie ：也常用复数形式 Cookies ，这是网...
使用accept-language +cookie自动选择语言跳转页面
weixin_34194317的博客
03-23 863
如果是多语言网站，在用户请求访问的时候，服务器根据用户通过浏览器发送的请求中的accept-language 值进行判断，自动返回用户默认的首选语言页面。 简单的说就是如果你浏览器默认选择语言是zh-cn，那么在请求访问某个多语言版本的网站的时候就返回zh-cn版本的网站页面。 列出一些常见的语言标识标签，zh-cn(中文简体)/zh-hk(香港繁体)/zh-tw(台湾...
HTTP请求Header分析
coach
01-27 3095
客户端HTTP请求的Header信息 1、HTTP请求方式 GET 向Web服务器请求一个文件 POST 向Web服务器发送数据让Web服务器进行处理 PUT 向Web服务器发送数据并存储在Web服务器内部 HEAD 检查一个对象是否存在 DELETE 从Web服务器上删除一个文件 CONNECT 对通道提供支持 TRACE 跟踪到服务器的路径 O...
HTTP协议细节集锦:Accept-Language 和 CORS 和 WebSocket
cpxsxn的博客
05-07 1769
对于最早期的HTTP/1.0协议，每次发送一个HTTP请求，客户端都需要先创建一个新的TCP连接，然后，收到服务器响应后，关闭这个TCP连接。 由于建立TCP连接就比较耗时，因此，为了提高效率，HTTP/1.1协议允许在一个TCP连接中反复发送-响应，这样就能大大提高效率。(HTTP 1.1允许浏览器和服务器在同一个TCP连接上反复发送、接收多个HTTP请求和响应，这样就大大提高了传输效率。) 因为HTTP协议是一个请求-响应协议，客户端在发送了一个HTTP请求后，必须等待服务器响应后，才能发送下一个请求，
nginx根据http请求头中的accept-language转发到不同的页面
findmaven.net-搜索Jar，搜索Maven
02-14 2303
nginx可以在nginx.conf中进行配置，根据http请求头中accept-language转发到不同的页面
javascript高级程序设计第五版 pdf
最新发布
08-06
总之，《JavaScript高级程序设计 第五版》是一本权威、全面而且易懂的JavaScript学习资料。无论你是初学者还是有一定经验的开发人员，都可以从这本书中获得宝贵的知识和技巧，提升自己的JavaScript编程能力。阅读这...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值