企业网站如何建立,wordpress广告链接不跳转,wordpress不同页面显示不同文章,汽车最全的网站一、什么是AJAX 1.AJAX 就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求#xff0c;最大的优势#xff1a;无刷新获取数据。AJAX 不是新的编程语言#xff0c;而是一种将现有的标准组合在一起使用的新方式。 2.XML 可扩展标记语言。XML被设计用来传输和… 一、什么是AJAX 1.AJAX 就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求最大的优势无刷新获取数据。AJAX 不是新的编程语言而是一种将现有的标准组合在一起使用的新方式。 2.XML 可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似不同的是HTML是用来呈现数据的而且HTML中都是预定义标签已经定义好的而XML中没有预定义标签全部都是自定义标签用来表示一些数据。目前已经被JSON取代 3.AJAX的优缺点 优点 1可以无需刷新页面而与服务器端进行通信。 2允许你根据用户事件鼠标、键盘事件等等来更新部分页面内容。缺点 1没有浏览历史不能回退。 2存在跨域问题不同网站中请求不到 3SEO不友好查看源代码中无法查找到 二、HTTP协议 HTTP全称为hypertext transport protocol 协议【超文本传输协议】协议详细规定了浏览器和万维网服务器之间互相通信的规则。 1.请求报文 2.响应报文 发过来的响应体里面有html然后接收方再去解析然后显示在页面上 三、AJAX案例准备工作 1.配置环境 终端中输入npm i express 2.创建一个服务端 sudo node express.js //引入express const express require(express);//创建应用对象 const app express();//创建路由规则 //request是请求报文的封装 //response是响应报文的封装 app.get(/, (request, response) {response.send(hello express) });app.listen(8080, () {console.log(服务已经启动8080端口监听中) })网页输入链接http://127.0.0.1:8080/ 网页中出现 hello express 四、发送AJAX请求 1.发送GET请求 我们现在想要实现点击按钮发送请求将数据显示到div盒子中 客户端发送请求时如果url是server就会执行回调函数箭头函数并且由response来作出响应 button点击发送请求/buttondiv idresult/div scriptconst btndocument.querySelector(button)const resultdocument.querySelector(#result)btn.onclickfunction(){//创建对象const xhrnew XMLHttpRequest();//初始化设置请求方法和url;//第一个参数什么类型的请求第二个参数给谁发xhr.open(GET,http://127.0.0.1:8080/server)//发送xhr.send();//事件绑定处理服务端返回的结果//on在什么什么的时候readystate是xhr对象的属性它的值有//0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果//改变的时候触发所以会触发四次xhr.onreadystatechangefunction(){//判断服务器返回全部数据if(xhr.readyState4){//判断响应状态码 200 404 403 401 500//响应状态中2开头都是表示成功if(xhr.status200xhr.status300){//处理结果 行 头 空行 体//响应行console.log(xhr.status)//状态码console.log(xhr.statusText)//状态字符串console.log(xhr.getAllResponseHeaders())//所有响应头console.log(xhr.response)//响应体//设置result文本result.innerHTMLxhr.response}}}}/script 服务端只修改了/server //引入express const express require(express);//创建应用对象 const app express();//创建路由规则 //request是请求报文的封装 //response是响应报文的封装 app.get(/server, (request, response) {//设置响应头名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader(Access-Control-Allow-Origin,*)response.send(hello AJAX) });app.listen(8080, () {console.log(服务已经启动8080端口监听中) })设置url参数用隔开赋值分隔 例如http://127.0.0.1:8000/server?a1b2c3 2.发送POST请求 鼠标经过div发送AJAX请求然后拿回来响应体放在div中 post和get区别就是get从服务器获取数据post向服务器传送数据 post可以设置参数在xhr.send();中 设置请求头信息用来校验用户身份 bodydiv idresult/divscriptconst resultdocument.querySelector(#result)//绑定事件result.addEventListener(mouseover,function(){const xhrnew XMLHttpRequest();xhr.open(POST,http://127.0.0.1:8080/server)// 设置请求头,接收两个参数头的名字和头的值xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded)//上面这句用来设置请求体内容的类型后面参数是固定写法xhr.send(a100b200c300);xhr.onreadystatechangefunction(){//判断服务器返回全部数据if(xhr.readyState4){if(xhr.status200xhr.status300){console.log(xhr.status)//状态码console.log(xhr.statusText)//状态字符串console.log(xhr.getAllResponseHeaders())//所有响应头console.log(xhr.response)//响应体//设置result文本result.innerHTMLxhr.response}}}})/script /body app.post(/server, (request, response) {//设置响应头名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader(Access-Control-Allow-Origin,*)response.send(hello AJAX post) }); 鼠标经过就显示数据 3.JSON响应 响应一个数据通过stringify(data)转化为JSON字符串发送过去 app.all(/json-server, (request, response) {//设置响应头名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader(Access-Control-Allow-Origin,*)//响应头response.setHeader(Access-Control-Allow-Headers,*)const data{name:atguigu}//对对象进行字符串转换let str JSON.stringify(data)response.send(str) }); 页面拿到JSON字符串响应体的时候识别不了需要转换为js对象 1手动把JSON字符串转换为js对象 JSON.parse(xhr.response) if(xhr.status200xhr.status300){//对数据的手动转换let dataJSON.parse(xhr.response)console.log(data)result.innerHTMLdata.name 2自动把JSON字符串转换为js对象 xhr.responseType json; //设置响应体数据的类型xhr.responseTypejson 、、、 if(xhr.status200xhr.status300){//自动转换console.log(xhr.response)result.innerHTMLxhr.response.name} 五、AJAX请求的几个问题 以前在server写代码就得重新启动终端安装 npm install -g nodemon就可以自动刷新了 1.IE缓存问题 ie浏览器会对ajax请求的结果做缓存所以下一次请求时它走的是本地的缓存而不是服务器返回的最新数据 xhr.open(GET,http://127.0.0.1:8000/ie?tDate.now()) 在请求的url这里加上时间戳这样ie就认为你每次请求的都不一样就去给你拿最新的 2.AJAX请求超时与网络异常处理 在请求超时和网络异常的时候给用户来一个友好的提醒服务端写个定时器3秒后发送响应体 app.get(/delay, (request, response) {//设置响应头名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader(Access-Control-Allow-Origin,*)setTimeout((){response.send(hello ie-2)},3000)}); //2s还没收到响应体就取消请求xhr.timeout2000//超时回调xhr.ontimeoutfunction(){alert(网络异常)}//网络异常回调xhr.onerrorfunction(){alert(你的网络似乎出了点问题)} 设置超时xhr.timeout 超时回调xhr.ontimeout还有网络异常回调xhr.onerror 3.AJAX手动取消请求 在请求的结果还没回来之前手动取消 abort方法 scriptconst btnsdocument.querySelectorAll(button);let xnull;btns[0].onclickfunction(){xnew XMLHttpRequest();x.open(GET,http://127.0.0.1:8000/delay)x.send()//这里的x是这个函数的局部变量我还想在下面用就得去声明}btns[1].onclickfunction(){x.abort();}/script 本来x在第一个函数用const声明但是下面还想用就不能再用const了全局一个let x 4.AJAX请求重复发送问题 如果用户一直点击一个按钮就是在重复请求那么我们就把前面重复请求的停掉 定义一个isSending变量来判断是否在发送状态 button点击发送/buttonscriptconst btndocument.querySelector(button);let xnull;let isSendingfalse//是否正在发送AJAX请求btn.onclickfunction(){if(isSending) x.abort();//如果正在发送就取消这个请求创建一个新的xnew XMLHttpRequest();isSendingtrue;x.open(GET,http://127.0.0.1:8000/delay)x.send()x.onreadystatechangefunction(){if(x.readyState4){isSendingfalse;}}//这里的x是这个函数的局部变量我还想在下面用就得去声明}/script