Javascript——AJAX

  • 了解AJAX

    • AJAX 是前端JS与服务端的交互手段,JS与服务端的交互依赖于客户端发送请求
    • 通过JS向服务端发送请求,服务端返回的响应不会直接显示在页面上,返回的响应需要JS接收,
    • AJAX :A表示 async(异步) ;J表示 JavaScript ;A表示 and ;X表示 XML;是异步JavaScript和XML
  • AJAX的使用语法

    • 使用内置构造函数 XMLHttpRequest() 创建 AJAX 实例化对象
    • 使用 AJAX实例化对象.open(请求方式, 请求服务器文件地址, 是否异步) 访问服务器

      1. 请求方式填写八种方式中的
      2. 请求地址填写请求的后端文件位置
      3. 是否异步默认为异步(true),可填写同步(false)
    • 使用AJAX实例化对象.send()前端向后端发送请求
    • 使用AJAX实例化对象.onload=function(){}绑定事件,使用事件处理函数使用返回的响应体

      • 事件在相应成功后触发,xhr 中responseText属性的属性值就是响应体
    // 异步请求
    //创建 AJAX 实例化对象
    const xhr = new XMLHttpRequest()
    
    // 配置本次请求信息(参数三选填,默认为 true)
    xhr.open('GET', './get.php',true)
    
    // 发送请求给后端
    xhr.send()
    
    // 接收后端返回结果(存在同步异步问题,需要在发送请求前绑定事件)
    xhr.onload=function(){
        var res = JSON.parse(xhr.responseText) 
    }
    
    
    // 同步请求
    //创建 ajax 实例化对象
    const xhr = new XMLHttpRequest()
    // 配置本次请求信息(参数三选填,默认为 true)
    xhr.open('GET', './get.php',false)
    // 接收后端返回结果(存在同步异步问题,需要在发送请求前绑定事件)
    xhr.onload=function(){
        var res = JSON.parse(xhr.responseText)
    }
    // 发送请求给后端
    xhr.send()
    • AJAX 的异步问题
      异步请求:先创建对象,然后配置信息,发送请求后需要等待响应返回,同时绑定事件,当返回响应后,触发事件
      同步请求:先创建对象,然后配置信息,发送请求后需要等待响应国过程结束后执行后续代码,当返回响应体后还未绑定事件,然后绑定事件,事件不在触发
      同步请求时,需要先绑定事件,在发送请求
  • AJAX实例化对象创建的兼容问题处理

    • AJAX 不会主动进行兼容,处理兼容时主要处理 AJAX 对象创建 和 接收响应
    • 标准浏览器语法:const xhr = new XMLHttpRequesst()
    • IE7、8、9浏览器语法:const xhr = new ActiveXObject('Msxml.XMLHTTP')
    • IE6浏览器语法:const xhr = new ActiveXObject('Msxml2.XMLHTTP')
    • IE5.5+浏览器语法:const xhr = new ActiveXObject('Microsoft.XMLHTTP')
    • IE 5.5+ 以下不支持 ajax ,ajax 的兼容是基于内核进行兼容的,不能使用最新版IE切换版本进行测试
    var xmlHttp = false;
    try {
      // 标准浏览器
      xmlHttp = new XMLHttpRequest();
    } catch (trymicrosoft) {
      try {
          // IE7 8 9兼容
          xmlHttp = new ActiveXObject("Msxml.XMLHTTP");
      } catch (err) {
          try {
              // IE6兼容
              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (othermicrosoft) {
              try {
                  // IE5.5+兼容
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (failed) {
                  // 其他版本IE浏览器
                  xmlHttp = false;
              }
          }
      }
    }
    if (!xmlHttp) {
      alert("无法创建 XMLHttpRequest 对象!");
    }
  • 接收响应体兼容问题处理

    IE低版本没有 onload 事件,只能使用 onreadystatechange 事件进行接收响应
    在事件中需要判断 xhr.status在 200~299之间并且xhr.readyState === 4时,正常接收响应体

    xhr.onreadystatechange = function(){
        if(xhr.state >= 200 && xhr.state < 300 && xhr.readyState === 4){
            var res = JSON.parse(xhr.responseText)
        }
    }

    响应状态码(status)

    1. 100 ~ 199 表示连接继续
      101 状态码表示连接继续
    2. 200 ~ 299 表示各种意义上的成功
      200 状态码表示通用成功
    3. 300 ~ 399 表示重定向
      301 状态码表示永久重定向(本次请求永久访问这个地址,重新切换为新的地址)
      302 状态码表示临时重定向(本次请求临时使用 服务器 来决定浏览器跳转页面)
    4. 400 ~ 499 表示客户端错误
      403 状态码表示访问权限不够
      404 状态码表示访问地址不存在
    5. 500 ~ 599 表示服务端错误
      500 状态码表示通用服务端错误
      501 状态码表示服务器维护或过载

    AJAX状态码(readyState)

    1. xhr.readyState === 0时,表示对象创建成功
    2. xhr.readyState === 1时,表示配置请求信息完成
    3. xhr.readyState === 2时,表示请求发送出去了,响应报文回到了浏览器
    4. xhr.readyState === 3时,表示浏览器正在解析响应报文
    5. xhr.readyState === 4时,表示浏览器解析响应报文成功,可以正常使用 xhr.responseText
  • 向后端发送带有参数的数据请求

    在GET请求中,是在地址栏后面拼接 queryString 方式携带参数,所以使用 AJAX 携带参数至服务器端时,在 open方法的第二个参数地址后面直接添加内容即可

    xhr.open('GET', './login.php?a=100&b=200')

    在POST请求中,携带的参数在请求体内,需要在地址栏中拼接,携带的参数数据格式需要与 content-type相匹配
    需要携带参数时,将参数写在send('携带的参数'),并且需要设置 content-typeapplication/x-www-form-urllencoded

    // 匹配格式
    xhr.setRequestHeader('content-type','application/x-www-form-urllencoded')
    xhr.send('a=100&b=200')
  • 前后端交互式报错常见原因分析

    • 大部分是JSON解析的问题
    • 分析原因:JSON.parse(xxx) 出错,表示后端给的数据不是JSON格式的数据
    • 解决问题:把 JSON.parse() 去掉,直接打印 xhr.responseText ;打开浏览器的 Network 中对应的请求文件 中的 response 查看后端返回的内容
  • 前后端分离式开发

    • 前端负责获取用户输入的内容,然后将内容发送给后端
    • 后端负责接收前端信息,操作数据库进行比对数据,然后将结果返回给前端
    • 前端接收返回结果,并将结果反馈给用户
  • 前后端不分离式开发

    前端大部分操作由后端直接控制

19 声望
2 粉丝
0 条评论
19 声望
2 粉丝
宣传栏