Ajax课堂笔记

最新推荐文章于 2023-07-28 13:02:05 发布

鹫浣

最新推荐文章于 2023-07-28 13:02:05 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/qq_42501107/article/details/109956493

版权

Ajax

1 ajax概念：【了解】

局部更新数据，浏览器不刷新。简单的说，就是偷偷的局部和后端进行数据交互。整个过程浏览器不刷新，用户体验极好。

2 发送get请求【重点】

【 4步】使用原生js的ajax，发送get请求.

// 1. 创建一个ajax对象 
let xhr = new XMLHttpRequest()

// 2. 配置 请求方式 和 请求地址
xhr.open('get', 后端给的ajax接口地址？参数名1=参数值1&参数名2=参数值2)

// 3. 发送请求
xhr.send()

// 4 监听xhr对象的状态 接收数据
xhr.onreadystatechange = function () {
    // 当xhr对象的状态为4 且 http状态码为200 才能接收数据
    if (xhr.readyState == 4 && xhr.status === 200) {
        // responseText就是后端响应回来的数据 是一个字符串格式
        let data = xhr.responseText; 
    }
}

3 发送post请求【重点】

【 5步】

// 1. 创建一个ajax对象 
let xhr = new XMLHttpRequest()

// 2. 配置 请求方式 和 请求地址
xhr.open('post', 后端给的ajax接口地址)

// 3. 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

// 4. 发送请求
xhr.send('参数名1=参数值1&参数名2=参数值2')

// 5 监听xhr对象的状态 接收数据
xhr.onreadystatechange = function () {
    // 当xhr对象的状态为4 且 http状态码为200 才能接收数据
    if (xhr.readyState == 4 && xhr.status === 200) {
        // responseText就是后端响应回来的数据 是一个字符串格式
        let data = JSON.parse( xhr.responseText ) ; 
    }
}

4 验证邮箱是否存在【重点】

```javascript

email.addEventListener(“blur”, function () {
let val = email.value;

    // 发送ajax给后端 让后端去数据库瞧一眼 看有没有
    // 1. 创建一个ajax对象
    let xhr = new XMLHttpRequest();

    // 2. 配置 请求方式 和 请求地址
    xhr.open("post", "http://139.9.177.51:3333/api/emailExist");

    // 3. 设置请求头
    xhr.setRequestHeader(
      "Content-Type",
      "application/x-www-form-urlencoded"
    );

    // 4. 发送请求
    xhr.send(`email=${val}`);

    // 5 监听xhr对象的状态 接收数据
    xhr.onreadystatechange = function () {
      // 当xhr对象的状态为4 且 http状态码为200 才能接收数据
      if (xhr.readyState == 4 && xhr.status === 200) {
        // responseText就是后端响应回来的数据 是一个字符串格式
        let data = JSON.parse(xhr.responseText);

        let code = data.code;
        let msg = data.msg;

        if (code === 200) {
          // 成功
          info.innerHTML = msg;

          email.style.border = "2px solid green";
          info.style.color = "green";
        } else if (code === 500) {
          // 失败
          info.innerHTML = msg;

          email.style.border = "2px solid red";
          info.style.color = "red";
        }
      }
    };
  });
```

5 注册功能实现【重点】

registerBtn.addEventListener("click", function () {
        let val = email.value;

        // 1. 创建一个ajax对象
        let xhr = new XMLHttpRequest();
        xhr.open("post", "http://139.9.177.51:3333/api/reg");
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        xhr.send(`email=${val}`);
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            console.log("后端响应的结果:", data);
            let code = data.code;
            let msg = data.msg;

            if (code === 200) {
              // 成功
              alert(msg);
            } else if (code === 500) {
              // 失败
              alert(msg);
            }
          }
        };
      });

6 同步和异步【理解清晰】

同步：代码从上往下，依次执行，后面的代码，必须等待前面的代码执行完毕，才能实现。
异步：代码从上往下，依次执行，如果遇到异步，异步代码让开，放到一个队列中去排队，等待所有同步代码执行完毕，才会执行异步。

7 jquery的ajax

发送get请求

$.get(地址?参数名1=参数值1&参数名2=参数值2， function (data) {
   // data就是后端响应回来的数据      
})

发送post请求

$.post(地址，{ 参数名1：参数值1，参数名2：参数值2 }, function (data) {
   // data就是后端响应回来的数据      
})

万能方式【以前公司全部都是这种】【掌握】

$.ajax({
    url: '',  // 请求的ajax接口地址
    type: '', // 方式
    data: {  // 参数
        
    },
    success: function (data) {
        // 成功的回调函数 只要请求成功 就会执行这个函数 data就是后端响应的数据
    }
    
})

8 综合实例

var valid = false; // 是否可以提交表单 发送注册ajax

    $('#email').on('blur', function () {
      var val = $('#email').val()  // 获取输入框的值

      // 发送ajax 验证这个邮箱是否可以使用
      $.ajax({
        url: 'http://139.9.177.51:3333/api/emailExist',
        type: 'post',
        data: {
          email: val
        },
        success: function (data) {
          let code = data.code
          let msg = data.msg

          if (code === 200) {
            valid = true
            $('#email').css('border', '1px solid green')
            $('#info').html(msg).css('color', 'green')
          } else if (code === 500) {
            valid = false
            $('#email').css('border', '1px solid red')
            $('#info').html(msg).css('color', 'red')
          }
        }
      })
    })


    $('#registerBtn').on('click', function () {
      var val = $('#email').val()

      if (valid) {
        // 发送注册的ajax
        $.ajax({
          url: 'http://139.9.177.51:3333/api/reg',
          type: 'post',
          data: {
            email: val
          },
          success: function (data) {
            let code = data.code
            let msg = data.msg

            if (code === 200) {
              alert(msg)
            } else if (code === 500) {
              alert(msg)
            }
          }
        })
      }
    })