當(dāng)今互聯(lián)網(wǎng)時(shí)代下，大量數(shù)據(jù)的交互變得日益頻繁。因此，網(wǎng)頁需要盡量減少用戶等待時(shí)間。這里介紹一種可以讓小數(shù)據(jù)量的信息快速地在網(wǎng)頁上展示的技術(shù)——php ajax導(dǎo)入。

相信大家都曾經(jīng)遇到這樣的情況：在網(wǎng)頁上點(diǎn)擊某個(gè)按鈕，網(wǎng)頁穩(wěn)穩(wěn)地卡在原地，不停地刷新，讓人抓狂。這是因?yàn)楫?dāng)一個(gè)大文件一次性被傳輸給服務(wù)器時(shí)，會使網(wǎng)頁停止響應(yīng)。而php ajax導(dǎo)入技術(shù)可以將文件分為若干小塊，逐步上傳和處理，保證數(shù)據(jù)在更短的響應(yīng)時(shí)間內(nèi)被展示到頁面上。

下面，通過一個(gè)簡單的例子來介紹php ajax導(dǎo)入技術(shù)的實(shí)現(xiàn)過程。假設(shè)有一個(gè)html頁面，里面有一個(gè)上傳文件的按鈕，一個(gè)JQuery實(shí)現(xiàn)的進(jìn)度條控制圖和一個(gè)展示上傳結(jié)果的div塊。先用JQuery實(shí)現(xiàn)文件上傳操作：

$(document).ready(function(){
$('#uploadForm').on('submit', function(e){
e.preventDefault();
var formData = new FormData(this); 
$.ajax({
url: 'upload.php',//上傳地址
type: 'POST',
data: formData,
beforeSend: function () {
$('progress').show(); //顯示進(jìn)度條
$("#rText").empty(); // 清空上傳返回值
},
xhr: function () {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function (e) {
var loaded = e.loaded; //已經(jīng)上傳的字節(jié)數(shù)
var total = e.total; //文件總字節(jié)數(shù)
var percent = Math.floor(100 * loaded / total); //上傳百分比
$('progress').val(percent); //設(shè)置進(jìn)度條值
});
}
return xhr;
},
success: function (ret) {
$('progress').hide();
$("#rText").html(ret);
},
contentType: false,
processData: false
});
});
});

其中：

• formData(this)表示上傳表單中的數(shù)據(jù)以二進(jìn)制流的形式發(fā)送到服務(wù)器端。
• beforeSend在AJAX請求發(fā)送之前觸發(fā)，用于頁面動態(tài)控制。
• xhr是跨瀏覽器的XMLHttpRequest對象，用以監(jiān)聽上傳進(jìn)度事件，更新進(jìn)度條。
• contentType和processData都設(shè)置為false，表示jquery不要處理數(shù)據(jù)，數(shù)據(jù)仍以二進(jìn)制流形式發(fā)送到服務(wù)器端。

接下來，實(shí)現(xiàn)PHP上傳文件操作的代碼。在upload.php文件中編寫如下代碼：

if(isset($_FILES["file"])){
$name = $_FILES["file"]["name"];
$tmp_name = $_FILES["file"]["tmp_name"];
$error = $_FILES["file"]["error"];
if($error == UPLOAD_ERR_OK){
move_uploaded_file($tmp_name, "$name");
echo "$name uploaded Success!";
}
else{
echo "Upload failed!";
}
}

可以看到，當(dāng)傳輸完成時(shí)，通過echo語句在前端頁面上展示文件上傳結(jié)果。

綜上所述，可以看到，在php ajax導(dǎo)入技術(shù)中，前端頁面實(shí)現(xiàn)的效果是上傳進(jìn)度條的實(shí)時(shí)顯示；而后端處理的實(shí)現(xiàn)主要是利用PHP語言處理文件上傳請求。php ajax導(dǎo)入技術(shù)不僅可以提高用于體驗(yàn)，而且還能節(jié)約時(shí)間，讓你的網(wǎng)頁更快速地展現(xiàn)數(shù)據(jù)，為用戶提供更流暢的使用體驗(yàn)。