0
点赞
收藏
分享

微信扫一扫

NLP在网安领域中的应用(初级)

芥子书屋 2023-11-15 阅读 40
ajax前端

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>AJAX</title>

</head>

<body>

<!-- 什么是AJAX

定义AJAX是异步的JavaScript和XML,

简单点说,就是XMLHttpRequest对象与服务器通信,它可以使用JSON,XML,HTML,和text文本格式发送和接收数据,

AJAX最吸引人的就是它的异步特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。 -->

<!-- 概念:AJAX是浏览器与服务器进行数据通信的技术,能把把数据变活 -->

<!-- 怎么用AjAX

1.先使用axios库,与服务器进行数据通信

2.再学习XMLHttp Request对象的使用,了解AJAX底层原理 -->

<!-- axios使用

语法:

1.引入axios.js

2.使用axios函数

要传入配置对象,再用.then回调函数接收结果,并做后续处理

axios({

    url:'目标资源地址'

}).then((result)=>{

    //对服务器返回的数据做后续处理

})

-->

<!-- URL

定义:统一资源定位符,简称网址,用于访问网络上的资源

组成:协议+域名+资源路径

http协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式

域名:必须要写的,标记服务器在互联网中的方位

资源路径:标记资源在服务器下的具体位置

-->

<!-- URL查询参数

定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

语法:http://xxxx.com/xxx/xxx?参数名=值&参数名2=值2-->

<!-- axios查询参数

语法:使用axios提供的params选项

注意:axios在运行时把参数名和值,会拼接到url?参数名=值

-->

<!-- method:请求的方法,GET可以省略不区分大小写

GET:获取数据 (默认行为可以省略)

POST:提交数据

PUT:修改数据(全部)

PATCH:删除数据

DELETE:修改数据(部分)

-->

<!-- data:提交数据 -->

<!-- axios错误处理

  语法:在then方法的后面,通过点语法调用catch方法,传入回调函数并定义形参

axios({

  //请求选项

}),then(result => {

  //处理数据

}).catch(error =>{

  //处理错误

})

-->

<!--浏览器发送给服务器的内容叫做请求报文

  请求报文格式

1.请求行:请求方法,URL,协议

2.请求头:以键值对的格式携带的附加信息,比如:Content-type(类型)

3.空行:分隔请求头,空行之后的是发送给服务器的资源

4.请求体:发送的资源

可以通过chrome网络面板查看请求报文

请求报文可以用于错误排查

可以通过请求报文排查错误原因,并修复

-->

<!-- HTTP协议-响应报文

HTTP协议:规定了浏览器发送及服务器放回内容的格式

响应报文:服务器按照HTTP协议要求的格式,返回给浏览器的内容

1.响应行(状态行):协议,HTTP响应状态码,状态信息

2.响应头:以键值对的格式携带的附加信息,比如:Content-Type

3.空行:分隔响应头,空行之后的是服务器返回的资源

4.响应体:返回的资源

HTTP响应状态码

用来表明请求是否成功完成

比如404:服务器找不到资源

1xx:信息

2xx:成功

3xx:重定向信息

4xx:客户端错误

5xx:服务器错误

-->

<!-- 接口文档

接口文档:后端提供的描述接口文章

接口:使用AJAX和服务器通讯时,使用的URL,请求方法,以及参数

-->

<p></p>

<!--

    城市列表: http://hmajax.itheima.net/api/city

    参数名: pname

    值: 省份名字

  -->

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>

    axios({

      url: 'http://hmajax.itheima.net/api/city',

      // 查询参数

      params: {

        pname: '福建省'

      }

    }).then(result => {

      console.log(result.data.list)

      document.querySelector('p').innerHTML = result.data.list.join('<br>')

    })

  </script>

  <button class="btn">注册用户</button>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>

    /*

      注册用户:http://hmajax.itheima.net/api/register

      请求方法:POST

      参数名:

        username:用户名(中英文和数字组成,最少8位)

        password:密码  (最少6位)

      目标:点击按钮,通过axios提交用户和密码,完成注册

    */

document.querySelector('.btn').addEventListener('click', () => {

    axios({

      url: 'http://hmajax.itheima.net/api/register',

      method: 'post',

      data: {

        username: 'itheima007',

        password: '7654321'

      }

    }).then(result => {

      // 成功

      console.log(result)

    }).catch(error => {

      // 失败

      // 处理错误信息

      console.log(error)

      console.log(error.response.data.message)

      alert(error.response.data.message)

    })

   })

  </script>

</body>

</html>

举报

相关推荐

0 条评论