- 首页 > it技术 > >
Javascript——AJAX
- 了解AJAX
- AJAX 是前端JS与服务端的交互手段，JS与服务端的交互依赖于客户端发送请求
- 通过JS向服务端发送请求，服务端返回的响应不会直接显示在页面上，返回的响应需要JS接收，
- AJAX ：A表示 async(异步) ；J表示 JavaScript ；A表示 and ；X表示 XML；是异步JavaScript和XML
- AJAX的使用语法
- 使用内置构造函数
XMLHttpRequest() 创建 AJAX 实例化对象
- 使用
AJAX实例化对象.open(请求方式, 请求服务器文件地址, 是否异步) 访问服务器
- 请求方式填写八种方式中的
- 请求地址填写请求的后端文件位置
- 是否异步默认为异步（true），可填写同步（false）
- 使用
AJAX实例化对象.send()前端向后端发送请求
- 【Javascript——AJAX】使用
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)
- 100 ~ 199 表示连接继续
101 状态码表示连接继续
- 200 ~ 299 表示各种意义上的成功
200 状态码表示通用成功
- 300 ~ 399 表示重定向
301 状态码表示永久重定向（本次请求永久访问这个地址，重新切换为新的地址）
302 状态码表示临时重定向（本次请求临时使用 服务器 来决定浏览器跳转页面）
- 400 ~ 499 表示客户端错误
403 状态码表示访问权限不够
404 状态码表示访问地址不存在
- 500 ~ 599 表示服务端错误
500 状态码表示通用服务端错误
501 状态码表示服务器维护或过载
AJAX状态码(readyState)
- 当
xhr.readyState === 0时，表示对象创建成功
- 当
xhr.readyState === 1时，表示配置请求信息完成
- 当
xhr.readyState === 2时，表示请求发送出去了，响应报文回到了浏览器
- 当
xhr.readyState === 3时，表示浏览器正在解析响应报文
- 当
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 查看后端返回的内容
- 前后端分离式开发
- 前端负责获取用户输入的内容，然后将内容发送给后端
- 后端负责接收前端信息，操作数据库进行比对数据，然后将结果返回给前端
- 前端接收返回结果，并将结果反馈给用户
- 前后端不分离式开发
前端大部分操作由后端直接控制
推荐阅读
