当前位置: 首页 > news >正文

ajax请求

ajax实现的步骤

1.创建xhr[XmlHttpRequest]对象  var xhr = new XMLHttpRequest();

2.配置请求信息 xhr.open("get|post","url",false/true);

3.发送请求  xhr.send();

4.判断请求是否发送成功发

if(http_request.readyState==4 && http_request.status==200){}

onreadystatechange (用于异步)属性定义当 readyState 发生变化时执行的函数

属性描述
onreadystatechange定义了当 readyState 属性发生改变时所调用的函数。
readyState保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status200: "OK" 403: "Forbidden" 404: "Page not found"如需完整列表,请访问 Http 消息参考
statusText返回状态文本(例如 "OK" 或 "Not Found")

 把字符串转化为json格式:  var json=JSON.parse(str);

ajax的请求方式

get同步请求

 //get同步请求function getsync(url,params,okfun,errfun){if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else if (window.ActiveXObject) {var xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open('get',url+'?'+params,false);xhr.send();if(xhr.status == 200 && xhr.readyState == 4){okfun(xhr.responseText);}else{errfun("wrong")}}

get异步请求

//get异步请求function getasync(url,params,okfun,errfun){if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else if (window.ActiveXObject) {var xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open('get',url+'?'+params,true);xhr.send();xhr.onreadystatechange=function(){if(xhr.readyState == 4){if(xhr.status == 200){okfun( xhr.response);} else{errfun('error')}}}}

post同步请求

 //post的同步请求function postsync(url,params,okfun,errfun){if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else if (window.ActiveXObject) {var http_request = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open('post',url ,false);//设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send(params);if(xhr.status==200 && xhr.readyState==4){okfun(xhr.responseText);  }else{errfun("error");}}

post异步请求

//post的异步请求function postasync(url,params,okfun,errfun){if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else if (window.ActiveXObject) {var http_request = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open('post',url ,true);//设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send(params);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){okfun(xhr.response)}else{errfun('error');}}}}

懒加载

懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式

懒加载的优点

1.提升用户体验,加快首屏渲染速度

2.减少无效资源的加载

3.防止并发加载的资源过多会阻塞js的加载

懒加载的原理:

首先将页面上的图片的 src 属性设为空字符串,而图片的真实路径则设置在 data-original 属性中,当页面滚动的时候需要去监听 scroll 事件,在 scroll 事件的回调中,判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内则将图片的 src 属性设置为 data-original 的值,这样就可以实现延迟加载。

<style>.goods{width: 300px;height: 200px;border: 1px solid #f00;}img{width: 100px;}
</style>
<script src="./xiaomi-data.js"></script>
<div id="content"></div>
<script>var miData = data.data;var str = '';var cont = document.getElementById('content');function loadInitData(){for(var i=0;i<miData.length;i++){str += `<div class="goods"><img src="./img-placeholder.png" alt="" data-src="${miData[i].info.image}">                <div>价格:${miData[i].info.price}</div>                 <div>销量:${miData[i].info.comments}</div>                <div>${miData[i].info.name}</div>             </div>`;}cont.innerHTML += str;}// 页面初始化时,判断图片的加载时机function loadImg(){var imgList = cont.getElementsByTagName('img');var top;// 页面的高度var winHeight = document.documentElement.clientHeight;for(var i=0;i < imgList.length;i++){// 获取图片距离页面顶端的偏移值top = imgList[i].offsetTop;if(top <= winHeight){// 加载图片:把data-src中的数据放在src中console.log('加载第一幅图片',top,winHeight);imgList[i].src = imgList[i].dataset.src;}}}function onScroll(){window.onscroll = function(){var scrollTop = document.documentElement.scrollTop;var winHeight = document.documentElement.clientHeight;var imgList = cont.getElementsByTagName('img');var top;// 页面的高度var winHeight = document.documentElement.clientHeight;for(var i=0;i < imgList.length;i++){// 获取图片距离页面顶端的偏移值top = imgList[i].offsetTop;if(winHeight + scrollTop >= top){imgList[i].src = imgList[i].dataset.src;}}}}loadInitData();loadImg()onScroll()
</script>


http://www.mrgr.cn/news/48171.html

相关文章:

  • 【优化算法】莲花效应优化算法(LEA):一种基于莲花自然启发的工程设计优化算法
  • VBA之正则表达式(48)-- 快速拆分中文语句
  • 使用Java构建高性能微服务架构
  • 怿星科技联合赛力斯举办workshop活动,进一步推动双方合作
  • IntelliJ IDEA Docker集成
  • 一文了解 Python 多线程编程,线程池,共享字典,竞态条件问题
  • 基于SpringBoot+Vue+MySQL的留守儿童爱心网站
  • 解锁机器人视觉与人工智能的潜力,从“盲人机器”改造成有视觉能力的机器人(下)
  • java医院后台管理系统设计与实现源码(springboot+vue+mysql)
  • 消息中间件介绍
  • 如何快速保存微信公众号文章中的图片
  • 【JVM】JMM
  • 介绍Java
  • 《浔川社团官方自即日起停止发文》
  • 大数据治理快速入门指南
  • kali(专业的渗透测试虚拟机)|kali下载链接地址 |kali安装 |kali部署指南
  • GitHub Universe Learn Live|共聚 2024 GitHub Universe 十周年
  • postgresql 安装
  • 10.11Python数学基础-多维随机变量及其分布
  • 物理学基础精解【71】
  • ELK:Elasticsearch、Logstash、Kibana Spring Cloud Sleuth和Spring Cloud Zipkin
  • 24-10-11-网络
  • 基于Web的停车场管理系统(论文+源码)_kaic
  • 编写Vue组件
  • 功率检测和语音功能
  • Linux系统:apt upgrade与apt update 命令的作用