JavaEE笔记：第十九次课之AJAX
生活随笔
收集整理的這篇文章主要介紹了
JavaEE笔记：第十九次课之AJAX
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JAVAEE筆記：JavaEE筆記：第十九次課——AJAX
- 概念ajax
- 應用格式
- 最基本的應用
- GET 還是 POST？
- 使用jQuery的ajax
概念ajax
AJAX需要的掌握的前置知識：
JavaScript Xmlhttp協議 服務器端Web開發語言(asp、jsp、php…)
AJAX（Asynchronous JavaScript and XML）異步js技術。
- 其實是多種技術的綜合，包括 Javascript, XHTML和 CSS DOM XML 和 XSTL XMLHttpRequest。
- 其使用 XHTML和 CSS標準化呈現，使用 DOM 實現動態顯示和交互，使用 XML和 XSTL進行數據交換與處理，使用
XMLHttpRequest 對象進行異步數據讀 Javascript 綁定和處理所有數據 。 - 因為普通頁面刷新一次必須向服務器請求全部的頁面;如果使用異步請求,每次可以向服務器請求很少量的需要更新的數據,這樣可以減輕服務器的負擔,
- 好處：可以在不刷新頁面的情況和服務器通信
應用格式
最基本的應用
<%@ page contentType="text/html;charset=UTF-8" %> <html> <head><title>Get請求</title> </head> <body> <button "ajaxonclick()">點擊</button></body> <script>function ajaxonclick() {//1.創建異步對象var ajax = new XMLHttpRequest();//2.設置請求的參數url，第一個是請求的類型get/post，第二個是請求的地址ajax.open('get','http://localhost:8080/GetServlet');//3.發送請求ajax.send();//4.注冊事件，狀態一變就會調用ajax.onreadystatechange = function () {//請求成功if (ajax.readyState===4&&ajax.status===200) {alert(ajax.responseText);//輸入相應的內容}}} </script> </html>往servlet里面加輸出語句測試，但是一旦使用ajax，重定向和轉發都會失效
@WebServlet("/GetServlet") public class GetServlet extends HttpServlet {protected void doPost(HttpServletRequest request , HttpServletResponse response) throws ServletException, IOException {}protected void doGet(HttpServletRequest request , HttpServletResponse response) throws ServletException, IOException {response.getWriter().print( "sssss" );} }GET 還是 POST？
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
使用jQuery的ajax
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><script type="text/javascript" src="/jquery.1.8.2.min.js"></script><title>動態生成表格</title> </head> <body><div style="text-align: center;"><input type="button" value="提交" "ajaxSubmit()"><div></div></div></body> <script>function ajaxSubmit() {//獲取輸入框的值，然后放在ajax的參數里面var nameVal = $("input[name=name]").val();var phoneVal = $("input[name=phone]").val();//ajax提交數據var arr = [{"id":1,"name":"id1"},{"id":2,"name":"id2"}];//動態生成var table = "<table><tr><td>ID</td><td>Name</td></tr>"//iquery的遍歷方法$.each(arr.function())$.each(arr,function (index) {table += "<tr><td>"+arr[index].id+"</td><td>"+arr[index].name+"</td></tr>"});//最后加上</table>table += "</table>";//添加到某個標簽里面$("div").html(table);}</script> </html>引用
百度百科
國科學院
總結
以上是生活随笔為你收集整理的JavaEE笔记：第十九次课之AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于DWM1000模块开发UWB系统进行
- 下一篇： java美元兑换,（Java实现） 美元