diff --git "a/47 \346\250\212\345\260\217\351\203\255/20231207 JS\347\232\204Ajax2.md" "b/47 \346\250\212\345\260\217\351\203\255/20231207 JS\347\232\204Ajax2.md" new file mode 100644 index 0000000000000000000000000000000000000000..deeb31025c6f1936ae3f7005a8f096779352a53b --- /dev/null +++ "b/47 \346\250\212\345\260\217\351\203\255/20231207 JS\347\232\204Ajax2.md" @@ -0,0 +1,459 @@ +# Ajax的课堂笔记 + +**AJAX概念** + +- 使用浏览器的 XMLHttpRequest 对象 与服务器通信 +- 浏览器网页中,使用 AJAX技术(XHR对象)发起获取省份列表数据的请求,服务器代码响应准备好的省份列表数据给前端,前端拿到数据数组以后,展示到网页 + +**什么是服务器** + +- 可以暂时理解为提供数据的一台电脑 + +**axios 语法,步骤** + + 1. 引入 axios.js 文件到自己的网页中 + + > axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js + + 2. 明确axios函数的使用语法 + + ```js + axios({ + url: '目标资源地址' + }).then((result) => { + // 对服务器返回的数据做后续处理 + }) + ``` + + > 注意:请求的 url 地址, 就是标记资源的网址 + > + > 注意:then 方法这里先体验使用,由来后续会讲到 + + 3. 对应代码 + + ```html + + + + + + + + AJAX概念和axios使用 + + + + +

+ + + + + + ``` + + ------ + + ## 认识URL + +1. 为什么要认识 URL ? [mdn](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX/Getting_Started) + + * 虽然是后端给我的一个地址,但是哪部分标记的是服务器电脑,哪部分标记的是资源呢?所以为了和服务器有效沟通我们要认识一下 + +2. 什么是 URL ? + + * 统一资源定位符,简称网址,用于定位网络中的资源(资源指的是:网页,图片,数据,视频,音频等等) + + ![image-20230403185206384](C:\Users\Administrator\Desktop\02-笔记\images\image-20230403185206384.png) + +3. URL 的组成? + + * 协议,域名,资源路径(URL 组成有很多部分,我们先掌握这3个重要的部分即可) + + ![image-20230403185305934](C:\Users\Administrator\Desktop\02-笔记\images\image-20230403185305934.png) + + + +4. 什么是 http 协议 ? + + * 叫超文本传输协议,规定了浏览器和服务器传递数据的格式(而格式具体有哪些稍后我们就会学到) + + ![image-20230403185356997](C:\Users\Administrator\Desktop\02-笔记\images\image-20230403185356997.png) + +5. 什么是域名 ? + + * 标记服务器在互联网当中的方位,网络中有很多服务器,你想访问哪一台,就需要知道它的域名才可以 + + ![image-20230403185406674](C:\Users\Administrator\Desktop\02-笔记\images\image-20230403185406674.png) + +6. 什么是资源路径 ? + + * 一个服务器内有多个资源,用于标识你要访问的资源具体的位置 + + ![image-20230403185428276](C:\Users\Administrator\Desktop\02-笔记\images\image-20230403185428276.png) + +7. 接下来做个需求,访问新闻列表的 URL 网址,打印新闻数据 + + * 效果图如下: + + ![image-20230220122455915](C:\Users\Administrator\Desktop\02-笔记\images\image-20230220122455915.png) + + > 新闻列表数据 URL 网址:http://hmajax.itheima.net/api/news + + ```js + axios({ + url: 'http://hmajax.itheima.net/api/news' + }).then(result => { + console.log(result) + }) + ``` + + > url解释:从黑马服务器使用http协议,访问/api/news路径下的新闻列表资源 + + + +# 作业 + +```html + + + + + + + + 聊天机器人 + + + + + + + + + + + + + + + + + + + +
+ +
+ 9:41 +
+ + + +
+
+ +
+ + 使劲夸夸 +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+
+ + + + + +``` \ No newline at end of file