AJAX——AJAX的异步与同步、AJAX代码封装

活动地址：CSDN21天学习挑战赛

AJAX的异步与同步

• 什么是异步？什么是同步？

  • ajax请求1和ajax请求2，同时并发，谁也不用等谁，这就是异步。（a不等b，b也不等a）
  • 如果ajax请求1在发送的时候需要等待ajax请求2结束之后才能发送，那么这就是同步。（a等待b，或者b等待a，只要发生等待，就是同步。）

• 异步和同步在代码上如何实现？

  // 假设这个是ajax请求1
  // 如果第三个参数是false：这个就表示“ajax请求1”不支持异步，也就是说ajax请求1发送之后，会影响其他ajax请求的发送，只有当我这个请求结束之后，你们其他的ajax请求才能发送。
  // false表示，不支持异步。我这个请求发了之后，你们其他的请求都要靠边站。都等着。你们别动呢，等我结束了你们再说。
  xhr1.open("请求方式", "URL", false)
  xhr1.send()
  
  // 假设这个是ajax请求2
  // 如果第三个参数是true：这个就表示“ajax请求2”支持异步请求，也就是说ajax请求2发送之后，不影响其他ajax请求的发送。
  xhr2.open("请求方式", "URL", true) 
  xhr2.send()
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 什么情况下用同步？（大部分情况下我们都是使用ajax异步方式，同步很少用。）

  • 举一个例子
    • 用户注册
      • 用户名需要发送ajax请求进行校验
      • 邮箱地址也需要发送ajax请求校验
      • 其他的也可能需要发送ajax请求。。。
      • 并且最终注册按钮的时候，也是发送ajax请求进行注册。
      • 那么显然，注册的Ajax请求和校验的ajax请求不能异步，必须等待所有的校验ajax请求结束之后，注册的ajax请求才能发。

AJAX代码封装

• AJAX请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送ajax请求的话，就直接调用这个工具类中的相关函数即可。

• 接下来，手动封装一个工具类，这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字，叫做jQuery。（我这里封装的jQuery只是一个前端的库，和后端的java没有关系，只是为了方便web前端代码的编写，提高WEB前端的开发效率）

• 手动开发jQuery，源代码

  function jQuery(selector){
      if (typeof selector == "string") {
          if (selector.charAt(0) == "#") {
              domObj = document.getElementById(selector.substring(1))
              return new jQuery()
          }
      }
      if (typeof selector == "function") {
          window.onload = selector
      }
      this.html = function(htmlStr){
          domObj.innerHTML = htmlStr
      }
      this.click = function(fun){
          domObj.onclick = fun
      }
      this.focus = function (fun){
          domObj.onfocus = fun
      }
      this.blur = function(fun) {
          domObj.onblur = fun
      }
      this.change = function (fun){
          domObj.onchange = fun
      }
      this.val = function(v){
          if (v == undefined) {
              return domObj.value
          }else{
              domObj.value = v
          }
      }
  
      // 静态的方法，发送ajax请求
      /**
       * 分析：使用ajax函数发送ajax请求的时候，需要程序员给我们传过来什么？
       *      请求的方式(type)：GET/POST
       *      请求的URL(url)：url
       *      请求时提交的数据(data)：data
       *      请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
       */
      jQuery.ajax = function(jsonArgs){
          // 1.
          var xhr = new XMLHttpRequest();
          // 2.
          xhr.onreadystatechange = function(){
              if (this.readyState == 4) {
                  if (this.status == 200) {
                      // 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
                      var jsonObj = JSON.parse(this.responseText)
                      // 调用函数
                      jsonArgs.success(jsonObj)
                  }
              }
          }
  
          if (jsonArgs.type.toUpperCase() == "POST") {
              // 3.
              xhr.open("POST", jsonArgs.url, jsonArgs.async)
              // 4.
              xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
              xhr.send(jsonArgs.data)
          }
  
          if (jsonArgs.type.toUpperCase() == "GET") {
              xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async)
              xhr.send()
          }
  
      }
  }
  $ = jQuery
  
  // 这里有个细节，执行这个目的是为了让静态方法ajax生效。
  new jQuery()
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77

• 使用以上库，怎么用？

  <script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js">script>
  <script type="text/javascript">
      $(function(){
          $("#btn1").click(function(){
              $.ajax({
                  type : "POST",
                  url : "/ajax/ajaxrequest11",
                  data : "username=" + $("#username").val(),
                  async : true,
                  success : function(json){
                      $("#div1").html(json.uname)
                  }
              })
          })
      })
  script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16