怎么去建一个网站,网站开发只要,网站制作职责,语音app开发公司Ajax Ajax概念Ajax优缺点HTTP协议请求报文响应报文 Ajax案例准备工作express基本使用创建一个服务器 发送AJAX请求GET请求POST请求JSON响应 Ajax请求出现的问题IE缓存问题Ajax请求超时与网络异常处理Ajax手动取消请求Ajax重复发送请求问题 Ajax概念
AJAX 全称为Asynchronous J… Ajax Ajax概念Ajax优缺点HTTP协议请求报文响应报文 Ajax案例准备工作express基本使用创建一个服务器 发送AJAX请求GET请求POST请求JSON响应 Ajax请求出现的问题IE缓存问题Ajax请求超时与网络异常处理Ajax手动取消请求Ajax重复发送请求问题 Ajax概念
AJAX 全称为Asynchronous Javascript And XML就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求最大的优势无刷新获取数据。AJAX 不是新的编程语言而是一种将现有的标准组合在一起使用的新方式。
XML可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似不同的是HTML中都是预定义标签而XML中没有预定义标签全部都是自定义标签用来表示一些数据。目前已经被JSON取代
Ajax优缺点
优点
可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。
缺点
没有浏览历史不能回退。存在跨域问题同源。SEO不友好查看源代码中无法查找到。
HTTP协议
HTTP全称为hypertext transport protocol 协议超文本传输协议协议详细规定了浏览器和万维网服务器之间互相通信的规则。
请求报文
请求行POST /URL HTTP协议版本 请求头
Host:值
Cookie: 值
Content-type:值
User-Agent:值等等 空行 请求体如果是GET请求体为空如果是POST可以不为空
响应报文
响应行HTTP协议版本 响应状态码 响应状态字符串 响应头
Content-type:值
Content-length:值
Content-encoding:值等等 空行 响应体HTML语法内容
Ajax案例准备工作
express基本使用
先下载node并配置node环境然后在vscode终端中输入npm i express即可若出现错误可以尝试用管理员运行vscode再试一次还是不行的话就找到node文件夹位置找到node_cache node_global node_modules分别把这三个文件–属性–安全–把权限改为完全控制。
此处可以安装到全局也就是node.js根目录里npm i express -g
创建一个服务器
在当前目录新建个js文件不一定非要在express安装的根目录里然后在终端 -- 当前目录下 -- 输入node 文件名就可以启动服务 可以使用nodemon实现保存自动重启 安装nodemonnpm install -g nodemon 使用在当前目录终端输入nodemon 文件名 这样就不用每次修改都要重启服务了 注意如果报错则输入npx nodemon 文件名再试一次
发送AJAX请求
GET请求
点击按钮div中呈现响应体点击按钮发送AJAX请求给服务器然后把响应体拿过来放到div中。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle#result {width: 200px;height: 100px;border: solid 1px pink;}/style/headbodybutton点击发送请求/buttondiv idresult/divscript//获取button元素const btn document.querySelector(button);const result document.querySelector(#result);btn.addEventListener(click, function () {//1.创建对象const xhr new XMLHttpRequest();//2.初始化设置请求的方法和urlxhr.open(GET, http://127.0.0.1:8000/server?a1b2c3);//3.发送xhr.send();//4.事件绑定处理服务端返回的结果//on 当……的时候//readyState是xhr对象中的属性,表示状态0 1 2 3 4//其中0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果//change 改变xhr.onreadystatechange function () {//判断服务端是否返回了所有结果if (xhr.readyState 4) {//判断响应状态码 200 404 403 401 500// 2xx ,2开头都表示成功if (xhr.status 200 xhr.status 300) {//如果响应成功处理结果 行 头 空行 体console.log(状态码:, xhr.status); //状态码console.log(状态字符串:, xhr.statusText); //状态字符串console.log(响应头:, xhr.getAllResponseHeaders()); //所有的响应头console.log(响应体:, xhr.response); //响应体//设置result文本result.innerHTML xhr.response;}}};});/script/body
/html设置url参数用隔开赋值分隔 例如http://127.0.0.1:8000/server?a1b2c3
服务端server.js文件
//1、引入express
const express require(express);//2、创建应用对象
const app express();//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get(/server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Controll-Allow-Origin,*);//设置响应response.send(HELLO AJAX);
});//4、监听端口启动服务
app.listen(8000,(){console.log(服务已经启动8000端口监听中);
})POST请求
鼠标经过div发送AJAX请求然后拿回来响应体放在div中。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle#result {width: 200px;height: 100px;border: solid 1px pink;}/style/headbodydiv idresult/divscriptconst result document.querySelector(#result);result.addEventListener(mouseover, function () {//1.创建对象const xhr new XMLHttpRequest();//2.初始化 设置类型与urlxhr.open(POST, http://127.0.0.1:8000/server);//设置请求头:固定写法,第一个参数设置请求体内容类型,第二个参数是参数查询字符串的类型xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);//3.发送请求在这里传参任意类型都可以xhr.send(a1b2c3);// xhr.send(a:1b:2c:3);// xhr.send(1232142412421312);//4.绑定事件xhr.onreadystatechange function () {//判断服务端是否返回所有结果if (xhr.readyState 4) {//判断响应是否成功if (xhr.status 200 xhr.status 300) {//处理服务端返回的结果result.innerHTML xhr.response;}}};});/script/body
/htmlserver.js
//1、引入express
const express require(express);//2、创建应用对象
const app express();//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
//GET请求
app.get(/server, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Controll-Allow-Origin, *);//设置响应response.send(HELLO AJAX);
});//POST请求
app.post(/server, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Controll-Allow-Origin, *);//设置响应response.send(HELLO AJAX POST);
});//4、监听端口启动服务
app.listen(8000, () {console.log(服务已经启动8000端口监听中);
});JSON响应
服务端响应体也可以设置为一个数据发送过去但是不能直接写要通过JSON.stringify(数据)把数据转换为JSON字符串
//可以接收任意类型的请求
app.all(/json-server, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);response.setHeader(Access-Control-Allow-Headers, *);//响应一个数据const data {name: haha,};//对对象进行字符串转换let str JSON.stringify(data);//设置响应体response.send(str);
});页面在拿到JSON字符串响应体的时候是无法识别的所以需要把JSON字符串转换为js对象有两种方式
手动转换JSON.parse(xhr.response)自动转换xhr.responseType json;
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle#result {width: 200px;height: 100px;border: solid 1px pink;}/style/headbodydiv idresult/divscriptconst result document.querySelector(#result);window.onkeydown () {const xhr new XMLHttpRequest();//设置响应体数据类型xhr.responseType json;xhr.open(GET, http://127.0.0.1:8000/json-server);xhr.send();xhr.onreadystatechange function () {if (xhr.readyState 4) {if (xhr.status 200 xhr.status 300) {//result.innerHTML xhr.response;//手动对数据进行转换//let data JSON.parse(xhr.response);//console.log(data);// result.innerHTML data.name;//自动转换console.log(xhr.response);result.innerHTML xhr.response.name;}}};};/script/body
/htmlAjax请求出现的问题
IE缓存问题
//针对IE缓存
app.get(/ie, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);//设置响应response.send(HELLO IEhhh);
});IE当你响应体改变时它不会更新而是缓存要解决这个问题就要让每次请求的url都不一样那么我们在后面传个参数值为时间戳因为时间戳是不可能重复的这样的话浏览器会认为url不一样就会重新发请求从而解决了问题就可以解决改变响应体时IE走缓存不更新的问题。
xhr.open(GET, http://127.0.0.1:8000/ie?t Date.now());Ajax请求超时与网络异常处理
我们不能保证服务端可以及时快速的响应此时我们可以给Ajax做一个超时的设置然后给用户返回一个提醒网络异常时也可返回一个提醒提高用户体验感。
服务端写个定时器2秒后发送响应体过去
//延时响应
app.get(/delay, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);//设置响应//服务端写个定时器2秒后发送响应体过去setTimeout(() {response.send(HELLO 延时响应);}, 2000);
});然后点击按钮发送请求时可以设置超时xhr.timeout和超时回调xhr.ontimeout还有网络异常回调xhr.onerror
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleIE缓存问题/titlestyle#result {width: 200px;height: 100px;border: solid 1px pink;}/style/headbodybutton点击发送请求/buttondiv idresult/divscriptconst btn document.querySelector(button);const result document.querySelector(#result);btn.addEventListener(click, () {const xhr new XMLHttpRequest();//超时设置 2sxhr.timeout 2000;//超时回调xhr.ontimeout function () {alert(网络异常请稍后重试);};//网络异常回调xhr.onerror function () {alert(你的网络似乎出了一些问题请检查后重试);};xhr.open(GET, http://127.0.0.1:8000/delay);xhr.send();xhr.onreadystatechange function () {if (xhr.readyState 4) {if (xhr.status 200 xhr.status 300) {result.innerHTML xhr.response;}}};});/script/body
/htmlAjax手动取消请求
在发送请求后还没得到响应时可以手动取消请求被取消时可返回一个提醒。
设置一个定时器发送响应体
app.get(/cancel, (request, response) {//设置响应头response.setHeader(Access-Control-Allow-Origin, *);//设置响应体setTimeout(() {response.send(HELLO 请求已经被取消);}, 2000);
})取消请求用xhr.abort()方法abort中止。 这里有个作用域的问题解决方法是把xhr定义在外面给个null然后赋值xhr实例再调用方法。重复赋值不能const
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title手动取消请求/title/headbodybutton点击发送请求/buttonbutton点击取消请求/buttondiv idresult/divscriptconst send document.querySelectorAll(button)[0];const cancel document.querySelectorAll(button)[1];let xhr null;//发送请求send.onclick function () {xhr new XMLHttpRequest();xhr.open(GET, http://127.0.0.1:8000/cancel);xhr.send();};//取消请求abort方法cancel.addEventListener(click, function () {xhr.abort(); //先点send再点cancel不会报错先点cancel报错});/script/body
/htmlAjax重复发送请求问题
当用户狂点一个按钮时浏览器会重复发送相同的请求导致服务器压力过大。解决方法当用户发请求时先检查之前有没有相同的请求如果已有就把之前的请求取消掉只响应最后一个请求这里有防抖的思想复习防抖节流点击此处
scriptconst btn document.querySelector(button);let xhr null;//标识变量 是否正在发送请求let isSending false;//发送请求btn.onclick function () {//判断标识变量if (isSending) x.abort();xhr new XMLHttpRequest();//修改标识变量的值isSending true;xhr.open(GET, http://127.0.0.1:8000/delay);xhr.send();xhr.onreadystatechange function () {if (xhr.readyState 4) {isSending false;}};};
/script
