jQuery学习笔记（三）

最新推荐文章于 2023-01-15 11:18:55 发布

致命痛楚丶

最新推荐文章于 2023-01-15 11:18:55 发布

阅读量356

点赞数

分类专栏： jQuery学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/qq_39494076/article/details/119379593

版权

jQuery学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要点

了解什么是万维网以及万维网的三要素
了解什么是CS 架构和 BS 架构
能够说出浏览器访问网站的基本过程
了解TCP/IP协议三次握手和四次挥手的过程
理解http请求报文和响应报文
掌握常见的状态码
掌握谷歌浏览器网络调试工具
理解原生ajax的写法及原理
必须掌握jQuery ajax的写法

一、计算机网络基础

1.1、万维网

万维网（World Wide Web），亦作“WWW”、“Web”，是一个透过互联网访问的，由许多互相链接的超文本组成的系统。

web服务三要素：

统一资源标识符（URI），这是一个统一的为资源定位的系统，URI可以分为URL和URN或同时具备locators 和names特性的一个东西
- URN：Uniform Resource Name 是一种使用字符串表示资源名字的方法
- URL： Uniform Resource Location 是一种使用字符串表示资源所在位置的方法
- 换句话说：URN确定了东西的身份，URL提供了找到它的方式。
超文本传送协议（HTTP），它负责规定客户端和服务器怎样互相交流。
超文本标记语言（HTML），作用是定义超文本文档的结构和格式。

1.2、CS 架构 VS BS 架构

1.2.1、CS 架构

CS 即 Client/Server（客户机/服务器）结构，C/S 结构在技术上很成熟，它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是针对性开发，变更不够灵活，维护和管理的难度较大。通常只局限于小型局域网，不利于扩展。并且，由于该结构的每台客户机都需要安装相应的客户端程序，分布功能弱且兼容性差，不能实现快速部署安装和配置，因此缺少通用性，具有较大的局限性。要求具有一定专业水准的技术人员去完成。比如 QQ，微信，绝地逃生等等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GkhdU4D0-1628046284242)(images/CS架构.png)]

1.2.2、BS 架构

BS 即 Browser/Server（浏览器/服务器）结构，就是只安装维护一个服务器（Server），而客户端采用浏览器（Browse）运行软件。B/S 结构应用程序相对于传统的 C/S 结构应用程序是一个非常大的进步。 B/S 结构的主要特点是分布性强、维护方便、开发简单且共享性强、总体拥有成本低。但数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低，这些缺点是有目共睹的，难以实现传统模式下的特殊功能要求。例如通过浏览器进行大量的数据输入或进行报表的应答、专用性打印输出都比较困难和不便。此外，实现复杂的应用构造有较大的困难。企业应用中大多数度使用 BS 架构，比如淘宝，京东，优酷，爱奇艺等等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MFnBt9yJ-1628046284244)(images/BS架构.png)]

1.3、浏览器访问网站的基本过程

1.3.1、基本概念

IP地址

要想使网络中的计算机能够进行通信，必须为每台计算机指定一个标识号，通过这个标识号来指定接受数据的计算机或者发送数据的计算机。在TCP/IP协议中，这个标识号就是IP地址，它可以唯一标识一台计算机。相当于电话号码和电话。

查看本机IP
开始菜单–>运行–>cmd
ipconfig

端口号

通过IP地址可以连接到指定计算机，但如果想访问目标计算机中的某个应用程序，还需要指定端口号。在计算机中，不同的应用程序是通过端口号区分的。

查看某个程序的端口号

开始菜单–>运行–>cmd
输入 netstat -ano 即会显示所有进程占用的端口和进程的ID，并以数字的形式显示端口和IP。
然后打开进程管理器，在打开【进程】选项卡，然后点击菜单【查看】-【选择列】勾选【pid(进程标识符)】。然后自己匹配你要找的那个进程的PID即可查看到它所占用的端口。

Hosts文件

Hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。

查看Hosts
C:\Windows\System32\drivers\etc

DNS

域名系统（英文：DomainNameSystem，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。

1.3.2、基本流程

用户输入网址，
浏览器请求DNS服务器, 获取域名对应的IP地址，
请求连接该IP地址服务器，
发送资源请求. (遵循HTTP协议)
web服务器接收到请求, 并解析请求, 判断用户意图，
获取用户想要的资源，(链接数据库从数据中获取数据)
将资源返回给http服务器程序，
http服务器程序将资源数据通过网络发送给浏览器（响应给浏览器），
浏览器解析呈现请求的数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WTzigZui-1628046284246)(images/浏览器访问网站的基本过程.png)]

1.3.3、域名与域名服务器

1、网站： www.sina.com.cn

-www: 主机名 ，ftp、svn、stmp、xmpp服务
    - sina：机构名
        - com：机构类型 com  net edu  org  xxx
            - cn： 地区名  tw  hk   us  uk  jp

2、域名服务器（DNS）   
	进行域名和与之相对应的IP地址转换的服务器

二、Http协议简介

2.1、http的认识

HTTP是万维网的数据通信的基础。设计HTTP最初的目的是为了提供一种发布和接收HTML页面<网页>的方法。

HTTP协议的制作者是蒂姆·伯纳斯-李，他供职于CERN(欧洲核子研究组织)

1991年发布的0.9版，该版本极其简单，只有一个GET请求方法
1996年5月，HTTP/1.0版本发布
1997年1月，HTTP/1.1版本发布，目前使用就是HTTP/1.1版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0LifDzKT-1628046284248)(images/http作者.png)]

什么是协议：

协议就是双方之间的一种约定、一种规则；按照此约定、规则，双方就可以顺畅的、有条不紊的进行交流和通信——

http协议：

HTTP 超文本传输协议(hypertext transfer protocol) ：用于web服务器与浏览器之间传输网页数据的协议
HTTP协议是基于TCP/IP协议的，发送数据之前需要建立好连接
http协议的请求响应模型包含浏览器与http服务器的request、response请求响应模型

2.2、TCP/IP协议三次握手四次挥手（了解）

TCP/IP协议不仅仅指的是TCP 和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇，只是因为在TCP/IP协议中TCP协议和IP协议最具代表性，所以被称为TCP/IP协议。

http协议是基于TCP/IP协议的，TCP/IP协议是一个可靠的传输协议。

浏览器(客户端)和服务器建立连接的时候，发生三次握手：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zUJtLKEi-1628046284250)(images/tcp三次握手.png)]

浏览器(客户端)和服务器断开连接的时候，发生四次挥手：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJg6jzng-1628046284250)(images/tcp四次挥手.png)]

2.3、http请求request报文格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSFQowgw-1628046284251)(./images/请求行.jpg)]

请求行
- HTTP 请求的种类——get post
  - GET 浏览器仅仅只是获取网页数据
  - POST 客户端向服务器提交数据
- 请求资源的路径——请求url
- HTTP 协议版本——1.0 1.1
请求头
- [头名: 头值]
空行
- 分割符"\r\n"
请求体
- 浏览器给服务器发送的数据
- post才有请求体
- get的请求参数在url上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olKqWV29-1628046284252)(./images/请求头.jpg)]

常见的请求头：

Accept：浏览器可以接受的数据类型。
Accept-Encoding：浏览器支持解码的数据压缩格式如：gzip。
Accept-Language：浏览器的语言环境。
Cache-Control：缓存控制命令
Host：请求的主机名，允许多个域名同处一个 IP 地址，即虚拟主机。
Connection：表示是否需要持久连接。如 Keep-Alive。
Content-Length：表示请求体的长度。
Content-Type：浏览器告诉 WEB 服务器请求数据的类型和字符集。
- MIME 描述消息内容类型的因特网标准
  - text/html 超文本
  - text/plain 普通文本
  - text/xml XML格式
  - application/x-www-form-urlencoded 浏览器默认
  - application/json 来告诉服务端消息主体是序列化后的 JSON 字符串
  - multipart/from-data 表单上传文件时
- charset:utf-8;
Cookie：浏览器每次都会将 cookie 发送到服务器上，允许服务器在客户端存储少量数据。
Referer：包含一个 URL，用户从该 URL 代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。
User-Agent：用户代理：浏览器相关信息，客户机相关信息。

2.4、http响应response报文格式

响应行
- 协议版本
- 状态码
  - HTTP/1.1 中定义了 5 类状态码。状态码由三位数字组成，第一个数字定义了响应的类别
    - 1XX 提示信息 - 表示请求已被成功接收，继续处理。
    - 2XX 成功 - 表示请求已被成功接收，理解，接受。
    - 3XX 重定向 - 要完成请求必须进行更进一步的处理。
    - 4XX 客户端错误 - 请求有语法错误或请求无法实现。
    - 5XX 服务器端错误 - 服务器未能实现合法的请求。
- 状态说明
响应头
- [头名: 头值]
空行
- “\r\n”
响应体
- 返回给客户端的具体数据
  - html文本
  - 资源数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UaepJ9KR-1628046284253)(./images/响应头.jpg)]

常见响应头：

Server：服务器软件的信息和版本。

Accept-Ranges：服务器表明是否接受获取其某个实体的一部分的请求。

Cache-Control：缓存控制命令

Date：服务器回复响应报文的时间 – 格林威治时间

Content-Type：返回的响应体的数据类型。text/html text/plain application/json

Allow：服务器支持哪些请求方法（如 GET、POST 等）。

Content-Base：解析主体中的相对 URL 时使用的基础 URL。

Content-Encoding：对响应体数据采用的压缩方式。

Content-Language：告诉浏览器理解主体时最适宜使用的自然语言。

Content-Length：表明响应体的大小，例如 26012。

Content-Location：资源实际所处的位置。

Content-MD5：主体的 MD5 校验和。

Content-Range：表示传送的范围。

Expires：过期相关信息。

Last-Modified：WEB服务器认为对象的最后修改时间。

Connection：keep-alive不关闭TCP连接，长连接

2.5、谷歌浏览器开发者工具的使用（掌握！）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fFeD0DtS-1628046284253)(images/开发工具的使用.png)]

元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等.
控制台(Console):控制台一般用于执行一次性代码, 查看JavaScript对象, 查看调试日志信息或异常信息.
源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码, 此外最重要的是可以调试JavaScript源代码, 可以给JS代码添加断点等.
网络(Network):网络页面主要用于查看 header 等与网络连接相关的信息.

注意: Network 中的每一项就是一次请求/响应过程, 点击每一项, 可查看本次请求响应的报文信息.

三、AJAX技术简介

3.1、基本概念

AJAX 即 “Asynchronous JavaScript and XML”（异步的 JavaScript 与 XML 技术），指的是一套综合了多项技术的浏览器端网页开发技术。AJAX 的概念由 Jesse James Garrett 所提出，说白了就可以使用 JavaScript 代码发送网络请求并处理响应，由浏览器实现。
出现的很早 1998 年出来，首次是微软提出来的，并没有引起重视；直到2005年左右，谷歌推出 gmail，gmap 使得ajax技术一时间流行起来。

定义：ajax技术就是在页面不刷新情况下，和服务器端进行交互的技术。

传统的 Web 应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分 HTML 码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
与此不同，AJAX 应用可以仅向服务器发送并取回必须的数据，并在客户端采用 JavaScript 处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此 Web 服务器的负荷也减少了。

所以ajax特点是：异步请求，局部刷新。

这里的同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
这里的异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
这里局部刷新是指：刷新页面部分内容。

优缺点：

优点：Web 应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息，减轻服务器压力。

缺点：浏览器实现之间有差异处理兼容性问题；不能回退和前进；默认不支持跨域访问（可以自主学习相关知识：同源策略）。

注意事项：

ajax 这门技术，必须要在网络协议环境下才可以使用。不能把网页直接拖入到浏览器执行，必须在 web 服务器模式下访问。

3.2、原生ajax

3.2.1、兼容处理

JS的Ajax对象：XMLHttpRequest 对象用于在后台与服务器交换数据。

创建ajax对象会有浏览器兼容性问题：

function createAjax() {
  	var request;
    if(Windows.XMLHttpRequest){
        request=new XMLHttpRequest();
    }else{
      	request=new ActiveXObject("Microsoft.XMLHTTP"); //IE 5,IE6
    }
}

3.2.2、响应处理和响应流程

响应处理，即对服务响应回浏览器的数据根据状态码和 AJAX 对象的状态信息进行不同的处理，在绑定状态改变的处理函数中写对应的逻辑代码即可。

AJAX 对象中有 4 个属性：

readyState 总共有 5 个状态值，分别为 0 ~ 4，每个值代表了不同的含义：
- 0：初始化，AJAX 对象还没有完成初始化
- 1：载入，AJAX 对象开始发送请求
- 2：载入完成，AJAX 对象的请求发送完成
- 3：解析，AJAX 对象开始读取服务器的响应
- 4：完成，AJAX 对象读取服务器响应结束
status 表示响应的 HTTP 状态码，常见状态码如下：
- 200 OK：请求成功
- 302 Found：重定向，新的 URL 会在 response 中的 Location 中返回，浏览器将会使用新的 URL 发出新的 Request
- 304 Not Modified：已缓存，文档已经被缓存，直接从缓存调用
- 400 Bad Request：客户端请求有语法错误，不能被服务器所理解
- 403 Forbidden：服务器收到但拒绝服务，引用外部资源触发防盗链
- 404 Not Found：找不到资源，请求资源不存在
- 500 Internal Server Error：服务端错误，服务器发生了不可预期的错误
- 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

综合以上，在状态改变的处理函数一般针对 readyState == 4 且 status == 200 的情况才处理，再根据后台返回的数据类型决定从 responseText 或者 responseXML 获取服务器响应回去来的数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wtkBBY2n-1628046284254)(images/AJAX请求流程图.png)]

3.2.3、使用ajax发送get请求

步骤：

// 1、创建 AJAX 对象；new XMLHttpRequest()
// 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
// 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；ajax.onreadystatechange
// 4、发送请求。ajax.send

代码：

<body>
    <button id="btn">发送get请求</button>
  
<script>
    btn.onclick = function(){
        // 1、创建 AJAX 对象；
        var ajax = new XMLHttpRequest();
        // 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
        ajax.open('get', 'http://kumanxuan1.f3322.net:8809/travels/query');
        // 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；
        ajax.onreadystatechange = function(){
            // console.log(ajax.readyState);
            if(ajax.readyState==4 && ajax.status==200){
                // 此时获取服务器发过来的数据
                console.log(ajax.responseText)	// 得到的是字符串对象，需要用JSON.parse(txt)转对象
            }
        }
        // 4、发送请求。
        ajax.send();
    }
</script>
</body>

3.2.4、使用ajax发送post请求

post请求需要传递参数给后台，

代码：

<body>
	用户名：<input id="user" type="text"><br>
    密码：<input id="pwd" type="password"><br>
    <button id="btn">登录</button>

<script>
    // 后台要求携带参数：
    // 用户名 - username
    // 密码 - password
    btn.onclick = function () {
        // 1、创建 AJAX 对象
        var ajax = new XMLHttpRequest();
        // 2、设置请求路径，请求方式等
        ajax.open("post", "http://kumanxuan1.f3322.net:8809/users/login");
        // 3、设置请求头，不然无法传递参数到后台
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 4、绑定监听状态改变的处理函数
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                console.log(ajax.responseText);
            }
        }
        // 5、发送请求并携带参数
        ajax.send(`username=${user.value}&password=${pwd.value}`)
    }
</script>
</body>

总结：

需要获取数据的时候，使用get请求
需要传递参数给后台并完成某些功能的时候，使用post请求

3.3、jQuery 中 ajax 使用

3.3.1、基本语法

jQuery 中发送ajax的方法：

// 方法一：什么请求都可以发
$.ajax(url,{[settings]});
// 方式二：只能发送get请求
$.get(url, [data], [callback])
// 方式二：只能发送post请求
$.post(url, [data], [callback])

3.3.2、$.ajax的使用

settings参数的可选项：

async：默认设置下，所有请求均为异步请求（true）。
contentType：发送信息至服务器时内容编码类型，默认为 “application/x-www-form-urlencoded”。
data：发送到服务器的数据，可以为对象或者 Key=value 格式字符串，若为对象则会自动转换为请求字符串格式。
type：请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url：发送请求的地址，默认当前页地址。
dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME类型就被识别为 XML，可以不填，可用值：“xml”、“html”、“script”、“json”、“jsonp”、“text”。
cache：默认为 true（dataType 为 script 和 jsonp 时默认为 false，设置为 false 将禁用缓存）。
context：这个对象用于设置 AJAX 相关回调函数的上下文。也就是说，让回调函数内 this 的指向（若不指定为当前选项）。
beforeSend：发送请求前调用此函数，可用与如添加自定义 HTTP 头，检查请求参数是否合法。XMLHttpRequest 对象是唯一的参数。若在函数中返回 false 可以取消本次请求。
success：请求成功后的回调函数，参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等
    // textStatus 描述状态的字符串
}

error：请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、捕获的异常对象。

function (XMLHttpRequest, textStatus, errorThrown) {
  	// 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
}

例如：

$.ajax({
    url: 'url',
    type: 'GET',
    data: {username:'zs', password:'12345'},
    success: function(data){
        // 请求成功业务逻辑
    }
});

3.3.3、发送GET请求

get请求的测试接口：

http://kumanxuan1.f3322.net:8809/travels/query

使用.ajax()方法发送get请求：

$('button').click(function(){
  $.ajax({
    type: "GET",
    url: "http://kumanxuan1.f3322.net:8809/travels/query",
    success: function(res){
      console.log(res);
    }
  })
})

使用.get()方法发送get请求：

$.get()方法接收四个参数：

url：请求 URL 地址
data：请求参数。
callback：请求成功时回调函数。
type：预期服务器返回的数据类型。

$('button').click(function(){
	$.get("http://kumanxuan1.f3322.net:8809/travels/query",
          function (res) {
            console.log(res)
          })
})

3.3.4、发送POST请求

post请求的测试接口：

// 请求地址：
http://kumanxuan1.f3322.net:8809/users/login

// 携带参数：
用户名 - username
密码 - password

使用.ajax()方法发送post请求：

$('button').click(function(){
  $.ajax({
    url: "http://kumanxuan1.f3322.net:8809/users/login",
    type: "POST",
    data: {
      username: $('#username1').val(),
      password: $("password1").val()
    },
    success: function(res){
      console.log(res)
    }
  })
})

使用.post()方法发送post请求：

$.post()方法同样接收四个参数：

url：请求 URL 地址
data：请求参数。
callback：请求成功时回调函数。
type：预期服务器返回的数据类型。

$('button').click(function(){
  $.post('http://kumanxuan1.f3322.net:8809/users/login', {
    username: $('#username1').val(),
    password: $("#password1").val()
  }, function(res){
    console.log(res)
  })
})

致命痛楚丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（三）

要点了解什么是万维网以及万维网的三要素了解什么是CS 架构和 BS 架构能够说出浏览器访问网站的基本过程了解TCP/IP协议三次握手和四次挥手的过程理解http请求报文和响应报文掌握常见的状态码掌握谷歌浏览器网络调试工具理解原生ajax的写法及原理必须掌握jQuery ajax的写法一、计算机网络基础1.1、万维网万维网（World Wide Web），亦作“WWW”、“Web”，是一个透过互联网访问的，由许多互相链接的超文本组成的系统。web服务三要素：统一资源标识符（U
复制链接

扫一扫