實現AJAX的兩種方式
阿新 • • 發佈：2018-12-18
第一種通過XMLHttpRequest實現：
需要手動建立XMLHttpRequest物件，較繁瑣。
js程式碼：
<script type="text/javascript"> function getComments(){ //獲得評論框內的值 var comment = document.getElementById("comment-textarea").value; if(comment ==""){ alert("請輸入評論!"); return; } //建立XMLHttpRequest物件 xmlHttp = createXMLHttp(); var articleid= document.getElementById("articleid").value; //url並拼接傳遞引數 var url ="/blog/getcomment?articleId="+escape(articleid)+"&comment="+escape(comment); //查詢GET，修改POST請求；非同步請求用true，同步用false xmlHttp.open("GET",url,true); //當返回狀態發生變化，呼叫回撥函式callback（） xmlHttp.onreadystatechange=callback; xmlHttp.send(null); } //AJAX回撥函式 function callback() { //狀態有四種，4表示成功 if(xmlHttp.readyState==4){ //狀態200表示成功 if(xmlHttp.status==200){ //此時result為json格式資料 var result = xmlHttp.responseText; alert(result); Console.log(result); //推薦用JSON.parse方法解析json，eval方法有安全隱患 var msg =JSON.parse(result); var res =""; //遍歷解析資料並拼接html for(var i=0;i<msg.length;i++){ var date = transferTime(msg[i].date); res +="<ol class=\"commentlist\" >\n" + " <li class=\"comment-content\"><span class=\"comment-f\" ></span>\n" + " <div class=\"comment-avatar\"><img class=\"avatar\" src=\"/images/icon/icon.png\" alt=\"\" /></div>\n" + " <div class=\"comment-main\">\n" + " <p>來自<span class=\"address\">匿名</span>的使用者<span class=\"time\" >"+date+"</span><br>\n" + " </p><div id=\"resulte\" class=\"comment-content-detail\" >"+msg[i].comment+"</div>\n" + " <p ></p>\n" + " </div>\n" + " </li>\n" + " </ol>\n"; } //使用innerHTML方法 替換id為postcomments塊的程式碼 document.getElementById("postcomments").innerHTML =res; } } } //建立XMLHttpRequest物件 function createXMLHttp() { var xmlHttp; if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); if (!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } }
body程式碼：
<div id="postcomments"> <ol class="commentlist" th:each="list:${commentlist}"> <li class="comment-content"><span class="comment-f"></span> <div class="comment-avatar"><img class="avatar" src="/images/icon/icon.png" alt="" /></div> <div class="comment-main"> <p>來自<span class="address">匿名</span>的使用者<span class="time" th:text="${list.date}"></span><br> </p><div id="resulte" class="comment-content-detail" th:text="${list.comment}" ></div> <p ></p> </div> </li> </ol> <!-- <div class="quotes"><span class="disabled">首頁</span><span class="disabled">上一頁</span> <a class="current">1</a><a href="">2</a><span class="disabled">下一頁</span><span class="disabled">尾頁</span></div>--> </div>
服務端程式碼：
@RequestMapping(value = {"/getcomment"}) public void getcomment(int articleId, String comment, HttpServletResponse response) throws IOException { //防止亂碼 response.setContentType("text/text;charset=utf-8"); response.setCharacterEncoding("UTF-8"); //評論功能 Date commentdate = new Date(); blogService.insertComment(articleId,comment,commentdate); //返回評論資訊 List<CommentModel>commentList = blogService.getCommentList(articleId); String json = JSON.toJSONString(commentList); response.getWriter().write(json); }
第二種通過jq實現(推薦)：
js程式碼(附long型別日期格式轉yyyy-MM-dd)：
<script type="text/javascript">
//ajax非同步重新整理評論
function getComments() {
var articleid= document.getElementById("articleid").value;
var comment = document.getElementById("comment-textarea").value;
if(comment ==""){
alert("請輸入評論!");
return;
}
$.ajax({
type:"GET",
url:"/blog/getcomment?articleId=" +escape(articleid)+"&comment="+escape(comment),
dateType:"json",
success: function (data) {
//data為接收到的json資料
//清空評論欄
$("#comment-textarea").val("");
var msg =JSON.parse(data);
var res ="";
for(var i=0;i<msg.length;i++){
//long型別日期格式轉yyyy-MM-dd格式
var date = transferTime(msg[i].date);
res +="<ol class=\"commentlist\" >\n" +
" <li class=\"comment-content\"><span class=\"comment-f\" ></span>\n" +
" <div class=\"comment-avatar\"><img class=\"avatar\" src=\"/images/icon/icon.png\" alt=\"\" /></div>\n" +
" <div class=\"comment-main\">\n" +
" <p>來自<span class=\"address\">匿名</span>的使用者<span class=\"time\" >"+date+"</span><br>\n" +
" </p><div id=\"resulte\" class=\"comment-content-detail\" >"+msg[i].comment+"</div>\n" +
" <p ></p>\n" +
" </div>\n" +
" </li>\n" +
" </ol>\n";
}
document.getElementById("postcomments").innerHTML =res;
qqface();
},
error:function (jqXHR) {
alert("發生錯誤："+jqXHR.status);
}
})}
</script>
<script type="text/javascript">
//json long型別時間轉yyyy-MM-dd格式
function transferTime(cTime) {
//將json串的一串數字進行解析
var jsonDate = new Date(parseInt(cTime));
//為Date物件新增一個新屬性，主要是將解析到的時間資料轉換為我們熟悉的“yyyy-MM-dd hh:mm:ss”樣式
Date.prototype.format = function(format) {
var o = {
//獲得解析出來資料的相應資訊，可參考js官方文件裡面Date物件所具備的方法
"y+" : this.getFullYear(),//得到對應的年資訊
"M+" : this.getMonth() + 1, //得到對應的月資訊，得到的數字範圍是0~11，所以要加一
"d+" : this.getDate(), //得到對應的日資訊
"h+" : this.getHours(), //得到對應的小時資訊
"m+" : this.getMinutes(), //得到對應的分鐘資訊
"s+" : this.getSeconds(), //得到對應的秒資訊
}
//將年轉換為完整的年形式
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1,
(this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
}
//連線得到的年月日 時分秒資訊
for ( var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ("00" + o[k])
.substr(("" + o[k]).length));
}
}
return format;
}
var newDate = jsonDate.format("yyyy-MM-dd");
return newDate;
}
//呼叫該函式，傳入的引數為json字串形式的時間值
// alert(transferTime("1501665896000"));
</script>body程式碼及伺服器端程式碼同上。
至此ajax已實現