當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

大话Ajax，详解~

發布時間：2023/12/16 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了大话Ajax，详解~ 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Ajax

本節源碼???kt5z

XMLHttpRequest對象

???????XMLHttpRequest 是瀏覽器接口對象，該對象的 API 可被JavaScript、VBScript 以及其它web 瀏覽器內嵌的腳本語言調用，通過 HTTP 協議在瀏覽器和 web 服務器之間收發 XML 或其它數據。XMLHttpRequest 可以與服務器實現異步交互，而無需讓整個頁面刷新，因此成為Ajax編程的核心對象。

Ajax的使用步驟

創建 XMLHttpRequest 對象

var xhr = new XMLHttpRequest();

給定請求方式以及請求地址

xhr.open("get","http://www.baidu.com");

發送請求

xhr.send();

獲取服務器端給客戶端的響應數據

xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 2000){document.getElementById("span").innerHTML = xhr.readyState;alert(xhr.readyState);}}

好了，我們先來用實際代碼來感受一下Ajax

先編寫一個Servlet

@WebServlet("/alvin/MyServlet") public class MyServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {PrintWriter writer = response.getWriter();writer.println("hello Ajax");writer.flush();writer.close();} }

Jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html><head><title></title><base href="<%=request.getContextPath()+"/"%>"></head><body><script type="text/javascript">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MyServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);document.getElementById("span").innerHTML = xhr.responseText;}}}</script><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

JSON

???????JSON(JavaScriptObjectNotation) 是一種基于字符串的輕量級的數據交換格式。易于人閱讀和編寫，同時也易于機器解析和生成。JSON是 JavaScript數據類型的子集。

???????在 JSON 未出現之前在 Ajax 中對于數據傳遞方式，會使用 XML 作為主要數據格式來傳輸數據。直到 JSON 出現后逐漸放棄使用 XML 作為數據傳輸格式。JSON 比 XML 更小、更快，更易解析。

JSON的語法規則

???????JSON是按照特定的語法規則所生成的字符串結構。

???????大括號表示JSON 的字符串對象。{}

???????屬性和值用冒號分割。{"屬性":"value"}

???????屬性和屬性之間用逗號分割。{"屬性":"value","屬性":"value",...}

???????中括號表示數組。[{"屬性":"value"...},{"屬性":"value"...}]

Json

{“userid”:1,“username”:“admin”,“sex”:“male”}

數組

[{“userid”:1,“username”:“admin”},{“userid”:2,“username”:“oldlu”}]

Josn六種數據類型

???????string：字符串，必須要用雙引號引起來。

???????number：數值，與JavaScript的number 一致。

???????object：JavaScript的對象形式，{key:value}表示方式，可嵌套。

??????? array：數組，JavaScript的Array表示方式[value]，可嵌套。

??????? true/false：布爾類型，JavaScript 的boolean 類型。

??????? null：空值，JavaScript的null。

Jackson的使用

???????在JDK中并沒有內置操作,JSON格式數據的API,因此使用處理JSON格式的數據需要借助第三方類庫

幾個常用的類庫

???????Gson: 谷歌開發的 JSON 庫，功能十分全面。

???????FastJson: 阿里巴巴開發的 JSON 庫，性能十分優秀。

???????Jackson: 社區十分活躍且更新速度很快。被稱為“最好的Json 解析器”

Jeson下載地址

https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations

https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core

https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind

在響應中使用 Jackson處理 JSON格式數據的步驟：

???????添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar

???????通過 jacksonAPI將 Java對象轉換 JSON格式

???????修改響應頭，響應類型為application/json

???????將結果基于字符輸出流推回客戶端瀏覽器

???????在頁面的中通過JavaScript的JSON.parse()函數將JSON格式的數據轉換為JavaScript對象

通過Json格式在響應中傳遞單個對象

我們先建一個User實體類,用于后面的操作

public class User {private int userid;private String username;}//get set那些就不在文章里面寫了 @WebServlet("/alvin/Single") public class SingleObjectServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//創建User對象User user = new User();user.setUserid(1);user.setUsername("alvin");//使用Jackson的APL將User對象轉化為JSON格式的字符串對象ObjectMapper objectMapper = new ObjectMapper();//將User對象轉換為JSON格式對象String string = objectMapper.writeValueAsString(user);//設置相應類型為application/jsonresponse.setContentType("application/json");PrintWriter writer = response.getWriter();writer.println(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的單個對象響應</title> </head> <body><script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/Single");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通過javaScript的內置對象JSON中的parse函數將JSON格式的字符串對象轉換成JavaScirpt對象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}}</script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

如果是多個對象呢?用List試試吧~

@WebServlet("/alvin/MoreObjectServlet") public class MoreObjectServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//創建第一個對象User user1 = new User(1,"張三");//創建第二個對象User user2 = new User(2,"alvin");//將多個對象放入到集合中List<User>list = new ArrayList<User>();list.add(user1); list.add(user2);//通過jackson將List轉換為JSON格式的字符串對象ObjectMapper objectMapper = new ObjectMapper();String string = objectMapper.writeValueAsString(list);System.out.println(string);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的多個對象響應</title> </head> <body> <script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MoreObjectServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通過javaScript的內置對象JSON中的parse函數將JSON格式的字符串對象轉換成JavaScirpt對象var parse = JSON.parse(xhr.responseText);var temp = "";for(var i = 0; i < parse.length; i++){alert(parse[i].userid + " " + parse[i].username);temp += parse.userid + "<br/>" + parse.username;;}document.getElementById("span").innerHTML = temp;}}} </script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

Ajax在JSON中通過Map傳遞數據

@WebServlet("/alvin/MapModelServlet") public class MapModelServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {Map<String,Object> map = new HashMap<String, Object>();map.put("userid",1);map.put("username","alvin");ObjectMapper objectMapper = new ObjectMapper();String string = objectMapper.writeValueAsString(map);System.out.println(string);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title></title> </head> <body> <script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MapModelServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText);//通過javaScript的內置對象JSON中的parse函數將JSON格式的字符串對象轉換成JavaScirpt對象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}} </script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

???????在 JSON 格式中可以直接使用 Map 作為傳遞數據的模型。因為 Map 結構本身就是 key與value的結構與JSON 格式對象模型完全匹配，所以我們可以直接將一個Map 對象轉換為JSON 格式的字符串對象。這對于我們來說是一件非常方便的事情，如果我們返回的數據并沒有對應的模型來存放數據，那么我們可以通過Map 來解決。

在請求中通過JSON格式傳遞數據

???????我們除了可以在響應中通過 JSON 格式來傳遞數據以外，在請求中也可以使用 JSON 格式傳遞數據。如果在請求中使用 JSON 格式傳遞數據，那么提交方式需要使用 POST 方式，通過 JavaScript 中的 JSON.stringify()函數將 JavaScript 對象轉換為 JSON 格式數據。通過 send方法將參數傳遞到 Servlet中，在 Servlet 中通過字符輸入流獲取 JSON格式數據。

@WebServlet("/alvin/RequestJosnServlet") public class RequestJosnServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//通過字符輸入流從請求體中獲取提交的JSON格式的數據String string = request.getReader().readLine();//使用Jackson將JSON格式的字符串對象轉換成Java對象ObjectMapper objectMapper = new ObjectMapper();User user = objectMapper.readValue(string,User.class);System.out.println(user.getUserid() + " " + user.getUsername());response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(user);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的單個對象響應</title> </head> <body> <script type="text/javascript" charset="UTF-8">function but() {var id = document.getElementById("userid").value;var name = document.getElementById("username").value;var obj = {userid:id,username:name};var content = JSON.stringify(obj);var xhr = new XMLHttpRequest();xhr.open("post","alvin/Single");//發送xhr.send(content);alert(content);xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通過javaScript的內置對象JSON中的parse函數將JSON格式的字符串對象轉換成JavaScirpt對象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}} </script>ID<input name="userid" id="userid"/><br/>姓名<input name="username" id="username"/><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

Jackson的常用注解

@JsonProperty

???????此注解用于屬性上，作用是把該屬性的名稱序列化為另外一個名稱，如把username屬性序列化為name，@JsonProperty("name")。

@JsonIgnore

???????此注解用于屬性或者方法上（一般都是定義在屬性上），用來完全忽略被注解的字段和方法對應的屬性，返回的json數據即不包含該屬性。

@JsonFormat

???????此注解用于屬性或者方法上（一般都是定義在屬性上），可以方便的把 Date類型屬性的值直接轉化為我們想要的樣式。如：@JsonFormat(pattern="yyyy-MM-ddhh:mm:ss")

Jackson工具類

package com.alvin.util;import java.util.List;import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.JavaType; import com.fasterxml.jackson.databind.ObjectMapper;/*** JSON轉換工具類*/ public class JsonUtils {// 定義jackson對象private static final ObjectMapper MAPPER = new ObjectMapper();/*** 將對象轉換成json字符串。* <p>Title: pojoToJson</p>* <p>Description: </p>* @param data* @return*/public static String objectToJson(Object data) {try {String string = MAPPER.writeValueAsString(data);return string;} catch (JsonProcessingException e) {e.printStackTrace();}return null;}/*** 將json結果集轉化為對象* * @param jsonData json數據* @param clazz 對象中的object類型* @return*/public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {try {T t = MAPPER.readValue(jsonData, beanType);return t;} catch (Exception e) {e.printStackTrace();}return null;}/*** 將json數據轉換成pojo對象list* <p>Title: jsonToList</p>* <p>Description: </p>* @param jsonData* @param beanType* @return*/public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);try {List<T> list = MAPPER.readValue(jsonData, javaType);return list;} catch (Exception e) {e.printStackTrace();}return null;}}

Jquery的$ajax方法的使用

$.ajax()使用

???????在JQuery 中提供了對Ajax 的封裝，讓我們在使用Ajax技術時變得更加容易。在 JQuery中提供了很多的基于Ajax發送異步請求的方法,如：$.ajax()、$.get()、$.post()、$.getJSON()。

@WebServlet("/alvin/jqueryAjaxServlet") public class jqueryAjaxServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {PrintWriter writer = response.getWriter();writer.print("hello Jquery Ajax");writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {$.ajax({type:"post",url:"alvin/jqueryAjaxServlet",success:function (result) {$("#span").html(result);}});}</script> </head> <body><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

$.ajax()中提交數據

???????在 data 屬性中我們可以通過兩種方式來指定需要提交的數據。一種是通過name=value&name=value 的結構。另一種是通過 JavaScript 對象來指定提交數據。無論使用哪種方式在Servlet 中都是通過request.getParameter 方法根據 name獲取 value的。

@WebServlet("/alvin/DataServlet") public class DataServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userId = request.getParameter("id");String userName = request.getParameter("name");PrintWriter writer = response.getWriter();writer.print(userId + " " + userName);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/DataServlet",data:"id=" + userid + "&name=" + username,success:function (result) {$("#span").html(result);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

提交JSON格式數據

???????在$.ajax()中提交 JSON格式的數據需要使用 post方式提交，通過 JSON.stringify()函數將JavaScript對象轉換成JSON 格式的字符串。在Servlet 中通過字符輸入獲取提交的 JSON格式的數據。

@WebServlet("/alvin/JSONServlet") public class JSONServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String string = request.getReader().readLine();PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/JSONServlet",data:JSON.stringify({id:userid,name:username}),success:function (result) {$("#span").html(result);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

$.ajax()處理響應中的JSON格式數據

???????$.ajax()方法會根據 dataType 屬性中的值自動對響應的數據做類型處理。如果響應的是一個 JSON 格式的數據，那么 dataType 的值為“JSON”,在回調函數中我們得到的直接就是JSON字符串轉換完的 JavaScript對象。不需要在使用JSON.parse()做格式的轉換處理。

@WebServlet("/alvin/JSONConnverServlet") public class JSONConnverServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("application/json");String string = request.getReader().readLine();PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/JSONConnverServlet",dataType:"json",data:JSON.stringify({id:userid,name:username}),success:function (result) {alert(result.id + " " + result.name);$("#span").html(result.id + " " + result.name);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

$.get()的使用

???????$.get()方法是$.ajax()方法基于 get方式發送異步請求的簡化版。

語法結構

???????$.get(url,function(result))

???????$.get(url,data,function(result))

通過標準格式指定提交數據

???????$.get(url,”name=value&name=value”,function(result))

通過JavaScript對象指定提交數據

???????$.get(url,{userid:1,username:”oldlu”,......},function(result))

這里面使用的的還是DataServlet,前面寫過了

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.get("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {$("#span").html(result);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

$.post()的使用

???????$.post()方法是$.ajax()方法基于 post方式發送異步請求的簡化版。

語法結構

???????$.post(url,function(result))

???????$.post(url,data,function(result))

通過標準格式指定提交數據

???????$.post(url,”name=value&name=value”,function(result))

通過JavaScript對象指定提交數據

???????$.post(url,{userid:1,username:”oldlu”,......},function(result))

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.post("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {$("#span").html(result);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

$.getJSON()的使用

???????$.getJSON()方法是$.ajax()方法基于 get 方式發送異步請求，并將響應結果中 JSON 格式的字符串對象自動轉換為 JavaScript 對象。在使用該方法時要求返回的數據必須是 JSON 格式類型。$.getJSON()方法和resp.setContentType(“application/json”)是一起使用的。

語法結構

???????$.getJSON(url,function(result))

???????$.getJSON(url,data,function(result))

通過標準格式指定提交數據

???????$.getJSON(url,”name=value&name=value”,function(result))

???????要求返回的數據格式必須是 JSON格式。

通過JavaScript對象指定提交數據

???????$.getJSON(url,{userid:1,username:”oldlu”,......},function(result))

???????要求返回的數據格式必須是 JSON格式。

@WebServlet("/alvin/GetJSONServlet") public class GetJSONServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userId = request.getParameter("id");String userName = request.getParameter("name");Map<String,String> map = new HashMap<String, String>();map.put("userid",userId);map.put("username",userName);//使用前面寫的工具類String string = JsonUtils.objectToJson(map);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.getJSON("alvin/GetJSONServlet","id=" + userid + "&name=" + username,function (result) {//根據map的鍵alert(result.userid + " " + result.username)$("#span").html(result.userid + " " + result.username);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

serialize()方法的使用

???????將form表單中的數據自動拼接成 name=value&name=value結構。

語法結構

???????varparam=$(“form”).serialize();

???????param的值為：name=value&name=value

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var param = $("#form").serialize();$.ajax({type:"post",url:"alvin/DataServlet",data:param,success:function (result) {$("#span").html(result);}});}</script></head><body><form id="form">ID:<input type="text" name="id" id="userid"/><br/>姓名:<input type="text" name="name" id="username"/><br/></form><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

總結

以上是生活随笔為你收集整理的大话Ajax，详解~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Hulu校招补录已开始，1年内工作经验也
下一篇：【EXLIBRIS】名副其实