ajax、json
阿新 • • 發佈：2021-02-01
技術標籤：小知識
ajax、json
一：AJAX的特點：
（1）優點：
- 可以無需重新整理頁面與伺服器端進行通訊
- 允許你根據使用者事件來更新部分頁面內容
（2）缺點：
- 沒有瀏覽歷史，不能回退
- 存在跨域問題（同源）
- SEO不友好
二：原生ajax案例
（1）判斷使用者名稱是否可用前臺
//add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用者新增實現</ （2）判斷使用者名稱是否可用後臺
@WebServlet("/CheckNameServlet")
public class CheckNameServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//解決響應的中文亂碼問題
resp.setContentType("text/html;charset=utf-8");
//接受前臺傳遞的引數
String zh = req.getParameter("zh");
//處理判斷資料
boolean flag = false;
if ("zjl".equals(zh)){
flag = true;
}
//根據響應的結果給使用者做出響應
if (flag){
resp.getWriter().print("使用者名稱被佔用");
}else {
resp.getWriter().print("使用者名稱可用");
}
}
}
拓展：
@WebServlet註解用於標註在一個繼承了HttpServlet類之上，屬於類級別的註解。
用法形如：
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet{
//處理 GET 方法請求的方法
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
//處理POST方法請求的方法
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
}
該註解的作用等價於 在web.xml中配置的該servlet的元素中的配置
原生ajax傳送post請求
<script type="text/javascript">
var xhr;
function checkZh(){
var val = document.getElementById("zh").value;
if (val==""||val==null){
document.getElementById("zh_span").innerText="X 賬號不能為空";
}else {
//傳送ajax請求
//1.建立XMLHttpRequest物件（解決瀏覽器之間的差異）
if (window.ActiveXObject){
xhr = new ActiveXObject("Microsoft XMLHTTP");
}else {
xhr = new XMLHttpRequest();
}
//2.和伺服器建立連線
//第一個引數：提交方式。第二個引數：提交地址。第三個引數：是否為非同步。
//post請求方式
xhr.open("post","CheckNameServlet",true);
//post方式提交資料，需要設定請求頭為普通文字資料提交
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.執行回撥函式
xhr.onreadystatechange=process;
//4.傳送資料,get方式傳送資料就寫null,因為引數已經依附在了地址後面
xhr.send("zh="+val);
}
}
function process(){
//狀態碼為4時，才有接收響應資料的必要
if (xhr.readyState==4){
if (xhr.status==200){
//接受響應資料
var text = xhr.responseText;
document.getElementById("zh_span").innerText=text;
}else if(xhr.status==404){
alert("資源找不到");
}else if (xhr.status==500){
alert("ajax請求失敗");
}
}
}
</script>
三：回撥函式多次被呼叫問題
（1）XMLHTTPRequest的幾種狀態
0：請求沒有發出（在呼叫open()之前）
1：請求已經建立但是還沒有發出（呼叫send()之前）
2：請求已經發出正在處理之中（這裡通常可以從響應的內容頭部）
3：請求已經處理，響應中有資料可用，但是伺服器還沒有完成響應
4：響應已經完成，可以訪問伺服器並使用他
在AJAX中有以上五種狀態，但是通常只使用狀態4。
status代表響應狀態碼：
200
400
四：響應格式之JSON物件
（1）方式一——更改toString()方法
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
var xhr;
function change1(){
//1.建立XML物件
xhr = new XMLHttpRequest();
//2.和伺服器建立連線
xhr.open("get","AjaxResponseText",true);
//3.執行回撥函式
xhr.onreadystatechange=process;
//4.傳送資料
xhr.send(null);
}
function process(){
if (xhr.readyState==4&&xhr.status==200){
//Student{sid=1, sname='zs', sex='男'}
var text = xhr.responseText;
eval("var json="+text)
console.log(json.sname);
}
}
</script>
</head>
<body>
<button onclick="change1()">JSON</button>
</body>
</html>
@WebServlet("/AjaxResponseText")
public class AjaxResponseText extends HttpServlet {
/**
* 響應的資料格式
* 1.普通文字
* 2.JSON格式
（1）更改Student類的toString()方法
@Override
public String toString() {
return "Student{" +
"sid:" + sid +
", sname:'" + sname + '\'' +
", sex:'" + sex + '\'' +
'}';
}
（2）eval("var json="+text)
* 3.XML格式
*/
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//響應的資料格式之普通文字
//resp.getWriter().print("bjset");
/**********響應資料之JSON************/
//模擬查詢操作
Student student = new Student(1,"zs","男");
resp.getWriter().print(student);
System.out.println(student);
}
}
（2）方式二——手動拼接json字串
（3）獲得JSON格式之GSON依賴（最佳）
@WebServlet("/AjaxResponseText")
public class AjaxResponseText extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//響應的資料格式之普通文字
//resp.getWriter().print("bjset");
/**********響應資料之JSON************/
//模擬查詢操作
Student student = new Student(1,"zs","男");
//gson依賴方式
//1.建立Gson物件
Gson gson = new Gson();
String json = gson.toJson(student);
resp.getWriter().print(json);
System.out.println(json);
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
var xhr;
function change1(){
//1.建立XML物件
xhr = new XMLHttpRequest();
//2.和伺服器建立連線
xhr.open("get","AjaxResponseText",true);
//3.執行回撥函式
xhr.onreadystatechange=process;
//4.傳送資料
xhr.send(null);
}
function process(){
if (xhr.readyState==4&&xhr.status==200){
var text = xhr.responseText;
//方式一：通用的
//eval("var json="+text)
//方式二：一定需要注意：下面這一方式中json中key必須使用引號引出來
var json = JSON.parse(text);
console.log(json.sname);
}
}
</script>
</head>
<body>
<button onclick="change1()">JSON</button>
</body>
</html>
五：JSON更多格式的獲得
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
var xhr;
function change1(){
//1.建立XML物件
xhr = new XMLHttpRequest();
//2.和伺服器建立連線
xhr.open("get","AjaxResponseText",true);
//3.執行回撥函式
xhr.onreadystatechange=process;
//4.傳送資料
xhr.send(null);
}
function process(){
if (xhr.readyState==4&&xhr.status==200){
var text = xhr.responseText;
//方式一：通用的
//eval("var json="+text)
//方式二：一定需要注意：下面這一方式中json中key必須使用引號引出來
var json = JSON.parse(text);
for (var i in json){
console.log(json[i].sid);
}
}
}
</script>
</head>
<body>
<button onclick="change1()">JSON</button>
</body>
</html>