Day16 ajax-上

–

第一节：

同步和异步

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。

编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sEAb9pMU-1663213466619)(/1566608564571.png)]

js 是单线程,异步代码.

ajax的概念

什么是ajax

1 Ajax: asynchronous javascript and xml (异步js和xml)

xml 是json 没有出现之前,用于传输前后端数据用的

2 是可以与服务器进行(异步/同步)交互的技术之一。

ajax的语言载体是javascript。 最大特点：页面不刷新
ajax的一些常见应用,使网页无刷新向web服务器发送请求数据.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yFwNH8qC-1663213466620)(/1591098355805.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kMX7PIiV-1663213466621)(/1591098627071.png)]

ajax出现的历史

1999年，微软公司发布IE5浏览器的时候嵌入的一种技术。起初名字是XMLHttp

 直到2005年，google公司发布了一个邮箱产品gmail，内部有使用ajax技术，该事情引起人们对ajax的注意，也使得一蹶不振的javascript语言从此被人们重视起来

ajax的使用

XMLHttpRequest对象

 浏览器内建对象，用于与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步的，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。

ajax的运行

一定要打开server,且把它放在没有中文的目录下.

GET请求的创建

请求的创建与发送

主流浏览器(火狐、google、苹果safari、opera,包括IE8以上的版本)的创建方式,也是现在主要使用的.

//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//2. 设置请求的类型,以及地址
// 第一个参数:请求方式  get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
// 第三个参数：默认是异步
xhr.open("get", "http://localhost:8888/test/first"，异步/同步);

//3.发送请求到服务器
xhr.send(null);

手册位置
http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

GET的使用

例1:在页面中添加一个按钮,点击一次发送一个请求,查看返回值

  <input type="button" value="发送" οnclick="fn()">
  <script>
    function fn() {

      //1. 创建一个XMLHttpRequest对象
      var xhr = new XMLHttpRequest();
      //2. 设置请求的类型,以及地址

      xhr.open("get", "http://localhost:8888/test/first");
      //3.发送请求到服务器
      xhr.send(null);
    }
  </script>

请求发送之后的查看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51jej0dx-1663213466622)(/1651714844615.png)]

ajax状态

通过监控请求状态，当状态等于4的时候才能接受数据

xhrObj.onreadystatechange - 监听readyState状态，当状态发生改变可调用对应函数处理

ajax五种状态的作用

/*xhrObj.readyState - 返回当前请求的状态
   xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
   xhr.readyState = 1时-初始化,对象建立未调用send()
   xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
   xhr.readyState = 3时-数据传输中,接受部分数据
   xhr.readyState = 4时-响应内容解析完成
*/

例:获取ajax请求过程的四种状态

        // 1 实例化对象
      let xhr = new XMLHttpRequest(); 
         xhr.onreadystatechange = function(){
              // 4 使用回调函数检测当前的状态
                    console.log(xhr.readyState);
                    // 获取服务器状态码
                    console.log(xhr.status)
                    // 接受服务器返回数据
                   console.log(xhr.responseText);  
         }
        //  2 创建请求
         xhr.open('get','http://localhost:8888/goods/list');
         // 3 发送请求
         xhr.send();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hOTCUwDn-1663213466623)(/1563071088709.png)]

返回服务器状态码 xhr.status

    1**：请求收到，继续处理
    2**：操作成功收到，分析、接受
    3**：完成此请求必须进一步处理
    4**：请求包含一个错误语法或不能完成
    5**：服务器执行一个完全有效请求失败
    
    100——客户必须继续发出请求
    101——客户要求服务器根据请求转换HTTP协议版本

    200——客户端请求成功
    201——提示知道新文件的URL     
    202——接受和处理、但处理未完成
    203——返回信息不确定或不完整
    204——请求收到，但返回信息为空
    205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
    206——服务器已经完成了部分用户的GET请求

    300——请求的资源可在多处得到
    301——删除请求数据
    302——在其他地址发现了请求数据
    303——建议客户访问其他URL或访问方式
    304——客户端已经执行了GET，但文件未变化
    305——请求的资源必须从服务器指定的地址得到
    306——前一版本HTTP中使用的代码，现行版本中不再使用
    307——申明请求的资源临时性删除

    400——错误请求，如语法错误
    401——请求授权失败
    402——保留有效ChargeTo头响应
    403——请求不允许
    404——没有发现文件、查询或URl
    405——用户在Request-Line字段定义的方法不允许
    406——根据用户发送的Accept拖，请求资源不可访问
    407——类似401，用户必须首先在代理服务器上得到授权
    408——客户端没有在用户指定的饿时间内完成请求
    409——对当前资源状态，请求不能完成
    410——服务器上不再有此资源且无进一步的参考地址
    411——服务器拒绝用户定义的Content-Length属性请求
    412——一个或多个请求头字段在当前请求中错误
    413——请求的资源大于服务器允许的大小
    414——请求的资源URL长于服务器允许的长度
    415——请求资源不支持请求项目格式
    416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
    417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

    500——服务器产生内部错误
    501——服务器不支持请求的函数
    502——服务器暂时不可用，有时是为了防止发生系统过载
    503——服务器过载或暂停维修
    504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
    505——服务器不支持或拒绝支请求头中指定的HTTP版本

onload的使用

      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://localhost:8888/test/first', true)
      xhr.send()
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
      console.log('end')

服务器响应值接收

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据(知道)。

接受服务器返回值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <script type="text/javascript">
      function f1(){
        //创建ajax对象
        var xhr  = new XMLHttpRequest();
        //设置请求的地址
        xhr.open('get','http://localhost:8888/test/first');
        //发送请求,如果是get请求则参数设置为null
        xhr.send();
        //显示ajax的状态
        /*
        ajax的四中状态
        0 对象已创建,请求连接未初始化(尚未调用open方法)
        1 请求连接已经已经建立没有调用send方法
        2 请求连接已建立,调用send方法
        3 数据已经开始传输但尚未完成
        4 数据传输已经完成,请求已经完成
         */
           // onreadystatechange 当请求的状态发生改变时,就会触发
        xhr.onreadystatechange=function(){
            //显示五种状态
            //console.log(xhr.readyState);
            //判断当的请求状态等于4时,代表数据传输完成
             if(xhr.readyState==4 && xhr.status==200){
                //使用responseText接受服务器端传递的数据
                //alert(xhr.responseText);
                //追加显示到页面中
               document.body.innerHTML+=xhr.responseText;
             }
        }
        
        //alert(xhr.responseText);
      }
    </script>
    <body>
    <input type="button" name="" value="点我发送请求" onclick="f1();">
    </body>
</html>

第三节

get和post的区别

1 get是地址栏的方式访问的,是可见的

2 get方式传递数据量比较小.安全性低.

3 post以非地址栏的形式访问,能够安全且大量的传递数据

常见post使用

表单中使用, ajax中使用

GET携带参数

 /*
      带有参数的 get 请求
        + GET
          => 参数位置: 地址后面
          => 参数格式: 查询字符串
        + open 的第二个书写的内容就是请求地址
          => 需要把参数和 地址 组装成一个完整字符串
        + 查询字符串格式
          => key=value&key2=value
          => name=小甜甜&age=17.5
        + 小问题
          => 直接书写以后, 参数和地址分不开了
          => 地址和参数之间使用 问号(?) 分隔
    */

    const xhr = new XMLHttpRequest()

    xhr.open('GET', 'http://localhost:8888/test/third?name=小甜甜&age=17.5')

    xhr.onload = function () {
      const res = JSON.parse(xhr.responseText)
      console.log(res)
    }

    xhr.send()

POST方式

请求步骤

1)	创建Ajax对象。

2)	设置回调函数。接收后台返回的结果

3)	初始化对象。(获取节点对象)

4)	设置请求头信息“Content-type,application/x-www-form-urlencoded”

5)	发送请求。

实现请求

setRequestHeader() 设置请求头信息

application/x-www-form-urlencoded 设置传递参数时,使用的编码格式(默认)

例:以post的方式传递数据

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <script type="text/javascript">
     function f1(){
        //实例化ajax对象
        var xhr = new XMLHttpRequest();
        //设置请求的参数,设置以post方式发送请求
        xhr.open('post','http://localhost:8888/text/fourth');
         //如果需要像 HTML 表单那样 POST 数据,以&形式传输数据
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        //构造传递的参数,形式与get传参的方式一致
        var data = 'name=张三&age=19';
         //发送请求
         xhr.send(data);

         //接受返回的信息
         xhr.onreadystatechange=function(){
            //验证当前的装态接受返回的信息
            if(xhr.readyState==4){
                //接受服务器返回的信
                var info = xhr.responseText;
                alert(info);
            }
         }
     }
    </script>
    <body>
    <input type="button" name="" value="post请求" onclick="f1();">
    </body>
</html>

例1:实现登录的功能

注意:使用vscode虚拟服务器,会自动刷新

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <link rel="stylesheet" href="./form.css"> -->
  <title>Document</title>
  <style>
    .error {
      background: red;
      display: none;
      width: 200px;
    }
  </style>
</head>

<body>
  <h4 align="center">POST</h4>
  <form action="" method="post">
    用户名：
    <input type="text" name="username" class="username">
    <br /> 密码：
    <input type="password" name="password" class="password">
    <br />
    <input type="submit" value="登录">
  </form>
  <p class="error"> 登录失败 </p>
  <script>
    // 0. 获取元素
    const form = document.querySelector('form')
    const nameInp = document.querySelector('.username')
    const pwdInp = document.querySelector('.password')
    const errBox = document.querySelector('.error')

    // 1. 绑定表单提交事件
    form.addEventListener('submit', e => {
      // 1-1. 阻止默认行为
      e.preventDefault();
      // console.log(e.preventDefault);
      // 1-2. 采集用户信息
      const name = nameInp.value
      const pwd = pwdInp.value
      // console.log(name, pwd);
      // 1-3. 前端验证
      if (!name || !pwd) return alert('请完整填写表单 (#^.^#)')

      // 因为是 POST 请求, 并且携带了参数, 需要提前在请求头内设置一个信息

      // 1-4. 发送请求
      // 按照接口文档发送请求
      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://localhost:8888/users/login');
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
      xhr.send(`username=${name}&password=${pwd}`)

      xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
          const res = JSON.parse(xhr.responseText)
          if (res.code === 0) {
            // 登录失败了
            // 提示用户错误
            errBox.style.display = 'block'
            return
          }
          console.log(res);

        }
        // window.location.href = 'https://www.baidu.com'
      }
    })
  </script>
</body>

</html>

同步和异步请求

异步：不等待ajax请求响应完毕，直接执行下面的代码

同步：等待ajax请求响应完毕后，再执行下面的代码

ajax的异步

异步示意图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bz2RY5D-1663213466624)(/1563074331106.png)]

ajax的同步

同步请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BXo3HPMB-1663213466625)(/1563074417964.png)]

验证同步与异步

异步代码

    console.log('start')
    // 发送一个 ajax
    const xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://localhost:8888/test/first', false)
    xhr.onload = function () {
      console.log(xhr.responseText)
    }
    xhr.send()
    console.log('end')

同步代码

     console.log('start')
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://localhost:8888/test/first', true)
      xhr.send()
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
      console.log('end')

脚下留心

注意ajax给变量赋值的问题

xhr.open(‘GET’, ‘http://localhost:8888/test/first’, false)
xhr.onload = function () {
console.log(xhr.responseText)
}
xhr.send()
console.log(‘end’)

同步代码

```javascript
     console.log('start')
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://localhost:8888/test/first', true)
      xhr.send()
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
      console.log('end')

脚下留心

注意ajax给变量赋值的问题