初识ajax初次使用get，post传参

浅了解http和https

HTTP协议以名文的方式发送内容，不会提供任何方式的数据加密。HTTP协议不适合传输一些敏感信息，比如（信用卡号，密码等支付信息）

HTTPS则是具有安全性的ssl加密传输协议。

HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，HTTP协议使用的是80端口，HTTPS协议使用的是443.并且HTTPS协议需要使用ca申请证书。

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，要比HTTP协议更加安全一些。

HTTPS协议主要的作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器身份，并为浏览器和服务器之间的通信加密。

Ajax的作用

在浏览器中的地址输入URL，即可和服务器进行通讯，但是这种方式页面会进行重新加载，而Ajax就是可以在不刷新页面的请款下，和服务器进行交互，不会刷新页面

初次体验Ajax

<script>
    // ajax前后端交互代码
    axios({
        url: `URL`,
        method:`get`,
    }).then((res) => {
        console.log(res)
        if (res.data.data.errcode === 100){
            alert(`该城市天气预报未得到`)
        } else {
            alert(res.data.data.data[0].wea)
        }
    })
    // 导入了axios网络请求库
    // 在输入框按下回车，并且内容不为空时和服务器交互=>请求地址就是服务器的资源地址
    // 服务器内容响应回来之后出发then响应
    // 将获取到的相应内容设置给then中回调函数的参数
</script>

接口

接口时后端写好的服务器，或者后端写好的文档资源，我们在后端提供的接口文档中找到接口并且调用即可

使用Ajax和服务器进行通讯时，被请求的URL地址，叫做数据接口

Ajax请求的服务器一般称为，接口服务器

接口服务器一般提供操作服务器数据的一系列方法

调用接口有点类似于调用后端封装好的函数

Ajax的请求方法

post：向服务器新增数据（传递）

get：从服务器获取数据

delete：删除服务器上的数据

put：更新服务器上的数据

path：更新服务器上的数据

get请求

<h2>git请求+参数更换</h2>
<button class="btn1">测试</button>
<button class="btn2">测试添加参数</button>
<script src="./lib/axios.js"></script>
<script>
  const btn1 = document.querySelector(`.btn1`)
  btn1.addEventListener(`click`,() => {
    // 发送get请求
    axios.get('http://ajax-api.itheima.net/api/books')
            // 成功进入这里    // 失败进入这里
            .then(res => {console.log(res)})
            .catch(err => {console.log(err)})
  })
  // 如果有参数
  const btn2 = document.querySelector(`.btn2`)
  btn2.addEventListener(`click`,()=>{
    console.log(1)
    // axios.get("http://ajax-api.itheima.net/api/robot?spoken='你吃饭了吗'")
    axios.get("http://ajax-api.itheima.net/api/robot",{params:{spoken: `你吃饭了吗`}})
            .then(response => {console.log(response)})
            .catch(error => {console.log(error)
    })
  })
</script>

post请求

<h2>post请求+参数</h2>
<button class="btn1">测试</button>
<script src="./课堂案例/lib/axios.js"></script>
<script>
    const btn1 = document.querySelector(`.btn1`)
    btn1.onclick = () => {
        axios.post('http://ajax-api.itheima.net/api/login', {
            username : `admin`,
            password : `123456`
        })
            .then(function (response) {  //请求成功
                console.log(response);
            })
            .catch(function (error) {   //请求失败
                console.log(error);
            });
    }

</script>

状态码

1** 信息，服务器收到请求，需要请求者继续执行操作

2** 成功，操作被成功接收并处理

3** 重定向，需要进一步的操作以完成处理

4** 客户端错误，请求包含错误或者无法完成的请求

5** 服务器错误，服务器在处理请求的过程中发生了错误

200 请求成功

201 资源在服务器已成功创建

304 资源在客户端被缓存，响应体中不包含任何资源内容

400 客户端的请求方法，或请求参数有误，导致失败

401 客户端的用户身份认证未通过，导致此次请求失败

404 客户端请求的资源地址错误，导致服务器无法找到资源

500 服务器内部错误，导致本次请求失败