黑马AJAX part1 (未完)

发布时间 2023-05-24 14:06:21作者: yxxcl

1. 客户端与服务器

服务器:上网过程中,负责存放和对外提供资源的电脑。(性能很高的电脑。)

客户端: 在因特网中,负责获取和消费资源的电脑。

个人电脑中,可以通过浏览器访问服务器对外提供的各种资源。

2. URL地址

URL(UniformResourceLocator):统一资源定位符。

用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问正确的资源。

URL:www.google.com ; www.baidu.com

URL的组成(三部分):

  1. 客户端与服务器之间的 通信协议 :http

  2. 存有该资源的 服务器名称 : www.google.com

  3. 资源在服务器上 具体的存放位置 : /video/BV1zs411h74a?p=2&vd_source=86336122c63c1128fa57fab9ace00bbd

3. 分析网页的打开过程(请求,处理,响应)

过程:

  1. 客户端请求服务器

  2. 服务器处理请求

  3. 服务器响应客户端

打开browser,输入要访问的网站地址,向服务器发起资源请求

a. 服务器接收到客户端发来的资源请;b. 服务器内部处理请求,找到相关资源;c. 服务器把找到的资源,响应(发送)给客户端

基于开发者工具分析通信过程

  1. console,network

  2. Doc页签(代表网页)

  3. 刷新页面,分析客户端与服务器通信过程

4. 服务器对外提供哪些资源

常见资源

文字,图片,audio,video

数据也是一种资源

网页中的数据,也是服务器对外提供的一种资源

html,css,js皆是为数据服务

网页中如何请求数据

只要是资源,必然要通过 请求,处理,响应 的方式进行获取

如果在网页中请求服务器上的数据资源,需要用到XMLHttpRequest对象

XMLHttpRequest(xhr)

browser提供的js成员,可以通过它服务器上的数据资源

最简单的用法var xhrObj = new XMLHttpRequest()

资源的请求方式

最常见的两种:get 和 post

get请求:

通常用于 获取服务器资源(向服务器要资源):根据URl地址,向服务器获取HTML,css,js,图片文件,数据资源等。

post请求:

通常用于 向服务器提交数据 (往服务器发送数据):向服务器提交登录信息,注册信息,添加用户提交用户信息等数据提交操作。

5. Ajax

概念:

Asynchronous Javascript And XML(异步javascript和XML)

实现网页服务器间的数据交互

典型应用场景

用户名检测:通过ajax,动态 检测 用户名是否被占用

搜索提示:输入关键字时,动态加载搜索提示列表

数据分页显示: 点击页码值时,根据页码值动态刷新表格的数据

数据的增删改查:购物车删除商品之类的

Ajax实现步骤

  1. var xhrObj = new XMLHttpRequest(),使用 XMLHttpRequest 构造函数实例化创建一个 xhr

  2. 告诉 Ajax 请求方式和请求地址,以何种方式发送请求,向哪发送请求

    xhr.open('get', 'http://www.example.com')

  3. 发送请求 xhr.send();

  4. 获取服务器端给与客户端的响应数据

    响应受到网络环境的影响,发送请求以后不能直接去接收数据(例如网络拥挤导致服务器延迟响应),而是要使用 onload 方法监听服务器的响应状态。responseText 是服务器响应的数据内容。

    xhr.onload = function () {
       console.log(xhr.responseText);
    }

6. jquery中的ajax(未)

https://www.bilibili.com/video/BV1zs411h74a/?vd_source=86336122c63c1128fa57fab9ace00bbd

P5,6,7

7. 接口

概念:

使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称 接口),同时,每个接口必须要有请求方式

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(get请求)

http://www.liulongbin.top:3006/api/addbook 添加图书的接口(post请求)

https://ajax-base-api-t.itheima.net/

接口的请求过程

通过get方式请求接口的过程

网页中的对象,xhr封装,jq相关的ajax函数,通过ajax向服务器发送get数据请求,服务器处理请求,再响应get请求。

通过post方式请求接口的过程

ajax向服务器发起post数据请求,服务器处理请求,再响应post请求。

接口测试工具

作用

不写任何代码的情况下,对接口进行 调用测试

常用:PostMan,ApiPost

步骤

  1. 选择请求方式

  2. 填写请求的URL地址

  3. 填写请求的参数

  4. get请求是query面板;post请求是post面板并勾选数据格式(x-www-form-urlencoded)

  5. 发起请求

  6. 查看服务器响应的结果

8. 接口文档

概念:

接口的说明文档,调用接口的依据;参考接口文档知道接口的作用,以及接口如何调用。

好的接口文档包含:

  1. 接口名称:用来标识各个接口的简单说明,如登陆接口,获取图书列表接口

  2. 接口URL:接口的调用地址

  3. 调用方式:如get,post

  4. 参数格式:接口需要传递的参数,每个参数必须包含 参数名称参数类型是否必选参数说明 这4项内容

  5. 响应格式:接口的返回值的详细描述,一般包含 数据名称数据类型说明 三项内容

  6. 返回示例(可选):通过对象的形式,举例服务器返回数据的结构

 

9. 渲染html

  1. 获取ajax请求获取数据

  2. 获取列表数据是否成功

  3. 渲染页面结构