目录
前后端数据交互——ajax
1. 介绍
2.原生ajax用法
3.jquery的ajax
4.ajax原理说明
前后端数据交互——ajax
1. 介绍
1.1 定义
-
Ajax(Asynchronous Javascript And XML) 是一种在无需重新加载整个网页的情况下，能够更新部分 网页的技术。
-
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。 这意味着可以在不重新加载整个网
1.2 传统请求的问题
-
浏览器地址栏发送请求，是同步的（阻塞代码运行），当服务器很忙碌的时候会卡顿（等待），就造成 了资源浪费
1.3 Ajax请求与传统请求的区别：
-
ajax数据交互的优点是 在请求数据的时候 不会阻塞后续js代码的执行
-
带有ajax代码的js代码的执行顺序
-
1.从上到下执行
-
2.遇到ajax代码后 先发送请求
-
3.在等待服务器响应数据的时间段内 继续向下执行其他js代码
-
4.等到服务器数据响应回来 再执行渲染数据的代码
-
1.4 应用场景：
-
但凡遇到动态渲染的效果 我们都应该使用ajax
2.原生ajax用法
2.1ajax的基础语法
-
本质上ajax其实是es5中提供的一个构造函数——XMLHttpRequest
-
ajax实现前后端数据交互的步骤如下
-
//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来 let ajax = new XMLHttpRequest(); //2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接 ajax.open("请求方式"，"服务器url地址"); //3.发送请求 ajax对象有一个方法 send 调用即可发送请求 ajax.send(); //4.接收服务器响应数据 ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件) ajax.onreadystatechange = ()=>{ //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了 if(ajax.readyState==4){ if(ajax.status==200||ajax.status==304){ console.log(ajax.responseText) } else{ console.log("请求失败") } } } -
ajax 的 通信状态码/生命周期
-
ajax的通信状态码/生命周期有五个 代表的含义 各不相同
-
分别是
-
0：请求未初始化（ajax对象还没有声明出来）
-
1：已建立连接（ajax对象调用了open）
-
2：已发送请求（ajax对象调用了send）
-
3：服务器接收到请求并正在处理
-
4：服务器已响应数据
-
-
随着ajax数据交互的一步步推荐 通信状态码/生命周期 会自动发生变化
-
每当通信状态码/生命周期 发生变化 就会触发一次onreadystatechange事件
-
-
在ajax中 我们可以通过ajax对象的一个属性 readyState 来获取通信状态码/生命周期
-
ajax对象.readyState
-
-
我们也可以通过ajax对象的一个属性 responseText 来获取响应数据
-
ajax对象.responseText
-
-
我们还可以通过ajax对象的一个属性 status 来获取响应状态码
-
ajax对象.status
-
2.2ajax提交数据
-
在不同的请求方式下 请求提交数据的写法 也不同 我们主要了解一下 get 和 post两种请求方式的提交数据的写法
get
-
get请求提交数据 是在地址后面 添加 "?键名=键值&键名=键值&..."
-
//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来 let ajax = new XMLHttpRequest(); //2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接 //get请求提交数据 提交在地址后面 ajax.open("get"，"服务器url地址?键名=键值&键名=键值&..."); //3.发送请求 ajax对象有一个方法 send 调用即可发送请求 ajax.send(); //4.接收服务器响应数据 ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件) ajax.onreadystatechange = ()=>{ //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了 if(ajax.readyState==4){ if(ajax.status==200||ajax.status==304){ console.log(ajax.responseText) } else{ console.log("请求失败") } } }
post
-
post请求提交数据 是写在 send方法中 将要提交的数据作为send方法的实参 传入
-
post请求在提交之前 需要单独设置请求头 使用ajax对象的setRequestHeader方法 就可以设置请求头了
-
//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来 let ajax = new XMLHttpRequest(); //2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接 //get请求提交数据 提交在地址后面 ajax.open("post"，"服务器url地址?键名=键值&键名=键值&..."); //设置请求头 ajax.setRequestHeader("content-type"，"application/x-www-form-urlencoded"/"application/json") //3.发送请求 ajax对象有一个方法 send 调用即可发送请求 //将要提交的数据 作为实参 传入send方法中 ajax.send("键名=键值&键名=键值&..."/JSON.stringify({})); //注意：如果设置为 application/json 提交的数据 必须是一个对象格式的json字符串 //4.接收服务器响应数据 ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件) ajax.onreadystatechange = ()=>{ //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了 if(ajax.readyState==4){ if(ajax.status==200||ajax.status==304){ console.log(ajax.responseText) } else{ console.log("请求失败") } } } -
在不提交数据的时候的 post请求 即使不设置请求头 也不会出问题 但是我们一般为了语义和提高容错率，都会选择设置请求头。
3.jquery的ajax
3.1基本用法
-
jquery的ajax 是 $的一个方法——ajax 调用这个方法 并传参 即可实现ajax数据交互
-
$(()=>{ //调用ajax方法 实现数据交互 $.ajax({ url:"服务器url地址"，//必传项 type:"请求方式",//可选项 默认值为get dataType:"数据交互的格式"//可选项 默认值为json 另外还可以选择 xml text jsonp data:{},//请求提交的数据 可选项 默认不提交数据 如果想提交 在对象中 写入属性即可提交 timeout:数字，//超时时间 可选项 默认为无限 如果设置了具体的超时时间 则会在请求发送后 超过超时 时间还没接收到响应数据的时候 停止请求 并报错404 单位为ms beforeSend(){ //这个方法函数 会在ajax发送请求前 执行 }， success(res){ //这个方法函数 会在ajax发送请求 并成功接收到响应数据的时候 执行 形参会接收到响应数据 }， error(err){ //这个方法函数 会在ajax接收响应数据失败的时候执行 形参会接收到 失败信息 }， complete(){ //这个方法函数 会在ajax交互完成的时候 执行 } }) }) -
注意：在实参对象中 四个方法 理论上都可以不传 但是success在实际开发中必传 因为success是用来接收响应数据的
3.2jquery的ajax交互简化方法
-
get
-
用法：$.get("url地址?键值对&键值对...",(res)=>{ res形参用来接收响应数据 })
-
-
post
-
用法：$.post(url地址,{要提交的数据},(res)=>{ res形参用来接收响应数据 })
-
4.ajax原理说明
-
ajax的数据交互方式 对比 传统的输入地址的交互方法 最大的优点是
-
是不阻塞后续代码
-
在等待响应数据的时间段内 会继续向下执行后续js代码
-
-
这个优点的原理 来源于 js的同步异步代码的区分和执行顺序
-
js同步异步代码的执行顺序
-
js代码从上到下执行
-
如果遇到同步代码 就直接执行
-
如果遇到异步代码 会先存入 任务队列 之后继续向下执行
-
直到所有同步代码 都执行完了 再去任务队列中 将异步代码 按照顺序 依次取出并执行
-
js中同步代码和异步代码的分类
-
异步代码：事件、定时器、ajax
-
同步代码：除了异步之外 都是同步
-
-
ajax代码 为什么能不阻塞后续js代码的执行
-
//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来 let ajax = new XMLHttpRequest();//同步代码 //2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接 ajax.open("请求方式"，"服务器url地址");//同步代码 //3.发送请求 ajax对象有一个方法 send 调用即可发送请求 ajax.send();//同步代码 //4.接收服务器响应数据 ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件) ajax.onreadystatechange = ()=>{//ajax的异步 体现在事件上 事件是异步代码 //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了 if(ajax.readyState==4){ if(ajax.status==200||ajax.status==304){ console.log(ajax.responseText) } else{ console.log("请求失败") } } }
-
