用AJAX與後臺進行交互

AJAX是什麼

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）。AJAX 是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。

下圖爲AJAX的工作原理

                               

傳統的form表單提交會導致頁面刷新，在我們現在這種情況下，不希望頁面被刷新，這種時候我們都是使用Ajax的方式進行請求的：我們在這裏使用AJAX來進行文件的批量上傳，以下是文件上傳代碼

function upload() {

	$('#fileinput').ajaxSubmit({
		url: 'http://www.datanewsstudio.com/nlp_api/public/upload',
		xhrFields: {
			withCredentials: true
		},
		success: function(data) {
			if(data.length > 0) {
				var string = "下列文件的格式有誤，我們沒有處理：\n";
				for(var i = 0; i < data.length; i++) {
					string += data[I].name + ", ";
				}
				string = string.substr(0, string.length - 2);
				alert(string);
			}
			window.location.href = "Analyzing1.html";

		},
		error: function(request, status) {
			alert("TODO 發生錯誤：" + request.status);

		}

	});

}

在這裏用了jquery.form.js這個庫裏面的ajaxSubmit()方法，直接將表單以AJAX的方式提交，這個方法對我們的文件上傳來說非常方便也非常重要。具體的用法已在以上代碼塊中寫出。

前端頁面如圖：