Ajax浅谈1

1浏览器和服务器

浏览器是一个检索、展示、传送web资源的应用程序。

服务器：存放资源和对外提供各种服务和计算的主机电脑。

常见服务器功能：

浏览器访问的资源在服务器！ 

浏览器和服务器的作用分别是？

浏览器：浏览器资源

服务器：提供资源

2 概念-URL网址

概念：统一资源定位符，标记资源在互联网中的唯一地址

http协议：超文本传输协议，规定浏览器和服务器之间传输数据的规则，保证能读懂对方发来的内容。

主机名：标记服务器在互联网中电子方位，也是唯一地址，确保能访问到它。

端口号：标记服务器里不同服务，端口号可以是0-65535之间任意整数，浏览器默认访问80端口

资源路径：标记资源在某个服务下的具体位置

 

1. url网址作用是什么？

 标记资源在互联网中唯一地址

2. url网址组成部分是？

 协议，主机名，端口，资源路径

1.3请求和响应

浏览器和服务器通信过程，分为请求和响应两个步骤

请求：浏览器通过网络去服务器要资源的过程，叫做“请求”

响应：服务器通过网络给浏览器返资源的过程，叫做‘响应’

 响应资源的划分：html字符 CSS字符 JS字符 image照片 video视频 audio 音频

数据也是一种资源：服务器除了返回文件内容外，还可以单独返回数据内容。

数据资源应用才是网页的灵魂。

数据类型的URL网址，返回的字符串格式是？

JSON字符串格式

2axios库的使用

ajax是浏览器中的技术，可在JS代码中发起请求并获取响应数据

如何在网页中，浏览器与服务器交互数据通过哪种技

术？

 用浏览器的Ajax技术, 在JS代码里发请求和获取响应结果

2.1_axios语法库的使用

起步 | Axios Docs   语法库官网

axios({

    url:"请求的URL地址"，    
    method:"请求的方法"
}).then(result)=>{

    //.then用来指定完成请求之后的回调函数
     //形参中的result 是请求之后的结果
}

 案例获取省份名称

 

 1.查询参数有什么用？

让后端返回匹配的数据

2.axios如何查询参数？

使用params选项

3.2传参本质和URL编码

URL编码：在 URL 地址中 不能出现中文等特殊字符 ，因此浏览器会 自动 对 URL 内的中文进行 转换处理 。例

如：处理前和处理后,三个百分号为一个汉字

 JS内置了方法可以用代码进行转换：

 1.查询参数的本质是什么？

在url？后面拼接的参数名和值

什么是URL编码

浏览器会吧URL中文和特殊符号转成%xx表现形式

09.案例_新闻列表（超过20分一定要拆开）

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
        url:'http://hmajax.itheima.net/api/news',
        method:'GET'
    }).then(res =>{
        console.log(res)
        //解构赋值
        // const {data:{data}} = res
        const {data} = res.data


         document.querySelector('#news-list').innerHTML= data.map(item=>{
            // console.log(item)
            return `
            <div class="news-item">
      <img class="thumb" src="${item.img}" alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">${item.title}</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>${item.source}</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>${item.time}</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：${item.cmtcount}</span>
        </div>
      </div>
    </div>`
            
        }).join('')
        

    })
  </script>

 为何axios结果要访问两次data属性 ？

axios对服务器返回的数据对象套了个壳

5中常见的 请求方式？

GET 从服务器中获取

POST 从服务器中新增数据

DELETE删除服务器上的数据

PUT更新服务器上的数据（侧重于完成整更新，列如更新用户的完整信息）

PATCH 更新服务器上的数据（侧重于部分更新，列如只更新用户的手机号）

POST 新增参数 图书案例！

 

 GET 和POST区别？

都是HTTP请求，只是对应后端的不同业务功能，关注点应是传参位置

 表面区别：浏览器对URL长度有限制，而请求体由服务器设置一般是无限制

1. GET和POST有什么区别？

 本质都是HTTP请求无区别

 区别只是后端做出动作不同，以及浏览器对url长度有限制

2. GET和POST我们怎么选择？

 后端规定好的]

3报文和响应码

请求报文规则了浏览器以什么格式吧数据发送给服务器

组成 请求行request line 请求头部 header 空行 请求体 四个部分

 1.请求报文的四个组成部分 ？

请求行、请求头、空行、请求体

请求行里包含那些内容？

请求方式，URL，协议版本

3.2响应报文

响应报文规定了服务器以什么格式把数据返回给浏览器

组成 状态行、响应头部、空行、响应体4个部分

 

 响应报文的四个组成部分？

状态行、响应头部、空行、响应体

响应状态码？
是有三位数组组成，标识响应成功与否