整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
現(xiàn)代網(wǎng)頁設(shè)計(jì)中，用戶體驗(yàn)是至關(guān)重要的，而網(wǎng)頁加載速度是影響用戶體驗(yàn)的重要因素之一。通過使用jQuery的AJAX技術(shù)，可以實(shí)現(xiàn)異步加載，提升網(wǎng)頁的加載速度，讓用戶享受更流暢的瀏覽體驗(yàn)。本文將向你介紹如何使用jQuery的AJAX技術(shù)實(shí)現(xiàn)異步加載，并分享一些優(yōu)化技巧，幫助你輕松提升網(wǎng)頁的加載速度，讓你的網(wǎng)頁成為爆款！
正文：
一、AJAX簡介及優(yōu)勢
AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個(gè)網(wǎng)頁的情況下，通過后臺與服務(wù)器進(jìn)行數(shù)據(jù)交互的技術(shù)。它的優(yōu)勢在于可以異步加載數(shù)據(jù)，提升網(wǎng)頁的加載速度，提高用戶體驗(yàn)。
二、使用jQuery的AJAX方法實(shí)現(xiàn)異步加載
2.1 引入jQuery庫
在使用jQuery的AJAX技術(shù)之前，首先需要引入jQuery庫。可以通過以下代碼在HTML文件中引入jQuery庫：
<script src="https://cdn.jsdelivr.net/jquery/3.5.1/jquery.min.js"></script>2.2 使用$.ajax()方法發(fā)送異步請求
$.ajax()方法是jQuery中用于進(jìn)行異步請求的核心方法。它可以發(fā)送GET、POST等類型的請求，并處理服務(wù)器返回的數(shù)據(jù)。以下是一個(gè)使用$.ajax()方法實(shí)現(xiàn)異步加載的示例代碼：
$.ajax({
url: "your_url", // 請求的URL地址
type: "GET", // 請求方法（GET或POST）
dataType: "json", // 服務(wù)器返回的數(shù)據(jù)類型
success: function(response) { // 請求成功時(shí)的回調(diào)函數(shù)
// 處理服務(wù)器返回的數(shù)據(jù)
},
error: function(xhr, status, error) { // 請求失敗時(shí)的回調(diào)函數(shù)
// 處理請求失敗的情況
}
}); 2.3 使用$.get()和$.post()方法發(fā)送簡化的異步請求
除了$.ajax()方法，jQuery還提供了$.get()和$.post()方法，用于發(fā)送簡化的異步請求。$.get()方法用于發(fā)送GET請求，$.post()方法用于發(fā)送POST請求。以下是一個(gè)使用$.get()方法實(shí)現(xiàn)異步加載的示例代碼：
$.get("server_url", function(response) {
// 處理服務(wù)器返回的數(shù)據(jù)
});三、優(yōu)化技巧，提升加載速度
3.1 壓縮和合并JavaScript和CSS文件
將多個(gè)JavaScript和CSS文件壓縮和合并成一個(gè)文件，可以減少文件的大小和數(shù)量，提升加載速度。
3.2 使用CDN加速
將靜態(tài)資源（如JavaScript庫、CSS文件、圖片等）托管到CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）上，可以加快資源的加載速度，提升網(wǎng)頁的響應(yīng)速度。
3.3 使用瀏覽器緩存
通過設(shè)置合適的緩存策略，讓瀏覽器緩存靜態(tài)資源，可以減少重復(fù)請求，提升加載速度。
3.4 延遲加載和懶加載
對于一些非關(guān)鍵內(nèi)容，可以使用延遲加載和懶加載的方式進(jìn)行加載，提升頁面的初次加載速度。
結(jié)語：
通過本文的介紹，相信你已經(jīng)掌握了如何使用jQuery的AJAX技術(shù)實(shí)現(xiàn)異步加載，并學(xué)到了一些優(yōu)化技巧，能夠提升網(wǎng)頁的加載速度。記住要引入jQuery庫，使用$.ajax()、$.get()或$.post()方法發(fā)送異步請求，同時(shí)結(jié)合優(yōu)化技巧，讓你的網(wǎng)頁速度翻倍.
見瀑布流當(dāng)鼠標(biāo)滾動到瀏覽器底部的時(shí)候（或者手機(jī)中滑到屏幕底部），就會發(fā)起一個(gè)ajax的請求。在服務(wù)端生成item列表后，通過 js append到相應(yīng)的div里邊。
看起來很簡單的樣子，關(guān)鍵問題就出在圖片的加載問題上，圖片一般都放在服務(wù)器上，通過http下載到客戶端。
例如我的圖片地址：
http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg
而圖片下載到本地是需要一定時(shí)間的(網(wǎng)速快的路過，當(dāng)然也要考慮服務(wù)器帶寬，比如服務(wù)器下行帶寬就200kb，那你本地網(wǎng)速100MB也沒用，還是按照200kb下載的，其中還不算耗能)。當(dāng)圖片還沒有下載完的時(shí)候，使用js獲取到元素的寬高將會是0。
-------------------------------------------------------------------
懂一點(diǎn)的同學(xué)可能會說，我使用jquery的ready不就好了。如下：
$(document).ready(function(){
// 你的代碼...
});
如果這么簡單就好了，我這里就說下ready與window.onload的區(qū)別。
jquery的ready只是dom的結(jié)構(gòu)加載完畢，便視為加載完成。(缺點(diǎn)是圖片沒有加載完畢，寬高為0，程序出錯(cuò))
js的window.onload是指dom的生成和資源的加載，比如flash、圖片完全加載出來后才執(zhí)行onload。(缺點(diǎn)就是當(dāng)某一張圖片很大的時(shí)候，豈不阻止了其它js的正常執(zhí)行)
-------------------------------------------------------------------------------------
知道了他們的區(qū)別后，我們再來談?wù)勅绾伪苊忮e(cuò)誤和選擇性使用。
如果你進(jìn)行了百度，很多人會告訴你。
這樣：
$('img').load(function(){
// 加載完成
});
好像很強(qiáng)大的樣子，其實(shí)不然，他的缺點(diǎn)是每加載一張圖片，回調(diào)函數(shù)就執(zhí)行一次。好吧太煩了，我只想全部加載完走一次就可以了。當(dāng)然可以，你可以進(jìn)行修改如下：
va imgNum=$('img').length;
$('img').load(function(){
if(!--imgNum){
// 加載完成
}
});
這樣總可以了吧，我加載一張，就用圖片總數(shù)去減一，減到0我就加載完畢。看起來很完美，前提是你沒遇到IE。
IE的圖片總是從緩存文件里去拿，這就造成load方法根本就不執(zhí)行，只有是新圖片才會走load。
服了吧？繼續(xù)往下看。
---------------------------------------------------------------
或者是這樣：
document.getElementById('img').onload=function(){
// 加載完成
};
看我原生代碼一統(tǒng)天下，實(shí)際上效果甚微，一次只能處理一個(gè)你準(zhǔn)備寫多少個(gè)document，有人說我可以用循環(huán)去綁定，經(jīng)過我測試貌似根本沒效果。
還是一笑而過吧。看看我的最終解決方案（兼容：谷歌&火狐&IE）
-------------------------------------------------------------
利用圖片沒有加載完成的時(shí)候，寬高為0。我們很容易判斷圖片的一個(gè)加載情況。如下：
var t_img; // 定時(shí)器
var isLoad=true; // 控制變量
// 判斷圖片加載狀況，加載完成后回調(diào)
isImgLoad(function(){
// 加載完成
});
// 判斷圖片加載的函數(shù)
function isImgLoad(callback){
// 注意我的圖片類名都是cover，因?yàn)槲抑恍枰幚韈over。其它圖片可以不管。
// 查找所有封面圖，迭代處理
$('.cover').each(function(){
// 找到為0就將isLoad設(shè)為false，并退出each
if(this.height===0){
isLoad=false;
return false;
}
});
// 為true，沒有發(fā)現(xiàn)為0的。加載完畢
if(isLoad){
clearTimeout(t_img); // 清除定時(shí)器
// 回調(diào)函數(shù)
callback();
// 為false，因?yàn)檎业搅藳]有加載完成的圖，將調(diào)用定時(shí)器遞歸
}else{
isLoad=true;
t_img=setTimeout(function(){
isImgLoad(callback); // 遞歸掃描
},500); // 我這里設(shè)置的是500毫秒就掃描一次，可以自己調(diào)整
}
}
?
獎(jiǎng)和開盲盒性質(zhì)一樣的都是通過ajax讀取后臺的隨機(jī)數(shù)據(jù)。
圖1 轉(zhuǎn)輪盤抽獎(jiǎng)
圖2 轉(zhuǎn)輪盤抽獎(jiǎng)結(jié)果
1、轉(zhuǎn)輪盤
本來是想直接繪圖實(shí)現(xiàn)輪盤，但是沒有找到怎么填充文字，只好把輪盤弄成了背景圖，通常用于游戲抽道具，商城積分抽獎(jiǎng)，公司年末員工抽獎(jiǎng)
html代碼
<style>
.box{
width:500px;height:500px;border:0px solid #DDD;margin:100px;position:relative;
}
.beij{
background:url(cjbg.jpg) no-repeat center center;width:100%;height:100%;
}
.pointer{
cursor:pointer;position:absolute;top:50%;left:50%;margin-left:-40px;margin-top:-48px;background:url(c1.png) no-repeat center center;width:80px;height:96px;z-index:21;
}
</style>
<div class='box' >
<div class='beij'></div>
<div class='pointer'></div>
</div>js代碼
<script>
$(document).ready(function() {
var time=0.4;//轉(zhuǎn)一圈所需時(shí)間 s
var count=10;//默認(rèn)多轉(zhuǎn)幾圈
/*
var angle=new Array();
angle[0]=23;
angle[1]=53;
angle[2]=83;
angle[3]=110;
angle[4]=133;
angle[5]=163;
angle[6]=223;
*/
var i=1;
$(".pointer").click(function(){
$.ajax({
url: "/public/man/index.php/api/choujiang",
data:'',
type: "post",
dataType: "json",
success: function(result) {
//console.log(result.msg);
$('.beij').css({'transform':"rotate("+(i*count*360+result.angle)+"deg)","transition":" All "+(time*(5+result.angle/360))+"s ease-in-out"});
//彈窗提示
//setTimeout("alert('"+result.msg+"');",time*1000*(5+result.angle/360));
setTimeout("console.log('"+result.msg+"');",time*1000*(5+result.angle/360));
}
})
i++;
});
});
</script>說明：
后臺接口程序
public function choujiang(){
/*
id 獎(jiǎng)品編號
title 中獎(jiǎng)提示
prec 中獎(jiǎng)概率
angle 旋轉(zhuǎn)角度
*/
$arr[0]=array('id'=>1,'title'=>'恭喜抽中一等獎(jiǎng)：蘋果手機(jī)一部！','prec'=>1,'angle'=>23);
$arr[1]=array('id'=>2,'title'=>'恭喜抽中二等獎(jiǎng)：Ipad','prec'=>2,'angle'=>68);
$arr[2]=array('id'=>3,'title'=>'恭喜抽中三等獎(jiǎng)：','prec'=>25,'angle'=>113);
$arr[3]=array('id'=>4,'title'=>'恭喜抽中四等獎(jiǎng)','prec'=>50,'angle'=>155);
$arr[4]=array('id'=>5,'title'=>'恭喜抽中五等獎(jiǎng)','prec'=>80,'angle'=>202);
$arr[5]=array('id'=>6,'title'=>'恭喜抽中六等獎(jiǎng)','prec'=>150,'angle'=>245);
$arr[6]=array('id'=>7,'title'=>'恭喜抽中七等獎(jiǎng)','prec'=>240,'angle'=>290);
$arr[7]=array('id'=>8,'title'=>'獲得50元優(yōu)惠券，還需加油哦！','prec'=>380,'angle'=>337);
//中獎(jiǎng)幾率求和
$cmun=0;
for($i=0;$i<=count($arr)-1;$i++){
$cmun+=$arr[$i]['prec'];
}
//中獎(jiǎng)隨機(jī)數(shù)
$smrand=mt_rand(1,$cmun);
$this->getRand(1,0,$arr,count($arr),$smrand);
}
public function getrand($m,$im,$arr,$count,$smrand){
/*
$m 起始數(shù)
$im 第幾個(gè)數(shù)組元素
$count 數(shù)組總得元素個(gè)數(shù)
$arr 原始數(shù)組
$smrand 中獎(jiǎng)隨機(jī)數(shù)
*/
//已經(jīng)中獎(jiǎng)
if($smrand>=$m&&$smrand<=$arr[$im]['prec']+$m-1){
//中獎(jiǎng)返回
$msg=array('msg'=>$arr[$im]['title'],'angle'=>$arr[$im]['angle'],'smrand'=>$smrand);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}else{
//最后一個(gè)不需要判斷 直接返回
if($im+1==$count-1){
$msg=array('msg'=>$arr[$count-1]['title'],'angle'=>$arr[$count-1]['angle'],'smrand'=>$smrand);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}else{
//起始數(shù)字
$start=$arr[$im]['prec']+$m;
//遞歸 再次調(diào)用數(shù)組 讀取下一個(gè)數(shù)組元素
$this->getrand($start,$im+1,$arr,$count,$smrand);
}
}
}說明：
2、隨機(jī)抽取一個(gè)幸運(yùn)員工
點(diǎn)擊開始抽獎(jiǎng)，單行文本框循環(huán)顯示員工，抽獎(jiǎng)按鈕文字變?yōu)橥Ｖ梗c(diǎn)擊停止的時(shí)候，抽中的員工顯示在獲獎(jiǎng)名單。
圖3 隨機(jī)抽取幸運(yùn)員工
html代碼
<style>
body{
background:#DDD;
}
.title{
height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
margin:10px 0 0 100px;
}
#ygname{
padding:3px 5px;;
}
</style>
<div class='title'>獲獎(jiǎng)名單</div>
<div class='box' >
<ul>
</ul>
</div>
<div class='cjbtn'><input type='text' id='ygname' /> <button id='choujiang'>開始抽獎(jiǎng)</button></div>js代碼
<script>
var t;
var yuangong=new Array();
$.ajax({
url: "/public/man/index.php/api/yuangong",
data:'',
type: "post",
dataType: "json",
success: function(result) {
yuangong=result.msg
}
})
$(document).ready(function() {
$("#choujiang").click(function(){
if($(this).html()=='開始抽獎(jiǎng)'){
if(yuangong.length>=3){
$(this).html("停止");
start();
}
}else{
$(this).html("開始抽獎(jiǎng)");
stop();
}
});
});
function start() {
num=Math.floor(Math.random() * (yuangong.length-1));
$('#ygname').val(yuangong[num]['title']);
t=setTimeout(start, 0);
}
function stop() {
clearInterval(t);
//數(shù)組中刪除中獎(jiǎng)員工信息防止重復(fù)中獎(jiǎng)
yuangong.splice($.inArray(yuangong[num], yuangong), 1);
$(".box ul").append("<li>"+$('#ygname').val()+"</li>");
}
</script>說明：
num=Math.floor(Math.random() * (yuangong.length));
綜上：num得到的是0到數(shù)組下標(biāo)的隨機(jī)數(shù)。
clearInterval(t)：用于停止t=setTimeout(start, 0);
后臺php接口程序
public function yuangong(){
$yuangong[0]=array('id'=>1,'title'=>'業(yè)務(wù)部【張三】');
$yuangong[1]=array('id'=>2,'title'=>'技術(shù)部【李四】');
$yuangong[2]=array('id'=>3,'title'=>'技術(shù)部【逍遙】');
$yuangong[3]=array('id'=>4,'title'=>'會計(jì)部【薛嫣】');
$yuangong[4]=array('id'=>5,'title'=>'行政部【王五】');
$yuangong[5]=array('id'=>6,'title'=>'行政部【王天林】');
$yuangong[6]=array('id'=>7,'title'=>'行政部【李笑和】');
$msg=array('msg'=>$yuangong);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}3、隨機(jī)抽取多個(gè)幸運(yùn)員工
沒有想到什么效果，只是單純地獲取了隨機(jī)數(shù)
html代碼
<style>
body{
background:#DDD;
}
.title{
height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
margin:10px 0 0 100px;
}
#ygname{
padding:3px 5px;;
}
</style>
<div class='title'>獲獎(jiǎng)名單</div>
<div class='box' >
<ul>
</ul>
</div>
<div class='cjbtn'> <button id='choujiang'>開始抽獎(jiǎng)</button></div>js代碼
<script>
var yuangong=new Array();
var ygstr='';//存取獲獎(jiǎng)員工
var ygrs=5;//一次抽幾個(gè)
var t;
$.ajax({
url: "/public/man/index.php/api/yuangong",
data:'',
type: "post",
dataType: "json",
success: function(result) {
yuangong=result.msg
}
})
$(document).ready(function() {
$("#choujiang").click(function(){
if(yuangong.length>=ygrs){
start(1);
}
});
});
function start(ms) {
//ms 第幾次獲取員工信息
num=Math.floor(Math.random() * (yuangong.length));
console.log(num);
ygstr+="<li>"+yuangong[num]['title']+"</li>";
if(ms>=ygrs){
$(".box ul").html(ygstr);
ygstr="";
}else{
yuangong.splice($.inArray(yuangong[num], yuangong), 1);
start(ms+1);
}
}
</script>4、在線開盲盒
需要我們點(diǎn)擊抽獎(jiǎng)的時(shí)候通過ajax讀取后臺獲得的盲盒信息，直接顯示到前臺，前臺顯示同上邊的，都是一樣，說一下后臺程序。
使用array_rand().隨機(jī)獲取幾個(gè)數(shù)組元素
array_rand($arr,$count).用法
返回值是原數(shù)組的下標(biāo)。
public function manghe(){
$goods[0]=array('id'=>1,'title'=>'手機(jī)');
$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
$goods[2]=array('id'=>3,'title'=>'化妝品');
$goods[3]=array('id'=>4,'title'=>'啫喱水');
$goods[4]=array('id'=>5,'title'=>'面膜');
$goods[5]=array('id'=>6,'title'=>'學(xué)習(xí)用品');
$goods[6]=array('id'=>7,'title'=>'電腦');
$getarr=array_rand($goods,3);
$i=0;
foreach($getarr as $k){
$rearr[$i]=$goods[$k];
$i++;
}
$msg=array('msg'=>$rearr);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}如果包含特殊獎(jiǎng)項(xiàng)，需要滿足抽獎(jiǎng)多少次，一定抽中，可以達(dá)到抽獎(jiǎng)次數(shù)以后在array_rand內(nèi)隨機(jī)數(shù)減一，然后把大獎(jiǎng)塞進(jìn)該次抽獎(jiǎng)的返回信息。
array_push($rearr,$a)用法：
$tebie[999]=array('id'=>999,'title'=>'特別大獎(jiǎng)');
$goods[0]=array('id'=>1,'title'=>'手機(jī)');
$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
$goods[2]=array('id'=>3,'title'=>'化妝品');
$goods[3]=array('id'=>4,'title'=>'啫喱水');
$goods[4]=array('id'=>5,'title'=>'面膜');
$goods[5]=array('id'=>6,'title'=>'學(xué)習(xí)用品');
$goods[6]=array('id'=>7,'title'=>'電腦');
$getarr=array_rand($goods,3);
$i=0;
foreach($getarr as $k){
$rearr[$i]=$goods[$k];
$i++;
}
array_push($rearr,$tebie[999]);
dump($rearr);
exit;輸出結(jié)果：
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
