关于前端学习:JavascriptAJAX

理解 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-type 为 application/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 查看后端返回的内容

前后端分离式开发

• 前端负责获取用户输出的内容，而后将内容发送给后端
• 后端负责接管前端信息，操作数据库进行比对数据，而后将后果返回给前端
• 前端接管返回后果，并将后果反馈给用户

前后端不分离式开发

前端大部分操作由后端间接管制