1.簡述 AJAX(Asynchronous Javascript And XML),是一個局部刷新技術,即網頁不需要重新載入,只進行部分更新即可 例如:視頻彈幕,點贊,登錄驗證... 2.JavaScript原生AJAX 步驟: 1.創建XMLHttpRequest核心對象; var 變數名 = ...
1.簡述
AJAX(Asynchronous Javascript And XML),是一個局部刷新技術,即網頁不需要重新載入,只進行部分更新即可
例如:視頻彈幕,點贊,登錄驗證...
2.JavaScript原生AJAX
步驟:
1.創建XMLHttpRequest核心對象;
var 變數名 = new XMLHttpReques();
2.使用核心對象打開請求;
變數名.open(參數一,參數二,參數三);
參數一:數據提交方式(get或者post)
參數二:請求地址
參數三:是否非同步(true[預設]非同步,false)
3.使用核心對象發送請求;
變數名.send();
4.接收數據.
變數名.onreadystatechange = function(){...}
代碼示例:
html:
<script type="text/javascript"> function jsajax(){ var xhr = new XMLHttpRequest(); xhr.open("post","JsAjax",true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ var i = xhr.responseText; document.getElementById("msg").innerText=i; } } } </script> </head> <body> jsajax:<span id="msg"></span> <br> <button onclick="jsajax()">點我有驚喜</button> </body> </html>
java
//因為ajax可以獲取響應主題的內容,所以採用PrintWriter返回數據
PrintWriter writer = response.getWriter(); writer.print("JS原生AJAX");
原生AJAX使用起來十分麻煩,一般只需要瞭解即可,更多的是使用下麵JQ版的AJAX.
3.JQuery版AJAX
JQuery版AJAX有三種寫法,下麵一一介紹這三種寫法
第一種:
$.ajax({
url:"請求路徑",
data:{"鍵名1":值1,"鍵名2":值2,"鍵名3":值3......},
type:"提交方式get/post",
dataType:"返回數據格式",(常用:text,json)
async:true/false,
success:function(){},
error:function(){}
})
url:請求路徑;data:請求數據;type:數據請求方式;dataType:返回數據格式;async:是否非同步;success:執行成功執行本函數;error:執行失敗執行本函數
代碼示例:
$.ajax({ url:"JQAjax", data:{"name":"李四","age":24}, type:"post", dataType:"text", async:true, success:function(obj){ $("#msg").text(obj); } })
第二種&第三種:
第二種和第三種是將提交方式分解出來,$.get()和$.post()內容基本一致
$.get(
"請求路徑",(對應第一種方式url)
{"鍵名1":值1,"鍵名2":值2,"鍵名3":值3......},(對應data)
function(){},(對應success:function(){})
"返回數據格式"(對應dataType)
)
$.post(
"請求路徑",
{"鍵名1":值1,"鍵名2":值2,"鍵名3":值3......},
function(){},
"返回數據格式"
)
代碼示例:
$.get(
"JQPostAjax",
{"name":"張三","age":23},
function(obj){
$("#msg").text(obj);
},
"text"
);
$.post(
"JQPostAjax",
{"name":"張三","age":23},
function(obj){
$("#msg").text(obj);
},
"text"
);
4.json
- 概述:json是一種有格式的字元串,是輕量級的數據傳輸方式.
json數據格式(三種)
1.數組
[值1,值2,值3......]
值的數據類型隨意
2.對象
{"鍵名1":值1,"鍵名2":"值2"......}
3.混合模式
[{對象1},{對象2},{對象3}.....]
{[數組1],[數組2],[數組3]......}
這裡只是簡單敘述了混合模式的兩種寫法,實際寫法並不固定,只要嵌套正確({}和[]交替使用),就OK.
例如:
{
"zone":"boss",
"persons":[
{"name":"張三","age":23,"sroce":[98,99,100]},
{"name":"李四","age":24,"sroce":[87,87,87]},
{"name":"王五","age":25,"sroce":[76,876,65]}
]
}
5.jackson
作用:jackson將數組,集合,對象...轉換成json格式
使用方式:
1.創建ObjectMapper對象
ObjectMapper 對象名 = new ObjectMapper();
2.將指定的數據轉化為json
String 變數名 = 對象名.writeValueAsString("指定的數據");
代碼示例:
Student s1 = new Student("張三", 23, new int[]{93,94,95}); Student s2 = new Student("李四", 24, new int[]{94,95,96}); Student s3 = new Student("王五", 25, new int[]{95,96,97}); Student s4 = new Student("趙六", 26, new int[]{96,97,98}); Student s5 = new Student("孫七", 27, new int[]{97,98,99}); List<Student> students = new ArrayList<Student>(); students.add(s1); students.add(s2); students.add(s3); students.add(s4); students.add(s5); //轉化為json /* * 1.創建ObjectMapper對象 * 2.使用writeValueAsString將數據轉化為json格式 */ ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(students); response.setContentType("text/html;charset=utf-8"); PrintWriter writer = response.getWriter(); writer.print(json);
