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: 请求已完成且响应已就绪 |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found"如需完整列表，请访问 Http 消息参考 |
| statusText | 返回状态文本（例如 "OK" 或 "Not Found"） |
把字符串转化为json格式： var json=JSON.parse(str);
ajax的请求方式
get同步请求
javascript
//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异步请求
javascript
//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同步请求
javascript
//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异步请求
javascript
//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 的值，这样就可以实现延迟加载。
html
<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>