漯河北京网站建设,关键词推广分析,网站建设的管理,免费下载大都会目录前言一#xff0c;Ajax概述二#xff0c;基础知识之Http协议2.1 请求报文2.2 响应报文2.3 如何查看通信报文三#xff0c;Ajax简单案例3.1 Express框架创建服务端3.2 Ajax案例后台准备3.3 Ajax案例前台准备3.4 发送get请求3.5 发送带有参数的Ajax请求3.6 发送post请求3.…
目录前言一Ajax概述二基础知识之Http协议2.1 请求报文2.2 响应报文2.3 如何查看通信报文三Ajax简单案例3.1 Express框架创建服务端3.2 Ajax案例后台准备3.3 Ajax案例前台准备3.4 发送get请求3.5 发送带有参数的Ajax请求3.6 发送post请求3.7 POST设置请求体四其他问题4.1 ajax服务端响应json数据4.2 IE浏览器缓存问题4.3 Ajax请求超时与异常处理4.4 ajax取消请求4.5 ajax请求重复发送问题后记前言
学习前端我们可以还原最基本的结构和样式。但是离真实的应用还差了很多打开大公司的网站或软件用户可以在页面上看到实施的数据能对一些数据进行简单的操作。而我们之所以要学习前后端交互就是为了从服务器获取相关的数据并把它们放在自己的页面上。
在Vue中会用到axios是对Ajax的封装。本片文章其实是在为Axios作铺垫所以是系列文章之一。适合有基础的读者阅读。最好懂得Ajax的基本原理用法与nodejs的相关知识。
一Ajax概述
Ajax是前后端交互的一种工具
优点 可以无需刷新页面与服务器端进行通讯 允许根据用户事件来跟新部分页面内容。
缺点 没有浏览历史不能回退 存在跨域问题 SEO不友好。搜索引擎优化
二基础知识之Http协议
Http协议详细规定了浏览器和万维网服务器之间相互通信的规则。
Http协议是一种约定约束了请求与响应。发送的内容叫做请求报文响应的结果叫做响应报文。
2.1 请求报文
完整http请求报文 行请求类型/url路径/http版本最多的是1.1 头HostCookieContent-typeUser-Agent都是键值对 空行 请求体可有可无get请求体是空的post可有可无。
2.2 响应报文
行HTTP/版本 状态码 响应状态字符串 头Content-TypeContent-lengthContent-encoding等都是键值对 空行 体html结构
2.3 如何查看通信报文
F12刷新network网络 随机点开一个都是网络请求可以随意查看学习。
三Ajax简单案例
3.1 Express框架创建服务端
Express是基于Node.js平台的一个框架由于学习过程中我们需要一个服务端所以可以低成本学习一下。
详学Nodejs的时候也会接触到。
详细请参考数据。现在我以自己的电脑作为服务器创建一个服务端下面是代码部分复制粘贴后可以使用node运行
//1.引入express
const express require(express);
//2.创建应用对象
const app express()
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get(/, (request, response) {//设置响应response.send(Hello Express);
})app.listen(8000, () {console.log(服务器已启用8000端口监听中...)
})创建完毕后 可以在127.0.0.1:8080中看到内容及相关网络请求
3.2 Ajax案例后台准备
首先准备一个后台
//1.引入express
const express require(express);
//2.创建应用对象
const app express()
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get(/server, (request, response) {//设置响应头response.setHeader(Access-Control-Allow-Origin, *)//设置响应体response.send(Hello Ajax);
})app.listen(8000, () {console.log(服务器已启用8000端口监听中...)
})这里我来解释下我们在发送请求的时候通常看接口文档后面都会告诉你接口地址我们发送请求的url通常是baseURLurl而url就是这里的url。
当我们修改后台代码后需要重启一下后台。
现在访问127.0.0.1:8000/server就可以看到相关信息。包括响应体与响应头的设置都是正常显示的
3.3 Ajax案例前台准备
很简单的一个样式 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;border: 1px solid rebeccapurple;}/style
/head
bodybutton发送get请求/buttondiv/div
/body
/html3.4 发送get请求
本节的目的是用ajax发送请求。先从get请求开始。
运行刚刚写好的后台并在前台为按钮绑定点击事件当点击按钮后发送get请求。
请认真阅读下面代码及代码中的数据。
scriptconst btn document.querySelector(button)btn.addEventListener(click,function() {//创建对象const xhr new XMLHttpRequest();//初始化设置请求方法和urlxhr.open(GET, http://127.0.0.1:8000/server),//发送xhr.send();//吹服务端返回结果//readstate是状态 0初始1open调用完毕2send调用完毕3服务端返回部分结果4服务端返回所有结果//这里的意思是当readstate发生改变的时候触发xhr.onreadystatechange function() {//判断状态是否是4表明服务端返回所有结果if(xhr.readyState 4) {//状态2开头都是成功if(xhr.status 200 xhr.status 300) {//处理结果 行头空行体//1.响应行console.log(xhr.status)console.log(xhr.statusText)//响应状态码console.log(xhr.getAllResponseHeaders());//所在响应头console.log(xhr.response)//响应体}}}} )
/script
/html运行后即可获得结果 能打印出来则代表运行成功成功后我们可以把返回的响应体放到div中注意在做这件事情之前需要把div给绑定了这里我给div取名为box。 最后即可在框中看到响应体
3.5 发送带有参数的Ajax请求
平时我们在使用过程中都是在地址栏中传参在ajax中该如何传参
在url中用问号衔接用符号分割 我们可以直观的看到请求
3.6 发送post请求
发送post请求的步骤和发送get请求的步骤十分类似。
但是后台代码需要加上跟post相关的接口如下
//post请求的响应接口
app.post(/server, (request, response) {//设置响应头response.setHeader(Access-Control-Allow-Origin, *)//设置响应体response.send(Hello Ajax);
})前台的需求是有一个盒子鼠标碰到之后盒子上显示出post请求后的响应。post请求的发送方式与get非常类似唯一不同的地方就是get需要换成post代码如下
bodydiv classbox当鼠标放到div盒子上的时候发送post请求最后出来的结果是/divscript//获取元素对象const box document.querySelector(.box)box.addEventListener(mousemove, () {//第一步创建对象const xhr new XMLHttpRequest();//初始化设置请求类型与urlxhr.open(POST, http://127.0.0.1:8000/server);//发送xhr.send();//事件绑定xhr.onreadystatechange function() {if(xhr.readyState 4) {if(xhr.status 200 xhr.status 300) {//处理服务端返回结果box.innerHTML xhr.response;}}}})/script效果如下
3.7 POST设置请求体
什么是请求体也就是post请求需要传递的参数。
post一般代表提交。一般在表单中post可以把表单的内容发送给服务器并且服务器会做出响应。
post请求一般在send中发送 格式如上即可。
四其他问题
4.1 ajax服务端响应json数据
在实际应用中我们向服务端发起请求服务端响应结果绝大多数都返回一个json格式的数据。我们应当如何处理
刚刚我们已经学习了get和post并且会通过response.send方法返回信息。刚刚返回的都是一句话 现在我想返回一个对象 返回对象不能直接放到send中因为send只能接收字符串类型所以要对data进行一个数据转化使用JSON.stringify(data)这样的话data中的数据就会转化成字符串形式就可以正常使用send了。操作如下
//给json-server发送请求
app.get(/json-server, (request, response) {response.setHeader(Access-Control-Allow-Origin, *)//响应一个数据const data {name: qklxmy}response.send(JSON.stringify(data))})结果同样也是一段json格式的字符串 我们该如何从中提取到想要的数据
我们接收到的数据是xhr.response: 我们可以使用parse方法将json格式的数据解析成字符串 xhr.onreadystatechange function () {if (xhr.readyState 4) {if (xhr.status 200 xhr.status 300) {//解析json信息const data JSON.parse(xhr.response);//直接取用data中的值box.innerHTML data.name}}}解析后直接取用即可最后效果
4.2 IE浏览器缓存问题
IE浏览器会对Ajax请求结果进行缓存导致下次发起请求走的是本地的缓存而不是服务器的最新数据。
解决方法在url中加一个时间戳就可以解决问题了。
4.3 Ajax请求超时与异常处理
Ajax网络异常时可以给用户来一个提醒加强产品体验。
首先我们需要处理一下让ajax请求超时可以用到定时器
//延时响应
app.get(/longtime, (request, response) {response.setHeader(Access-Control-Allow-Origin, *)//定时器setTimeout(() {response.send(helloabaaba);}, 2000)
})
前台还是一个按钮点击按钮后发出请求。
接着我们对前台代码进行一个延时两秒的处理两秒钟之内如果没有结果请求就取消 这样的话最后的效果就是没有效果。
我们还可以加一个超时的回调 最后效果 前台代码部分
bodydiv classbox/divbutton classbtn点击发送请求/buttonscriptvar box document.querySelector(.box)var btn document.querySelector(.btn)btn.addEventListener(click, () {const xhr new XMLHttpRequest();//2s内如果没有结果这个请求就取消xhr.timeout 2000;//超时的一个回调函数xhr.ontimeout () {alert(网络异常请稍后重试)}xhr.open(GET, http://127.0.0.1:8000/longtime);xhr.send();xhr.onreadystatechange function() {if(xhr.readyState 4) {if(xhr.status 200 xhr.status 300) {box.innerHTML xhr.response;}}}})/script
/body4.4 ajax取消请求
使用abort函数即可 //取消请求btn2.addEventListener(click, () {xhr.abort();})4.5 ajax请求重复发送问题
什么是ajax请求重复的问题呢比如我们的前端页面有一个发送按钮 每点击一下就会发送个请求 但是如果我们的服务端响应比较慢用户疯狂点击服务器就会接收到非常多的一样的请求。
这个问题的解决方法让服务器判断之前是不是有一样的请求。如果有就不执行执行最新的这个请求。这样可以减缓服务器的压力提高效率和性能。
以上是方向现在说原理。设置一个标识符用来标识是否在发ajax请求。如果正在发送则取消该请求创建一个新的请求
代码如下
bodybutton classbtn点击发送/buttonscriptlet x null;//设置一个标识符,是否在发送ajax请求let isSending false;var btn document.querySelector(.btn)btn.addEventListener(click, () {if(isSending) x.abort();x new XMLHttpRequest();isSending true;x.open(GET, http://127.0.0.1:8000/server);x.send();x.onreadystatechange function() {if(x.readyState 4) {isSending false;}}})/script
/body后记
以上就是原生Ajax的基本使用。
后面会连载这个系列的文章包括jq下的AjaxAxiosPromiseNodejs甚至一些项目中遇到的实例。欢迎关注。
