JavaEE笔记：第十九次课之AJAX
生活随笔
收集整理的這篇文章主要介紹了
JavaEE笔记：第十九次课之AJAX
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
JAVAEE筆記：JavaEE筆記：第十九次課——AJAX
- 概念ajax
- 應(yīng)用格式
- 最基本的應(yīng)用
- GET 還是 POST？
- 使用jQuery的ajax
概念ajax
AJAX需要的掌握的前置知識(shí)：
JavaScript Xmlhttp協(xié)議 服務(wù)器端Web開發(fā)語言(asp、jsp、php…)
AJAX（Asynchronous JavaScript and XML）異步j(luò)s技術(shù)。
- 其實(shí)是多種技術(shù)的綜合，包括 Javascript, XHTML和 CSS DOM XML 和 XSTL XMLHttpRequest。
- 其使用 XHTML和 CSS標(biāo)準(zhǔn)化呈現(xiàn)，使用 DOM 實(shí)現(xiàn)動(dòng)態(tài)顯示和交互，使用 XML和 XSTL進(jìn)行數(shù)據(jù)交換與處理，使用
XMLHttpRequest 對(duì)象進(jìn)行異步數(shù)據(jù)讀 Javascript 綁定和處理所有數(shù)據(jù) 。 - 因?yàn)槠胀撁嫠⑿乱淮伪仨毾蚍?wù)器請(qǐng)求全部的頁面;如果使用異步請(qǐng)求,每次可以向服務(wù)器請(qǐng)求很少量的需要更新的數(shù)據(jù),這樣可以減輕服務(wù)器的負(fù)擔(dān),
- 好處：可以在不刷新頁面的情況和服務(wù)器通信
應(yīng)用格式
最基本的應(yīng)用
<%@ page contentType="text/html;charset=UTF-8" %> <html> <head><title>Get請(qǐng)求</title> </head> <body> <button "ajaxonclick()">點(diǎn)擊</button></body> <script>function ajaxonclick() {//1.創(chuàng)建異步對(duì)象var ajax = new XMLHttpRequest();//2.設(shè)置請(qǐng)求的參數(shù)url，第一個(gè)是請(qǐng)求的類型get/post，第二個(gè)是請(qǐng)求的地址ajax.open('get','http://localhost:8080/GetServlet');//3.發(fā)送請(qǐng)求ajax.send();//4.注冊(cè)事件，狀態(tài)一變就會(huì)調(diào)用ajax.onreadystatechange = function () {//請(qǐng)求成功if (ajax.readyState===4&&ajax.status===200) {alert(ajax.responseText);//輸入相應(yīng)的內(nèi)容}}} </script> </html>往servlet里面加輸出語句測(cè)試，但是一旦使用ajax，重定向和轉(zhuǎn)發(fā)都會(huì)失效
@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 更簡(jiǎn)單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
使用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>動(dòng)態(tài)生成表格</title> </head> <body><div style="text-align: center;"><input type="button" value="提交" "ajaxSubmit()"><div></div></div></body> <script>function ajaxSubmit() {//獲取輸入框的值，然后放在ajax的參數(shù)里面var nameVal = $("input[name=name]").val();var phoneVal = $("input[name=phone]").val();//ajax提交數(shù)據(jù)var arr = [{"id":1,"name":"id1"},{"id":2,"name":"id2"}];//動(dòng)態(tài)生成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>";//添加到某個(gè)標(biāo)簽里面$("div").html(table);}</script> </html>引用
百度百科
國科學(xué)院
總結(jié)
以上是生活随笔為你收集整理的JavaEE笔记：第十九次课之AJAX的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于DWM1000模块开发UWB系统进行
- 下一篇： Java输入输出流体系