4.21-4.22 Ajax+HTTP

作者： 作者的头像   bubboo123 ,  2022-04-21 13:05:46 ,  所有人可见 ,  阅读 267

0


1

URL地址

  1. 客户端与服务器之间的通信协议
  2. 存在该资源的服务器名称
  3. 资源在服务器上的具体存放位置

网页中如何请求数据 XMLHttpRequest对象

  • 网页中的每一个资源，都是通过请求-处理-响应的方式从服务器获取回来的
  • XMLHttpRequest对象（简称xhr）是浏览器提供的js成员，通过它可以请求服务器上的数据资源
  • 最简单的用法：var xhrObj= new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为get和post请求。

  • get请求通常用于获取服务端资源
  • post请求通常用于向服务器提交数据

Ajax（异步JavaScript和XML）

  • 在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax

Ajax的典型应用场景

  • 用户名检测，动态监测用户名是否被占用
  • 搜索提示，动态加载提示列表
  • 数据分页显示，当点击页码值的时候，通过ajax的形式，根据页码值动态刷新表格的数据
  • 数据的增删改查，通过ajax实现数据的交互

Jquery中的Ajax

  • 浏览器中提供的XMLHttpRequest用法比较复杂，所有jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法如下：
$.get()

  • 语法：
    1.jpg

  • 发起不带参数的请求
    2.jpg

  • 发起带参数的请求，参数是对象形式
    3.jpg

$.post()

  • 语法：
    4.jpg

  • 向服务器提交数据
    6.jpg

$.ajax()既可拿又可提交

  • 语法：
    11.jpg

  • 发起GET请求
    22.jpg

  • 发起POST请求
    33.jpg

接口

使用Ajax请求数据时，被请求的URL地址就叫做数据接口，同时每个接口必须有对应的请求方式，即这个接口要用GET还是POST请求
接口测试工具 PostMan

表单

表单的基本使用

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

表单的同步提交

7.jpg
8.jpg

9.jpg

通过Ajax提交表单数据

10.jpg
11.jpg
12.jpg
13.jpg

  • 案例：获取评论列表

14.jpg
15.jpg

模板引擎

1.jpg

art-template模板引擎基本使用

2.jpg
3.jpg{ :height=60% width=70%}

art-template模板引擎基本语法

4.jpg
5.jpg
6.jpg

7.jpg{ :height=60% width=70%}

8.jpg
9.jpg
10.jpg
11.jpg

正则与字符串操作

12.jpg
13.jpg
14.jpg
15.jpg
16.jpg

自己实现模板引擎

1.jpg
2.jpg
3.jpg
4.jpg
5.jpg

xhr的基本使用

1.jpg

2.png
3.png
4.png 5.png 7.png 8.png

URL编码与解码

6.png

数据交换格式

9.png

XML

10.png

11.png
1.png

JSON

2.png 3.png 4.png 5.png 6.png 8.png 9.png 11.png

封装自己的Ajax函数

3.1.png

3.2.png

1.png
3.4.png

  • 以下代码放在上面的qs后面

3.5.png

XHR Level2的新特性

11.png
22.png

timeout属性

33.png

FromData对象管理表单数据

44.png

55.png

文件上传

66.png
77.png
88.png
99.png
111.png
13.png
123.png
124.png

jQuery高级用法

31.png
32.png
33.png
334.png

366.png
377.png

JS库 axios

1111.png
2.png 3.png

直接使用axios发起请求

4.png 5.png 7.png

同源策略

1.png 2.png

跨域

3.png 4.png

JSONP

8.png
1.png 2.png 4.png 5.png 7.png

案例：淘宝搜素

9.png 10.png

输入框的防抖

1.png
2.png 3.png

缓存搜索的建议列表

4.png
5.png

防抖和节流

6.png 7.png
8.png 9.png 10.png
11.png

HTTP协议简介

1.png 2.png 3.png

HTTP请求消息

4.png 5.png
6.png 7.png 9.png 10.png
12.png

HTTP响应消息

13.png
14.png

15.png

17.png

18.png

19.png

HTTP响应状态码

20.png

21.png

1.png 2.png 3.png 4.png 5.png 6.png

0 评论

1024
x