做設(shè)計(jì)想接外單去哪個(gè)網(wǎng)站好怎樣推廣自己的商城
一、Ajax
1.定義
Ajax（Asynchronous JavaScript And XML）：異步的 JavaScript 和 XML
AJAX 不是新的編程語(yǔ)言，指的是?種交互方式：異步加載。
客戶端和服務(wù)器的數(shù)據(jù)交互更新在局部頁(yè)面的技術(shù)，不需要刷新整個(gè)頁(yè)面 --> 局部刷新。
優(yōu)點(diǎn)：
① 局部刷新，效率更高
② 用戶體驗(yàn)更好
2.原理
3.基于 jQuery 的 AJAX 語(yǔ)法
$.ajax({
????????屬性，
})
常用的屬性參數(shù)：
| url | 請(qǐng)求的后端服務(wù)地址 |
| type | 請(qǐng)求方式，默認(rèn) get |
| data | 請(qǐng)求所攜帶的參數(shù) |
| dataType | 服務(wù)器返回的數(shù)據(jù)類型：text / json |
| success | 請(qǐng)求成功的回調(diào)函數(shù) |
| error | 請(qǐng)求失敗的回調(diào)函數(shù) |
| complete | 請(qǐng)求完成的回調(diào)函數(shù)（無(wú)論成功或者失敗，都會(huì)調(diào)用） |
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body><input id="text" type="text"/><br/><input id="btn" type="button" value="提交"/><script type="text/javascript">$(function () {var btn = $("#btn");btn.click(function () {$.ajax({url: '/test',type: 'post',data: 'id=1',dataType: 'text',success: function (data) {var text = $("#text");text.before("<span>" + data + "</span><br/>");}});});})</script>
</body>
</html>@WebServlet("/test")
public class TestServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String id = req.getParameter("id");try {Thread.sleep(1500);//1.5s} catch (InterruptedException e) {e.printStackTrace();}String str = "Hello World";resp.getWriter().write(str);}
}
注意：
① 不能用表單提交請(qǐng)求（同步請(qǐng)求），改用 jQuery 方式動(dòng)態(tài)綁定事件來(lái)提交。
② Servlet 不能跳轉(zhuǎn)到 jsp，只能將數(shù)據(jù)返回（通過(guò) response.getWriter() 將數(shù)據(jù)寫(xiě)回到頁(yè)面）。
success 回調(diào)函數(shù)中的 data，就代表返回的數(shù)據(jù)。
如果跳轉(zhuǎn)到 jsp 的話，會(huì)將 jsp 的整個(gè)頁(yè)面代碼作為 data 返回。
4.傳統(tǒng)的 WEB 數(shù)據(jù)交互 與 AJAX 數(shù)據(jù)交互 的區(qū)別
① 客戶端請(qǐng)求的方式不同：
????????傳統(tǒng)：瀏覽器發(fā)送同步請(qǐng)求 （form、a）
????????AJAX：異步引擎對(duì)象發(fā)送異步請(qǐng)求
② 服務(wù)器響應(yīng)的?式不同：
????????傳統(tǒng)：響應(yīng)?個(gè)完整 JSP 頁(yè)面（視圖）
????????AJAX：響應(yīng)需要的數(shù)據(jù)
③ 客戶端處理方式不同：
????????傳統(tǒng)：需要等待服務(wù)器完成響應(yīng)并且重新加載整個(gè)頁(yè)面之后，用戶才能進(jìn)行后續(xù)的操作。
????????AJAX：動(dòng)態(tài)更新頁(yè)面中的局部?jī)?nèi)容，不影響用戶的其他操作
二、Json
1.定義
JavaScript Object Notation：?種輕量級(jí)數(shù)據(jù)交互格式，完成 js 與 Java 等后端開(kāi)發(fā)語(yǔ)?對(duì)象數(shù)據(jù)之間的轉(zhuǎn)換 。
客戶端和服務(wù)器之間傳遞對(duì)象數(shù)據(jù)，需要用到 JSON 格式。
2.使用步驟：
① 導(dǎo)入 json 依賴
<!-- 添加JSON依賴--><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version><!-- 必須添加JDK版本號(hào)--><classifier>jdk15</classifier></dependency><dependency><groupId>commons-beanutils</groupId><artifactId>commons-beanutils</artifactId><version>1.9.2</version></dependency><dependency><groupId>commons-collections</groupId><artifactId>commons-collections</artifactId><version>3.2.1</version></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.5</version></dependency><dependency><groupId>net.sf.ezmorph</groupId><artifactId>ezmorph</artifactId><version>1.0.3</version></dependency><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.2</version></dependency>② 將 Java 對(duì)象轉(zhuǎn)換為 Json 格式
public class TestServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {User user = new User(1, "張三", 96.5);//處理中文亂碼resp.setCharacterEncoding("UTF-8");//將 Java 對(duì)象轉(zhuǎn)為 JSON 格式JSONObject jsonObject = JSONObject.fromObject(user);resp.getWriter().write(jsonObject.toString());}
}注意：
如果是一個(gè)普通的 Java 對(duì)象，使用?JSONObject.fromObject() 進(jìn)行轉(zhuǎn)換；
如果是一個(gè) Java 對(duì)象的集合，使用?JSONArray.fromObject() 進(jìn)行轉(zhuǎn)換；
如果是多個(gè) Java 對(duì)象的集合，可以創(chuàng)造一個(gè)類進(jìn)行封裝，類的屬性就是這多個(gè)集合。然后返回該對(duì)象，如下：
public class Location {private List<String> cities;//市private List<String> areas;//區(qū)public List<String> getCities() {return cities;}public void setCities(List<String> cities) {this.cities = cities;}public List<String> getAreas() {return areas;}public void setAreas(List<String> areas) {this.areas = areas;}
}
③ Ajax 中以 json 格式返回?cái)?shù)據(jù)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>編號(hào)：<input id="id" type="text"/><br/>姓名：<input id="name" type="text"/><br/>成績(jī)：<input id="score" type="text"/><br/><input id="btn" type="button" value="提交"/><script type="text/javascript">$(function () {var btn = $("#btn");btn.click(function () {$.ajax({url:'/test',type:'post',dataType:'json',success:function(data){$("#id").val(data.id);$("#name").val(data.name);$("#score").val(data.score);}})});})</script>
</body>
</html>