Ajax技術
1、同步與異步
同步現象：客戶端發送請求到服務器端，當服務器返回響應之前，客戶端都處於等待、卡死的狀態。
異步現象：客戶端發送請求到服務器端，無論服務器是否返回響應，客戶端都可以隨意做其他事情，不會卡死。
2、Ajax運行原理
頁面發起請求，會將請求發送給瀏覽器內核中的Ajax引擎，Ajax引擎會提交請求到服務器端，在這段時間里，客戶端可以進行任意操作，知道服務器端將數據返回給Ajax引擎后，會觸發你設置的事件，從而執行自定義的js邏輯代碼完成某種頁面的功能。
js原生的Ajax技術
js原生的Ajax其實就是圍繞瀏覽器內內置的Ajax引擎對象進行學習的，要使用js原生的Ajax完成異步操作，有以下幾個步驟：
1）創建Ajax引擎對象
2）為Ajax引擎對象綁定監聽（監聽服務器已將數據響應給引擎）
3）綁定提交地址
4）發送請求
5）接收響應數據
如果是Post方式提交，需要在發送請求之前設置一個頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
注：所有的異步訪問都是Ajax引擎
Json數據格式
json是一種與語言無關的數據交換格式。作用就是：使用Ajax進行前后台的數據交換、移動端與服務端的數據交換
Json的格式與解析
1）對象格式：{“key1”:obj,"key2":obj,"key3":obj....}
2）數組/集合格式：[obj,obj,obj...]
例如：user對象，用Json數據格式表示為：{“username”：“zhangsan”,"age":18,"address":"淄博"}
List<Product>，用Json數據格式表示為：[{"pid":10,"pname":"小米4C"},{},{}...]
注：1、對象格式和數組格式可以互相嵌套的
2、json的key是字符串，json的value是object
json的解析：json是js的原生內容，也就意味着js可以直接取出json對象中的數據
class Person{
String firstname = "張";
String lastname = "三豐";
Integer age = 100;
}
案例一
{key:value,key:value}
{"firstname":"張","lastname":"三豐","age":100}
案例二
[{key:value,key:value},{key:value,key:value}]
[{"firstname":"李","lastname":"四","age":18},{},{}]
案例三
{
"param":[{key:value,key:value},{key:value,key:value}]
}
"java0131":[{"firstname":"李","lastname":"四","age":18},{},{}]
案例四
{
"param1":[{key:value,key:value},{key:value,key:value}],
"param2":[{key:value,key:value},{key:value,key:value}],
"param3":[{key:value,key:value},{key:value,key:value}]
}
案例五
{
"param1":"value1",
"param2":{},
"param3":[{key:value,key:value},{key:value,key:value}]
}
package web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class JqueryAjax extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// post方式提交的時候，request獲取的數據不會有中文亂碼的問題
// get方式提交的時候，request獲取的數據會有中文亂碼的問題
// name = new String(name.getBytes("ISO8859-1"), "UTF-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name + "..." + age);
// java只能返回一個Json格式的字符串
//response中文亂碼該怎么解決還怎么解決
response.getWriter().write("{\"name\":\"" + name + "\",\"age\":" + age + "}");
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Json轉換插件
將java的對象或集合轉成json形式字符串
json的轉換插件是通過java的一些工具，直接將java對象或集合轉換成json字符串。
常用的json轉換工具有如下幾種：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴
Jquery的Ajax技術
Jquery是一個優秀的js框架，自然對js原生的Ajax進行了封裝，封裝后的Ajax在操作方法上更簡潔，功能更強大，與Ajax操作相關的jQuery方法有如下幾種，但是開發中經常使用的有三種
1、$.get(url,[data],[callback],[type])
2、$.post(url,[data],[callback],[type])
url:代表的請求的服務器端的地址
data:代表的請求服務器端的數據（可以是key=value形式，也可以是json格式）
callback:代表的服務器端成功響應所觸發的函數（只有正常成功返回才執行）
type:表示服務器端返回的數據類型（jQuery會根據指定的類型自動轉換），常用的返回類型：text、json、html等
3、$.ajax({option1:value1,option2:value2......});
常用的option如下：
async:是否異步，默認是true代表異步
data:發送到服務器的參數，建議使用json格式
dataType:服務器端返回的數據類型，常用的text和json
success:成功響應執行的函數，對應的類型是function類型
type:請求方式，POST/GET
url:請求服務器端的地址
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function fn() {
$.get(
//url地址
"/web13/JqueryAjax",
//data數據
{
"name" : "小紅",
"age" : 18
},
//回調函數
function(data) {
alert(data.name)
},
//數據格式
"json"
);
}
function fn1() {
$.get(
//url地址
"/web13/JqueryAjax",
//data數據
{
"name" : "小紅",
"age" : 18
},
//回調函數
function(data) {
alert(data.name)
},
//數據格式
"json"
);
}
function fn2() {
$.ajax({
url : "/web13/JqueryAjax",
async : true,
type : "post",
data : {
"name" : "小紅",
"age" : 18
},
success : function(data) {
alert(data.name);
},
error : function() {
alert("請求無效");
},
dataType : "json"
});
}
</script>
</head>
<body>
<input type="button" value="GET方式異步請求服務器" onclick="fn()">
<input type="button" value="POST方式同步請求服務器" onclick="fn1()">
<input type="button" value="ajax請求服務器" onclick="fn2()">
</body>
</html>
javascript jquery 用法
jquery需要引入一個js文件 並且這個js文件是在所有js代碼之前
找標簽：
js： document.getElement... dom對象
document.getElementById("name");
jquery: $(選擇器) jquery對象
$("#name");
jquery對象和js對象轉換
jquery=》js
$('.ddd') => $('.ddd').get(0) || $('.ddd')[0]
js=》jquery var dom = document.getElementById('ddd')
$(dom)
操作內容
js: dom代表js對象 dom=document.getElementById("name");
表單 ：dom.value
非表單：dom.innerHTML
jquery： $ 代表jquery對象 $=$("name");
表單： $.val(); $.val('修改之后的值');
非表單： $.html(); $.html('修改之后的值'); $.text();
操作屬性；
js：
dom.setAttribute(屬性名，屬性值);
dom.getAttribute(屬性名);
jquery
$.attr(屬性名,屬性值);
$.attr(屬性名);
$.attr({屬性名:屬性值 , 屬性名:屬性值 });
操作樣式
js：
dom.style.樣式
jquery:
$.css(屬性名,屬性值);
$.css(屬性名);
事件：
js： dom.addListeneradfalsdujfaskdjf
dom.onclick=function(){
}
jquery:
$.click(function(){
})