推廣網(wǎng)站怎么建設(shè)和維護seo資訊
Ajax在不刷新頁面的情況下,進行頁面局部更新。
Ajax使用流程:
- 創(chuàng)建XmlHttpReqeust對象
- 發(fā)送Ajax請求
- 處理服務(wù)器響應(yīng)
1. 創(chuàng)建XmlHttpReqeust對象
XmlHttpReqeust對象是Ajax的核心,使用該對象發(fā)起請求,接收響應(yīng)
不同的瀏覽器創(chuàng)建方式不相同:
2. 發(fā)送Ajax請求
xmlhttp.open()
創(chuàng)建請求xmlhttp.send()
發(fā)送到服務(wù)器
3. 處理服務(wù)器響應(yīng)
xmlhttp.onreadystatechange()
事件用來監(jiān)聽Ajax執(zhí)行過程xmlhttp.readyState
屬性說明XMLHttpRequest當(dāng)前狀態(tài)
xmlhttp.status
屬性代表服務(wù)器響應(yīng)狀態(tài)碼
JSON語法規(guī)則
- 數(shù)據(jù)由
key:value
鍵值對描述 {}
代表一個完整對象,擁有多個鍵值對[]
保存數(shù)組,多個對象之間使用,
分隔
JSON是一種輕量級文本數(shù)據(jù)交換格式,javascript天然支持JSON。
Ajax+JSON開發(fā)模式:
JSON序列化組件Jackson
<dependency><!--添加jackson依賴--><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.12.3</version></dependency>
將對象序列化為JSON字符串:
發(fā)起Ajax請求并處理響應(yīng)
Ajax組件庫-axios
http://axios-js.com/zh-cn/docs/
axios簡化了Ajax的操作
axios發(fā)送GET請求:
axios發(fā)送POST請求:
Ajax默認(rèn)是異步的方式執(zhí)行。
Ajax同步和異步的區(qū)別:
- 同步是在服務(wù)器未返回JSON前,JS程序一直處于阻塞狀態(tài)
- 異步是在服務(wù)器未返回JSON前,JS程序不阻塞,Ajax通過回調(diào)獲取結(jié)果
Ajax同步方式請求:
因為是同步方式,監(jiān)聽事件不會被執(zhí)行,當(dāng)代碼順序執(zhí)行到這一行時,說明請求已經(jīng)返回
Ajax實現(xiàn)二級聯(lián)動菜單:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="/js/axios.js"></script>
</head>
<body><select id="lv1" style="width:200px;height:30px"><option value="-1" selected>請選擇</option></select><select id="lv2" style="width:200px;height:30px"></select><script>var lv1=document.getElementById("lv1");axios.get("/channel",{params:{"level":1}}).then(function(response){var json=response.data;for(var i=0;i<json.length;i++){var channel=json[i];lv1.options.add(new Option(channel.name,channel.code))}}).catch(function(error){});var lv2=document.getElementById("lv2");lv1.onchange=function(){axios.get("/channel",{params:{"level":2,"parent":lv1.value}}).then(function(response){var json=response.data;lv2.length=0;// 清除二級菜單原來的數(shù)據(jù)for(var j=0;j<json.length;j++) {lv2.options.add(new Option(json[j].name,json[j].code))}}).catch(function(error){});}
</script>
</body>
</html>
package ajax.servlet;import ajax.entity.Channel;
import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String level = req.getParameter("level");String parent = req.getParameter("parent");List<Channel> chlist=new ArrayList<>();if(level.equals("1")){chlist.add(new Channel("ai","人工智能"));chlist.add(new Channel("web","前端開發(fā)"));}else if(level.equals("2")){if(parent.equals("ai")){chlist.add(new Channel("dl","深度學(xué)習(xí)"));chlist.add(new Channel("cv","計算機視覺"));chlist.add(new Channel("nlp","自然語言處理"));}else if(parent.equals("web")){chlist.add(new Channel("html","超文本標(biāo)記語言"));chlist.add(new Channel("css","級聯(lián)樣式表"));chlist.add(new Channel("js","javascript腳本"));}}ObjectMapper objectMapper=new ObjectMapper();String json=objectMapper.writeValueAsString(chlist);resp.setContentType("application/json;charset=utf-8");resp.getWriter().println(json);}
}