javascript
34、JS/AJAX
?
1）回顧JS中核心內(nèi)容
2）了解WEB1.0和WEB2.0時(shí)代的技術(shù)與特點(diǎn)
3）理解AJAX的產(chǎn)生背景、工作原理與特點(diǎn)
4）掌握AJAX常用API及應(yīng)用
?
聲明：服務(wù)端使用Servlet技術(shù)
?
?
一）什么是JavaScript【以下簡(jiǎn)稱(chēng)JS】
??? JS是
?? （1）基于對(duì)象
??????? JS本身就有一些現(xiàn)成的對(duì)象可供程序員使用，例如：Array，Math，String。。。
??????? JS并不排除你可以自已按一定的規(guī)則創(chuàng)建對(duì)象
?? （2）事件驅(qū)動(dòng)
??????? JS代碼寫(xiě)好后，需要外界觸發(fā)后，方可運(yùn)行，例如：單擊事件，定時(shí)執(zhí)行，。。。
?? （3）解釋性
?????????? ??? 每次運(yùn)行JS代碼時(shí)，得需要將原代碼一行一行的解釋執(zhí)行
??????? 相對(duì)編譯型語(yǔ)言（例如：Java、C++）執(zhí)行速度相對(duì)較慢
?? （4）基于瀏覽器的動(dòng)態(tài)交互網(wǎng)頁(yè)技術(shù)
?????????? ??? 如果JS嵌入到HTML中，可以不需要服務(wù)器支持，直接由瀏覽器解釋執(zhí)行
?????????? ??? 如果JS嵌入到JSP或Servlet中，必需要服務(wù)器支持，直接由瀏覽器解釋執(zhí)行
?? （5）嵌入在HTML標(biāo)簽中
?????????? ??? JS必須嵌入到一個(gè)名叫<script src="引入外部js文件"></script>的標(biāo)簽中，方可運(yùn)行
??? 腳本語(yǔ)言
?
?
二）JS中的三種類(lèi)型
?? （1）基本類(lèi)型：number，string，boolean
??????? number包含正數(shù)，負(fù)數(shù)，小數(shù)
?????????? ??? string由''或""定界
???????????????????? boolean由true或false，但js中的boolean也包含更多情況，例如：存在表示true，不存在表示false
| ?????? var num = 100; ?????? var str = "哈哈"; ?????? var flag = false; ?????? window.alert(num); ?????? window.alert(str); ?????? window.alert(flag); |
?
?? （2）特殊類(lèi)型：null，undefined
?????????? ??? null表示一個(gè)變量指向null
?????????? ??? undefined表示一個(gè)變量指向的值不確定
| ?????? var array = null; ?????? var student; ?????? alert(array); ?????? alert(student); |
?
?? （3）復(fù)合類(lèi)型：函數(shù)，對(duì)象，數(shù)組
?????????? ??? 對(duì)象包含內(nèi)置對(duì)象和自定義的對(duì)象
?
?
三）JS中有三種定義函數(shù)的方式
?? （1）正常方式：function mysum(num1,num2){return num1+num2;}
| ??????? function mysum(num1,num2){ ?????????? return num1 + num2; ?????? } ?????? var myresult = mysum(100,200); ?????? alert("myresult="+myresult); |
?
?? （2）構(gòu)造器方式：new Function("num1","num2","return num1+num2;")
| ?????? var youresult = new Function("num1","num2","return num1+num2"); ?????? alert( youresult(1000,2000) ); |
?
?? （3）直接量或匿名或無(wú)名方式：var mysum = function(num1,num2){return num1+num2;}
| var theyresult = function(num1,num2){ ???????????????????????? return num1 + num2;? ???????????????????? ?} ?????? alert( theyresult(10000,20000) ); |
?
?
四）JS中有四種對(duì)象
?? （1）內(nèi)置對(duì)象 ：Date，Math，String，Array，。。。
| ?????? var str = new Date().toLocaleString(); ?????? window.document.write("<font size='44' color='red'>"+str+"</font>"); |
?
?? （2）自定義對(duì)象：Person，Card，。。。?
| ?????? function Student(id,name,sal){ ?????????? //this指向s引用 ?????????? this.id = id; ?????????? this.name = name; ?????????? this.sal = sal; ?????? } ?????? var s = new Student(1,"波波",7000); ?????? document.write("編號(hào):" + s.id + "<br/>"); ?????? document.write("姓名:" + s.name + "<br/>"); ?????? document.write("薪水:" + s.sal + "<br/>"); |
?
?? （3）瀏覽器對(duì)象： window，document，status，location，history。。。
| function myrefresh(){ ???????????? window.history.go(0); ??????? } |
?
?? （4）ActiveX對(duì)象：ActiveXObject("Microsoft.XMLHTTP")，。。。
?
?
五）演示JS對(duì)象的屬性，方法和事件的使用
?? （1）window.location.href
| ?????????? var url = "04_array.html"; ?????????? window.location.href = url; |
?
?? （2）form.submit()
| <form action="/js-day01/04_array.html" method="POST"> ?????? <input type="button" value="提交到服務(wù)端" οnclick="doSubmit()"/> ??? </form> ??? <script type="text/javascript"> ?????? function doSubmit(){ ?????????? //表單提交 ?????????? document.forms[0].submit(); ?????? } ??? </script> |
?
?? （3）inputElement.onblur = 函數(shù)
?? （4）document.createElement(“img”)
?? （5）imgElement.style.width/height
?
?
六）回顧傳統(tǒng)Web應(yīng)用請(qǐng)求和響應(yīng)特點(diǎn)【顯示當(dāng)前時(shí)間】
?? （1）請(qǐng)求：瀏覽器以HTTP協(xié)議的方式提交請(qǐng)求到服務(wù)器
?? （2）響應(yīng)：服務(wù)器以HTTP協(xié)議的方式響應(yīng)內(nèi)容到瀏覽器
?????????? ????? ????注意：HTTP是WEB大眾化非安全協(xié)議??????? ???????
??????????????? HTTPS是WEB安全協(xié)議，是基于HTTP協(xié)議的，且加了一些加密等特殊功能，常用于在線支付，或者是需要安全性較高的網(wǎng)站中，例如：12306網(wǎng)站????????
?????????? ????? ????HTTP請(qǐng)求有三個(gè)部份組成：請(qǐng)求行，請(qǐng)求頭，請(qǐng)求體
?????????? ????? ????HTTP響應(yīng)有三個(gè)部份組成：響應(yīng)行，響應(yīng)頭，響應(yīng)體? ??????????????????????????????????????????
?? （3）狀態(tài)欄：有明顯的進(jìn)度條刷新現(xiàn)象，如果服務(wù)器響應(yīng)較慢的話，進(jìn)度條刷新也會(huì)變慢，IE9等中高版本瀏覽器，有明顯轉(zhuǎn)圈圈圖標(biāo)
?? （4）歷史欄：會(huì)收集原來(lái)已訪問(wèn)過(guò)的web頁(yè)面，進(jìn)行緩存
?? （5）缺點(diǎn)：不需變化的大量數(shù)據(jù)，也全部刷新，造成瀏覽器加載和處理負(fù)擔(dān)???
?? （6）可改進(jìn)的地方：讓不需變化的大量數(shù)據(jù)，原封不動(dòng)，不用緩存到歷史欄中，無(wú)需全部刷新，只刷新某些需要變化的數(shù)據(jù)區(qū)域，例如：當(dāng)前時(shí)間的區(qū)域
| ??? 當(dāng)前時(shí)間:<span>${requestScope.str}</span><br/> ??? <input type="button" value="同步方式提交"/> |
???????
| ??? <script type="text/javascript"> ?????? //定位button按鈕，同時(shí)添加單擊事件 ?????? document.getElementsByTagName("input")[0].onclick = function(){ ?????????? var url = "${pageContext.request.contextPath}/TimeServlet?id="+new Date().getTime(); ?????????? window.location.href = url; ?????? } ??? </script> |
???????
| public class TimeServlet extends HttpServlet { ??? public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { ?????? System.out.println("TimeServlet::doGet"); ?????? SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); ?????? String str = sdf.format(new Date()); ?????? request.setAttribute("str",str); ??? ??? request.getRequestDispatcher("/06_time.jsp").forward(request,response); ??? } } |
?
?
七）什么是AJAX【Asynchronous異步的JS和XML】，工作原理與特點(diǎn)
?? （1）什么是同步：
?????????? ??? 請(qǐng)求1->響應(yīng)1->請(qǐng)求2->響應(yīng)2->
??????? Web1.0時(shí)代
?
?? （2）什么是異步：
?????????? ??? 請(qǐng)求1->請(qǐng)求2->請(qǐng)求3->響應(yīng)1->響應(yīng)2->響應(yīng)3->
?????????? ??? 請(qǐng)求1->響應(yīng)1->請(qǐng)求2->請(qǐng)求3->響應(yīng)2->響應(yīng)3->
?????????? ??? Web2.0時(shí)代
??????? 項(xiàng)目中：Web1.0為主（整個(gè)瀏覽器刷新），Web2.0為輔（瀏覽器局部刷新）
?
?? （3）什么是AJAX
???????????????????? 客戶端（特指PC瀏覽器）與服務(wù)器，可以在【不必刷新整個(gè)瀏覽器】的情況下，與服務(wù)器進(jìn)行異步通訊的技術(shù)?????????
?????????? ??? 即，AJAX是一個(gè)【局部刷新】的【異步】通訊技術(shù)
?????????? ??? AJAX不是全新的語(yǔ)言，是2005年Google公司推出的一種全新【編程模式】，不是新的編程語(yǔ)言
?
?? （4）不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法有：
?????? （A）Flash/ActionScript
?????? （B）框架Frameset
?????? （C）iFrame（內(nèi)嵌入框架)
?????? （D）XMLHttpRequest(非IE瀏覽器)和ActiveXObject(IE瀏覽器)
?????????? ??? ?????背景：早上IE5時(shí)，微軟就開(kāi)發(fā)出了第一個(gè)異步通訊對(duì)象，叫ActiveXObject對(duì)象，
?????????? ?? ??????Firefox等其它瀏覽器廠商也慢慢引入異步通訊對(duì)象，叫XMLHttpRequest對(duì)象，
?????????? ??? ?????IE的高版本，也將這個(gè)異步對(duì)象取名叫XMLHttpRequest對(duì)象，但I(xiàn)E有向下兼容問(wèn)題，
???? ??? ?????也可以使用ActiveXObject對(duì)象。
????????????????????????????????? 無(wú)需第三方j(luò)ar包，現(xiàn)代中高版本瀏覽器中內(nèi)置了這個(gè)異步通訊對(duì)象，只需通過(guò)JavaScript就可以創(chuàng)建
???????????? ??? ????注意：所有瀏覽器中都內(nèi)置了異步對(duì)象，在默認(rèn)情況下，該異步對(duì)象并沒(méi)有創(chuàng)建出來(lái)
| function createAJAX(){ ??? var ajax = null; ??? try{ ?????? ajax = new ActiveXObject("microsoft.xmlhttp"); ??? }catch(e1){ ?????? ajax = new XMLHttpRequest(); ??? } ??? return ajax; } |
?
??????????
?? （5）AJAX工作原理
??????? 參見(jiàn)<<AJAX工作原理.JPG>>
?
?? （6）AJAX包含的技術(shù)
??????? 參見(jiàn)<<AJAX包含的技術(shù).JPG>>
?
?? （7）AJAX開(kāi)發(fā)步驟
?????????? ??? 步一：創(chuàng)建AJAX異步對(duì)象，例如：createAJAX()
??????? ??? 步二：準(zhǔn)備發(fā)送異步請(qǐng)求，例如：ajax.open(method,url)
?????????? ??? 步三：如果是POST請(qǐng)求的話，一定要設(shè)置AJAX請(qǐng)求頭，例如：ajax.setRequestHeader()
?????????? ????? ????如果是GET請(qǐng)求的話，無(wú)需設(shè)置設(shè)置AJAX請(qǐng)求頭
?????????? ??? 步四：真正發(fā)送請(qǐng)求體中的數(shù)據(jù)到服務(wù)器，例如：ajax.send()
步五：AJAX不斷的監(jiān)聽(tīng)服務(wù)端響應(yīng)的狀態(tài)變化，例如：ajax.onreadystatechange，后面寫(xiě)一個(gè)無(wú)名處理函數(shù)?????????
?????????? ??? 步六：在無(wú)名處理函數(shù)中，獲取AJAX的數(shù)據(jù)后，按照DOM規(guī)則，用JS語(yǔ)言來(lái)操作Web頁(yè)面???????
?
?? （8）AJAX適合用在什么地方
?????????? ??? AJAX【適合】不用來(lái)傳遞大量數(shù)據(jù)，而只用來(lái)【傳遞少量數(shù)據(jù)】，在用戶的【體驗(yàn)】上，【更加人性化】
?????????? ??? AJAX是一個(gè)和服務(wù)器無(wú)關(guān)的技術(shù)，即服務(wù)器可使用：JavaEE，.NET，PHP，。。。這些技術(shù)都可
?????????? ??? AJAX只管向服務(wù)器發(fā)送請(qǐng)求，同時(shí)只管接收服務(wù)器的HTML或XML或JSON載體響應(yīng)
??????? 服務(wù)端不能使用轉(zhuǎn)發(fā)或重定向到web頁(yè)面，因?yàn)檫@樣會(huì)起瀏覽器全面刷新
?????????? ??? 即只能以流的方式響應(yīng)給瀏覽器
?
?
八）AJAX應(yīng)用
?? （1）無(wú)需刷新整個(gè)Web頁(yè)面顯示服務(wù)器響應(yīng)的當(dāng)前時(shí)間
?（text/html;charset=UTF-8）
| ??? 當(dāng)前時(shí)間:<span></span><br/> ??? <input type="button" value="異步方式提交"/> |
?
| <script type="text/javascript"> ?????? //定位button按鈕，同時(shí)添加單擊事件 ?????? document.getElementsByTagName("input")[0].onclick = function(){ ?????????? //NO1)創(chuàng)建AJAX異步對(duì)象（每個(gè)瀏覽器內(nèi)置的，無(wú)需第三方j(luò)ar包） ?????????? var ajax = createAJAX();//0 ?????????? //NO2)AJAX異步對(duì)象準(zhǔn)備發(fā)送請(qǐng)求 ?????????? var url = "${pageContext.request.contextPath}/TimeServletAjax?id="+new Date().getTime(); ?????????? var method = "GET"; ?????????? ajax.open(method,url);//1 ?????????? //NO3）AJAX異步對(duì)象真正發(fā)送請(qǐng)求體的數(shù)據(jù)到服務(wù)器，如果請(qǐng)求體無(wú)數(shù)據(jù)的話，用null表示 ?????????? var content = null; ?????????? ajax.send(content);//2 ?????????? ?????????? //----------------------------------------等待 ?????????? ?????????? //NO4）AJAX異步對(duì)象不斷監(jiān)聽(tīng)服務(wù)端狀態(tài)的變化，只有狀態(tài)碼變化了，方可觸發(fā)函數(shù) ?????????? //0-1-2-3-4,這些是可以觸發(fā)函數(shù)的 ?????????? //4-4-4-4-4，這些是不可以觸發(fā)函數(shù)的 ?????????? //以下這個(gè)函數(shù)是服務(wù)器來(lái)觸發(fā)的，不是程序員觸發(fā)的，這和onclick是不一樣的 ?????????? ajax.onreadystatechange = function(){ ????????????? //如果AJAX狀態(tài)碼為4 ????????????? if(ajax.readyState == 4){ ????????????????? //如果服務(wù)器響應(yīng)碼是200 ????????????????? if(ajax.status == 200){ ???????????????????? //NO5）從AJAX異步對(duì)象中獲取服務(wù)器響應(yīng)的結(jié)果 ???????????????????? var str = ajax.responseText; ???????????????????? //NO6）按照DOM規(guī)則，將結(jié)果動(dòng)態(tài)添加到web頁(yè)面指向的標(biāo)簽中 ????????????????? ??? document.getElementsByTagName("span")[0].innerHTML = str; ????????????????? } ?????????? ??? } ?????????? } ?????? } ??? </script> |
?
| public class TimeServletAjax extends HttpServlet { ??? public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { ?????? SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); ?????? String str = sdf.format(new Date()); ?????? //注意：在Web2.0時(shí)代，即異步方式下，不能用轉(zhuǎn)發(fā)或重定向 ?????? //因?yàn)?#xff1a;轉(zhuǎn)發(fā)或重定向會(huì)引起瀏覽器全部刷新，而不是局部刷新 ?????? //所以得用以輸出流的方式將服務(wù)器的結(jié)果輸出到瀏覽器 ?????? response.setContentType("text/html;charset=UTF-8"); ?????? PrintWriter pw = response.getWriter(); ?????? pw.write(str); ?????? pw.flush(); ?????? pw.close(); ??? } } |
?
?? （2）基于HTML，以GET或POST方式，檢查注冊(cè)用戶名是否在數(shù)據(jù)庫(kù)中已存在（text/html;charset=UTF-8）
| ??? 輸入用戶名[POST]：<input type="text" maxlength="8"/>光標(biāo)移出后，立刻顯示結(jié)果 ??? <hr/> ??? <div></div> |
????????
| public class RegisterServletPost extends HttpServlet { ??? public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { ?????? request.setCharacterEncoding("UTF-8"); ?????? String username = request.getParameter("username"); ?????? String tip = "images/MsgSent.gif"; ?????? if("杰克".equals(username)){ ?????????? tip = "images/MsgError.gif"; ?????? } ?????? response.setContentType("text/html;charset=UTF-8"); ?????? PrintWriter pw = response.getWriter(); ?????? pw.write(tip); ?????? pw.flush(); ?????? pw.close(); ??? } } |
?
（3）基于XML，以POST方式，完成省份-城市二級(jí)下拉聯(lián)動(dòng)
?（text/xml;charset=UTF-8）
| ??? <select id="province" style="width:111px"> ?????? <option>選擇省份</option> ?????? <option>廣東</option> ?????? <option>湖南</option> ?????? <option>湖北</option> ??? </select> ??? ??? <select id="city" style="width:111px"> ?????? <option>選擇城市</option> ??? </select> |
?
| <script type="text/javascript"> ?????? //定位省份下拉框，同時(shí)添時(shí)內(nèi)容改變事件 ?????? document.getElementById("province").onchange = function(){ ?????????? //清除城市下拉框中的內(nèi)容除第一項(xiàng)外 ?????????? var citySelectElement = document.getElementById("city"); ?????????? citySelectElement.options.length = 1; ?????????? //獲取選中的省份 ?????????? var i = this.selectedIndex; ?????????? var optionElement = this[i]; ?????????? var province = optionElement.innerHTML; ?????????? //如果不是"選擇省份"的話 ?????????? if("選擇省份" != province){ ????????????? //NO1) ????????????? var ajax = createAJAX(); ????????????? //NO2） ????????????? var method = "POST"; ????????????? var url = "${pageContext.request.contextPath}/ProvinceCityServlet?id="+new Date().getTime(); ????????????? ajax.open(method,url); ?????????? ??? ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); ????????????? //NO3) ????????????? var content = "province="+province; ????????????? ajax.send(content); ????????????? ????????????? //------------------------------------------------- ????????????? ????????????? //NO4） ????????????? ajax.onreadystatechange = function(){ ????????????????? if(ajax.readyState == 4){ ???????????????????? if(ajax.status == 200){ ???????????????????????? //NO5) ???????????????????????? var xmlDocument = ajax.responseXML; ???????????????????????? //NO6）按照dom規(guī)則，解析xml文件中的所有內(nèi)容 ???????????????????????? var cityElementArray = xmlDocument.getElementsByTagName("city"); ???????????????????????? var size = cityElementArray.length;????????????????? ?????? ???????????????????????? for(var i=0;i<size;i++){ ??????????????????????????? var cityElement = cityElementArray[i]; ??????????????????????????? //innerHTML只能用于html和jsp頁(yè)面，不能用于xml頁(yè)面 ????????????? ????????????? //在xml頁(yè)面我們通常用firstChild.nodeValue去替代innerHTML ??????????????????????????? var city = cityElement.firstChild.nodeValue; ??????????????????????????? //<option></option> ??????????????????????????? var optionElement = document.createElement("option"); ??????????????????????????? //<option>廣州</option> ??????????????????????????? optionElement.innerHTML = city; ??????????????????????????? //<select id="city" style="width:111px"><option>廣州</option></select> ??????????????????????????? citySelectElement.appendChild(optionElement); ???????????????????????? } ???????????????????? } ????????????????? } ????????????? } ?????????? } ?????? } ??? </script> |
?
| public class ProvinceCityServlet extends HttpServlet { ??? public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { ?????? this.doPost(request,response); ??? } ??? public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { ?????? request.setCharacterEncoding("UTF-8"); ?????? String province = request.getParameter("province"); ?????? ?????? response.setContentType("text/xml;charset=UTF-8"); ?????? PrintWriter pw = response.getWriter(); ?????? pw.write("<?xml version='1.0' encoding='UTF-8'?>"); ?????? pw.write("<root>"); ?????? ?????? if("廣東".equals(province)){ ?????????? pw.write("<city>廣州</city>"); ?????????? pw.write("<city>深圳</city>"); ?????????? pw.write("<city>中山</city>"); ?????????? pw.write("<city>珠海</city>"); ?????? }else if("湖南".equals(province)){ ?????????? pw.write("<city>長(zhǎng)沙</city>"); ?????????? pw.write("<city>株洲</city>"); ?????????? pw.write("<city>張家界</city>"); ?????? }else if("湖北".equals(province)){ ?????????? pw.write("<city>武漢</city>"); ?????????? pw.write("<city>黃崗</city>"); ?????? } ?????? ?????? pw.write("</root>"); ?????? pw.flush(); ?????? pw.close(); ??? } } |
?
?? （4）驗(yàn)證碼檢查
?????? ?（text/html;charset=UTF-8）
| ??? <form> ?????? 驗(yàn)證碼： ?????? <input type="text" maxlength="4" size="4"/> ?????? <img src="image.jsp"/> ?????? <input type="button" value="看不清" size="2"/> ?????? <span></span> ??? </form> |
???????
| <script type="text/javascript"> ?????? //定位按鈕，同時(shí)添加單擊事件 ?????? document.getElementsByTagName("input")[1].onclick = function(){ ?????????? //定位img標(biāo)簽，修改src屬性 ?????????? document.images[0].src = "image.jsp?id="+new Date().getTime(); ?????????? //清空span標(biāo)簽中的內(nèi)容 ?????????? var spanElement = document.getElementsByTagName("span")[0]; ?????????? spanElement.innerHTML = ""; ?????????? //清空文本框中的內(nèi)容 ?????????? document.getElementsByTagName("input")[0].value = ""; ?????? } ??? </script> ??? ??? <script type="text/javascript"> ?????? //定位文本框，同時(shí)添加鍵盤(pán)彈起事件 ?????? document.getElementsByTagName("input")[0].onkeyup = function(){ ?????????? //獲取輸入的驗(yàn)證碼 ?????????? var checkcode = this.value; ?????????? //去空格 ?????????? checkcode = trim(checkcode); ?????????? //獲取驗(yàn)證碼的長(zhǎng)度 ?????????? var size = checkcode.length; ?????????? //如果長(zhǎng)度為4 ?????????? if(size == 4){ ????????????? //NO1) ????????????? var ajax = createAJAX(); ????????????? //NO2) ????????????? var method = "POST"; ????????????? var url = "${pageContext.request.contextPath}/CheckcodeServlet?id="+new Date().getTime(); ????????????? ajax.open(method,url); ?????????? ??? ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); ????????????? //NO3) ????????????? var content = "checkcode=" + checkcode; ????????????? ajax.send(content); ????????????? ????????????? //-------------------------------------------- ????????????? ????????????? //NO4) ????????????? ajax.onreadystatechange = function(){ ????????????????? if(ajax.readyState == 4){ ???????????????????? if(ajax.status == 200){ ???????????????????????? //NO5) ???????????????????????? var imagePath = ajax.responseText; ????????????????? ?????? ???????????????????????? //NO6) ???????????????????????? var imgElement = document.createElement("img"); ???????????????????????? imgElement.src = imagePath; ???????????????????????? imgElement.style.width = "14px"; ???????????????????????? imgElement.style.height = "14px"; ???????????????????????? var spanElement = document.getElementsByTagName("span")[0]; ??? ???????????????????? spanElement.innerHTML = ""; ???????????????????????? spanElement.appendChild(imgElement); ???????????????????? } ????????????????? } ????????????? } ?????????? }else{ ????????????? //清空span標(biāo)簽中的內(nèi)容 ????????????? var spanElement = document.getElementsByTagName("span")[0]; ????????????? spanElement.innerHTML = ""; ?????????? } ?????? } ??? </script> |
???????
| public class CheckcodeServlet extends HttpServlet { ?? public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { ????? request.setCharacterEncoding("UTF-8"); ????? //獲取客戶端輸入的驗(yàn)證碼 ????? String checkcodeClient = request.getParameter("checkcode"); ????? //獲取服務(wù)端產(chǎn)生的驗(yàn)證碼 ????? HttpSession httpSession = request.getSession(); ????? String checkcodeServer = (String) httpSession.getAttribute("CHECKNUM"); ????? //二個(gè)驗(yàn)證碼進(jìn)行比較 ????? String tip = "images/MsgError.gif"; ????? if(checkcodeClient!=null && checkcodeServer!=null && checkcodeClient.equals(checkcodeServer)){ ???????? tip = "images/MsgSent.gif"; ????? } ????? //以流的方式輸出tip變量 ?? ?? response.setContentType("text/html;charset=UTF-8"); ????? PrintWriter pw = response.getWriter(); ????? pw.write(tip); ????? pw.flush(); ????? pw.close(); ?? } } |
?
?
九）XMLHttpRequest(即：AJAX)對(duì)象常用事件，方法和屬性
?? （1）事件：
??????? ajax.onreadystatechange：表示AJAX異步對(duì)象不斷監(jiān)聽(tīng)服務(wù)端的響應(yīng)，
??????? 是由服務(wù)器程序觸發(fā)，不是程序員觸發(fā)
?
?? （2）屬性：
?????????? ??? ajax.readyState==0：表示AJAX異步對(duì)象已創(chuàng)建好，但還沒(méi)有調(diào)用open()方法
?
?????????? ??? ajax.readyState==1：表示AJAX異步對(duì)象已調(diào)用open()方法，但還沒(méi)有調(diào)用send()方法
?
?????????? ??? ajax.readyState==2：表示AJAX異步對(duì)象已調(diào)用send()方法，但請(qǐng)求還沒(méi)有到達(dá)服務(wù)器端
?
?????????? ??? ajax.readyState==3：表示服務(wù)端已接收到AJAX異步對(duì)象的請(qǐng)求，正在處理響應(yīng)中。。。
?
ajax.readyState==【4】：表示AJAX異步對(duì)象已經(jīng)完完全全接收到了服務(wù)器的響應(yīng)信???????????? 息，但接收到的數(shù)據(jù)不一定都正確
上述5種狀態(tài)不是所有瀏覽器都相同，但狀態(tài)4每種瀏覽器都相同
?
??????? ajax.status==200：表示AJAX異步對(duì)象接收到響應(yīng)碼，如果是200的話，表示一切正常
??????????
??????? ajax.responseText：表示從AJAX異步對(duì)象中獲取HTML載體中的數(shù)據(jù)
?
?????????? ??? ajax.responseXML：表示從AJAX異步對(duì)象中獲取XML載體中的數(shù)據(jù)
?
?? （3）方法：
?????????? ??? ajax.open(method,url,可選的boolean值)
?????????? ??? AJAX異步對(duì)象準(zhǔn)備發(fā)送異步請(qǐng)求
?????????? ??? 參數(shù)一：以什么方式發(fā)送，常用的用GET或POST，大小寫(xiě)不敏感
?????????? ??? 參數(shù)二：發(fā)送到什么地方去，常用Servlet或Struts2或SpringMVC來(lái)接收，
這里只限于JavaEE學(xué)科?
?????????? ??? 參數(shù)三：默認(rèn)值為true，表示AJAX對(duì)象以【異步】的方式提交到服務(wù)端
?????????? ??????? ????如果設(shè)置為false，表示AJAX對(duì)象以【同步】的方式提交到服務(wù)端
?
??????? ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
?????????? ??? 表示將請(qǐng)求體中的內(nèi)容，按照UTF-8的方式進(jìn)行編碼，只針對(duì)POST請(qǐng)求有效?
?
?????????? ??? ajax.send(content)
?????????? ??? AJAX異步對(duì)象真正發(fā)送異步請(qǐng)求
?????????? ??? 參數(shù)一：表示HTTP【請(qǐng)求體】中的內(nèi)容
???????????????????? 如果是GET方式：content = null，如果強(qiáng)行傳值到服務(wù)器，服務(wù)端收不到，返回NULL
???????????????????? 如果是POST方式：content != null，例如：username=jack&password=123&role=admin
?
?
十）數(shù)據(jù)載體
?? （1）HTML
（A）優(yōu)點(diǎn)：服務(wù)端響應(yīng)的是普通html字符串，無(wú)需JS解析，配合innerHTML屬性效率高
?????? （B） 缺點(diǎn)：如果需要更新WEB頁(yè)面中的很多處地方，HTML不太方便，同時(shí)innerHTML屬性不是DOM的標(biāo)準(zhǔn)，不能操作XML
????????????????? 注意：innerHTML在xml中不能使用，用firstChild.nodeValue替代
?????? （C）適合：小量數(shù)據(jù)載體，且只更新在web頁(yè)面中的一個(gè)地方
?
?? （2）XML
?? （A）優(yōu)點(diǎn)：是種通用的普通字符串格式，任何技術(shù)都能解析，標(biāo)簽名可以任意，使用DOM標(biāo)準(zhǔn)規(guī)則能夠解析XML的任何部分
?????? （B）缺點(diǎn)：XML文件格式相當(dāng)嚴(yán)格，出錯(cuò)后，responseXML屬性返回NULL，如果XML文件過(guò)長(zhǎng)，導(dǎo)致解析效率低下
?????? （C）適合：大量具有層次數(shù)據(jù)載體????
?
?? （3）JSON （下次課講）+ struts2框架
??????? 兼?zhèn)銱TML和XML的特點(diǎn)
?
?
?
?
練習(xí)：服務(wù)端采用Servlet完成
?
1）檢查注冊(cè)用戶名是否在數(shù)據(jù)庫(kù)中存在
2）省份-城市二級(jí)聯(lián)動(dòng)
3）驗(yàn)證碼識(shí)別
轉(zhuǎn)載于:https://www.cnblogs.com/GJ-ios/p/6053044.html
總結(jié)
以上是生活随笔為你收集整理的34、JS/AJAX的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java经典实例：比较浮点数
- 下一篇： 如何加入Dave英语学习小组