ajax 基础语法和基础了解

#

面试题

1. 说一下 GET 和 POST 的区别:说一下 GET 和 POST 的区别？ | 前端面试题整理
2. 说一下常见的状态码：http://fanyouf.gitee.io/interview/http/05.html

url概念

概念：url, 统一资源定位符, 标记资源在网络中的位置。也称网址

作用: 标记某个资源在网络中的唯一地址。只有通过URL地址，浏览器才能定位资源的存放位置，从而成功访问到对应的资源。

4个部分组成：

1. 协议

2. 主机名

3. 端口号（可省略）

4. 资源存放的路径

示例：

http://www.itcast.cn:80/2018czgw/images/logo.png

请求和响应

1. 请求: 浏览器, 通过网络去服务器要资源的过程, 叫做"请求"

2. 响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应"

​

1. 响应的资源类型有哪些?

​

​

2. 数据类型的url网址返回的数据格式是?

​

JSON

1. JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组

   配套API

JSON.stringify(JS数据类型); JSON.parse(JSON字符串)

ajax

(是一种在js代码中发送请求并获取响应数据的技术)

---

axios的使用

1 先引入axios.js文件到自己的网页中

axios.js文件链接: https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js

2 axios的使用语法

   axios({
   url: '请求的URL网址',
    method: '请求的方法'
    
}).then((结果变量名) => {
    // .then 用来指定请求成功之后的回调函数
    // 形参中的 result 是请求成功之后的结果
})

接口

接口是提供数据服务的url网址。

使用 Ajax 技术请求数据时，被请求的 URL 网址，就叫做数据接口（简称：接口或 API 接口）。

接口文档

是接口使用说明书

传参本质和URL编码

// 格式: url地址?参数名=值&参数名=值
axios({
    url: 'http://ajax-api.itheima.net/api/area?pname=辽宁省&cname=大连市',
    method: 'GET',
    // params: {
    //     pname: '辽宁省', // 告诉后台, 我要获取辽宁省下的城市列表
    //     cname: '大连市'
    // }
}).then(result => {
    console.log(result);
})

1. 请求报文组成

• • 请求行

• • • 请求方式: (GET / POST / DELETE / PUT / PATCH)

    • 请求url: 资源在服务器地址

    • 协议版本: 默认HTTP/1.1

• 响应码

• • 请求头部: 头部参数名: 值

  • 请求体: 携带给服务器的数据

• • 200: 比如我们前面案例里的Ajax的请求, 正确的响应状态就为200

  • 302: 比如先打开Network, 再访问baidu.com, 会出现302重定向

  • 304: 比如先打开Network, 再访问百度图片-发现多彩世界, 有的css, js, 图片文件就会有缓存

  • 4xx: 可以在后续做案例/项目中遇到

  • 500: 比如先打开Network, 再访问http://pcapi-xiaotuxian-front-devtest.itheima.net/login, 会出现500

• 响应状态码判断请求响应过程是否成功

• 业务状态码判断业务处理过程是否成功