Ajax课堂笔记

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)
            }
          }
        })
      }
    })

66- 今日任务

• 【1】使用get方式4步 — 原生js方式

• 【2】使用post方式5步 — 原生js方式

• 【3】使用 $.ajax() 方式， 实现综合实例。

• 【4】 把数组的20个方法，都使用一次，写上自己的理解。

• 扩展题目【选做】

  • 自己实现jquery发送ajax的三种方式【使用起来要一模一样】
    • 万能方式
    • get方式
    • post方式