JavaScript的学习笔记（day15）

1.AJAX Asynchronous Javascript And XML

概念：创建交互式网页应用的开发技术，用于实现浏览器和服务器之间进行数据交互
特点：使用脚本操作HTTP和Web服务器进行交换，不会导致网页重载
总结：AJAX是一种异步的JS和XML，用于创建更好更快和交互性更强的Web应用程序技术，它是一种独立于Web服务器软件的浏览器技术，且不是一种编程语言。使用JS在浏览器与服务器之间使用异步传输发送和接收数据，实现前后端交互。

2.HTTP HyperText Transfer Protocol

概念：规定浏览器如何从服务器获取文档和如何向服务器提交表单内容，以及服务器如何相应请求和提交
组成：
HTTP请求：请求头 请求行 空行 请求体
HTTP响应：响应头 状态行 空行 响应体

3.XMLHttpRequest

概念：用于指定请求细节和提取响应数据 这个类的每个实例都是一个独立的请求或响应
使用方法：
1.创建一个实例
var request = new XMLHttpRequest();

2.使用open方法设置服务器的请求方式和请求地址
参数：
请求方式：GET（用于常规请求适用于完全指定请求资源，响应可缓存）
OPEN（用于表单提交，请求体中包含参数，响应不会缓存）
请求地址：URL 不能跨域请求，否则会报错
Boolean值 false表示同步请求send()方法会等待至请求完成 true表示异步请求
request.open(‘get’,‘https://api.muxiaoguo.cn/api/lishijr?api_key=0b0c3893a95d6987’)

3.设置requestHeader()

json格式数据：application/json
表单数据：application/x-www-form-urlencoded
纯文本：text/plain 默认
html文本：text/html
request.setRequestHeader(属性名称, 属性值);

4.发送数据，开始交互 send() 参数是请求体，没有则为null
request.send();

5.取得响应，注册事件 && 6.当请求完成，获取数据
属性：
respondText：响应体的文本内容
status：响应的状态
statusText：响应的状态描述
readyState：请求状态
readystatechange：请求状态发生改变时的事件

   request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        // console.log(request.responseText);
        // 转换为JSON对象
        console.log(JSON.parse(request.responseText));
      }
    }

7.响应解码 MIME-TYPE

当MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性
解析

MIME类型为XML文档类型时，使用responseXML属性解析

如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。通
过responseText接受到它，可以把它传递给JSON.parse()方法来解析。

get有参请求

  <!-- https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5 -->
  <button onclick="getParams()">获取有参get请求</button>
  <script>
    function getParams() {
      var request = new XMLHttpRequest()
      //url序列化  ?city="suzhou"&type="1"
      // 第一种形式 拼接字符串
      //request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + 'city=' + '苏州' + '&' + 'type=' + '1' + '&api_key=779d7e46708290a5');
      // 第二种形式 传递序列化后的参数
      var params = {
        city: '苏州',
        type: 1
      }
      // // 参数序列化 要先引入QS序列化工具
      var qs = Qs;
      request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + qs.stringify(params));
      request.send();
      console.log(qs.stringify(params));
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
        }
      }
    }
  </script>

post无参请求

  <!-- https://api.muxiaoguo.cn/api/Gushici -->
  <button onclick="postNo()">post无参</button>
  <script>
    function postNo() {
      var request = new XMLHttpRequest()
      request.open('post','https://api.muxiaoguo.cn/api/Gushici');
      request.send();
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request);
        }
      }
    }
  </script>

post有参请求

  <!-- 使用登录接口 http://121.4.83.32:7004/user/login-->
  <button onclick="login()">登录</button>
  <script>
    function login() {
      var request = new XMLHttpRequest();
      request.open('post','http://121.4.83.32:7004/user/login');
      var params = {
        password: "123321",
        username: "admin1"
      }
      // 登录接口Content-type为json格式
      request.setRequestHeader('Content-type','application/json;charset=utf-8');
      request.send(JSON.stringify(params))
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
        }
      }
    }
</script>