二)JS中的三种类型
(1)基本类型:number,string,boolean
number包含正数,负数,小数
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)特殊类型:null,undefined
null表示一个变量指向null
undefined表示一个变量指向的值不确定
vararray = null; var student; alert(array); alert(student); |
(3)复合类型:函数,对象,数组
对象包含内置对象和自定义的对象
三)JS中有三种定义函数的方式
(1)正常方式:functionmysum(num1,num2){return num1+num2;}
function mysum(num1,num2){ return num1 + num2; } var myresult = mysum(100,200); alert("myresult="+myresult); |
(2)构造器方式:newFunction("num1","num2","return num1+num2;")
var youresult = new Function("num1","num2","return num1+num2"); alert( youresult(1000,2000) ); |
(3)直接量或匿名或无名方式:varmysum = function(num1,num2){return num1+num2;}
var theyresult = function(num1,num2){ return num1 + num2; } alert( theyresult(10000,20000) ); |
四)JS中有四种对象
(1)内置对象 :Date,Math,String,Array,。。。
var str = new Date().toLocaleString(); window.document.write("<font size='44' color='red'>"+str+"</font>"); |
(2)自定义对象: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("编号:" + s.id + "<br/>"); document.write("姓名:" + s.name + "<br/>"); document.write("薪水:" + s.sal + "<br/>"); |
(3)浏览器对象:window,document,status,location,history。。。
function myrefresh(){ window.history.go(0); } |
(4)ActiveX对象:ActiveXObject("Microsoft.XMLHTTP"),。。。
五)演示JS对象的属性,方法和事件的使用
(1)window.location.href
var url = "04_array.html"; window.location.href = url; |
(2)form.submit()
<formaction="/js-day01/04_array.html"method="POST"> <inputtype="button"value="提交到服务端"onclick="doSubmit()"/> </form> <scripttype="text/javascript"> function doSubmit(){ //表单提交 document.forms[0].submit(); } </script> |
(3)inputElement.οnblur= 函数
(4)document.createElement(“img”)
(5)imgElement.style.width/height
七)什么是AJAX【Asynchronous异步的JS和XML】,工作原理与特点
(1)什么是同步:
请求1->响应1->请求2->响应2->
Web1.0时代
(2)什么是异步:
请求1->请求2->请求3->响应1->响应2->响应3->
请求1->响应1->请求2->请求3->响应2->响应3->
Web2.0时代
项目中:Web1.0为主(整个浏览器刷新),Web2.0为辅(浏览器局部刷新)
(3)什么是AJAX
客户端(特指PC浏览器)与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术
即,AJAX是一个【局部刷新】的【异步】通讯技术
AJAX不是全新的语言,是2005年Google公司推出的一种全新【编程模式】,不是新的编程语言
(5)AJAX工作原理
参见<<AJAX工作原理.JPG>>
八)AJAX应用
(1)无需刷新整个Web页面显示服务器响应的当前时间
(text/html;charset=UTF-8)
当前时间:<span></span><br/> <input type="button" value="异步方式提交"/> |
<scripttype="text/javascript"> //定位button按钮,同时添加单击事件 document.getElementsByTagName("input")[0].onclick =function(){ //NO1)创建AJAX异步对象(每个浏览器内置的,无需第三方jar包) varajax = createAJAX();//0 //NO2)AJAX异步对象准备发送请求 varurl = "${pageContext.request.contextPath}/TimeServletAjax?id="+newDate().getTime(); var method = "GET"; ajax.open(method,url);//1 //NO3)AJAX异步对象真正发送请求体的数据到服务器,如果请求体无数据的话,用null表示 varcontent = null; ajax.send(content);//2
//----------------------------------------等待
//NO4)AJAX异步对象不断监听服务端状态的变化,只有状态码变化了,方可触发函数 //0-1-2-3-4,这些是可以触发函数的 //4-4-4-4-4,这些是不可以触发函数的 //以下这个函数是服务器来触发的,不是程序员触发的,这和onclick是不一样的 ajax.onreadystatechange =function(){ //如果AJAX状态码为4 if(ajax.readyState == 4){ //如果服务器响应码是200 if(ajax.status == 200){ //NO5)从AJAX异步对象中获取服务器响应的结果 varstr = ajax.responseText; //NO6)按照DOM规则,将结果动态添加到web页面指向的标签中 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时代,即异步方式下,不能用转发或重定向 //因为:转发或重定向会引起浏览器全部刷新,而不是局部刷新 //所以得用以输出流的方式将服务器的结果输出到浏览器 response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(str); pw.flush(); pw.close(); } } |
(2)基于HTML,以GET或POST方式,检查注册用户名是否在数据库中已存在(text/html;charset=UTF-8)
输入用户名[POST]:<inputtype="text"maxlength="8"/>光标移出后,立刻显示结果 <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(); } } |
(4)验证码检查
(text/html;charset=UTF-8)
<form> 验证码: <inputtype="text"maxlength="4"size="4"/> <imgsrc="image.jsp"/> <inputtype="button"value="看不清"size="2"/> <span></span> </form> |
<scripttype="text/javascript"> //定位按钮,同时添加单击事件 document.getElementsByTagName("input")[1].onclick =function(){ //定位img标签,修改src属性 document.images[0].src ="image.jsp?id="+newDate().getTime(); //清空span标签中的内容 varspanElement = document.getElementsByTagName("span")[0]; spanElement.innerHTML = ""; //清空文本框中的内容 document.getElementsByTagName("input")[0].value =""; } </script>
<scripttype="text/javascript"> //定位文本框,同时添加键盘弹起事件 document.getElementsByTagName("input")[0].onkeyup =function(){ //获取输入的验证码 varcheckcode = this.value; //去空格 checkcode = trim(checkcode); //获取验证码的长度 varsize = checkcode.length; //如果长度为4 if(size == 4){ //NO1) varajax = createAJAX(); //NO2) varmethod = "POST"; var url = "${pageContext.request.contextPath}/CheckcodeServlet?id="+newDate().getTime(); ajax.open(method,url); ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) varcontent = "checkcode=" + checkcode; ajax.send(content);
//--------------------------------------------
//NO4) ajax.onreadystatechange =function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) varimagePath = ajax.responseText;
//NO6) varimgElement = 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标签中的内容 varspanElement = 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"); //获取客户端输入的验证码 String checkcodeClient = request.getParameter("checkcode"); //获取服务端产生的验证码 HttpSession httpSession = request.getSession(); String checkcodeServer = (String) httpSession.getAttribute("CHECKNUM"); //二个验证码进行比较 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)对象常用事件,方法和属性
(1)事件:
ajax.onreadystatechange:表示AJAX异步对象不断监听服务端的响应,
是由服务器程序触发,不是程序员触发
(2)属性:
ajax.readyState==0:表示AJAX异步对象已创建好,但还没有调用open()方法
ajax.readyState==1:表示AJAX异步对象已调用open()方法,但还没有调用send()方法
ajax.readyState==2:表示AJAX异步对象已调用send()方法,但请求还没有到达服务器端
ajax.readyState==3:表示服务端已接收到AJAX异步对象的请求,正在处理响应中。。。
ajax.readyState==【4】:表示AJAX异步对象已经完完全全接收到了服务器的响应信息,但接收到的数据不一定都正确
上述5种状态不是所有浏览器都相同,但状态4每种浏览器都相同
ajax.status==200:表示AJAX异步对象接收到响应码,如果是200的话,表示一切正常
ajax.responseText:表示从AJAX异步对象中获取HTML载体中的数据
ajax.responseXML:表示从AJAX异步对象中获取XML载体中的数据
(3)方法:
ajax.open(method,url,可选的boolean值)
AJAX异步对象准备发送异步请求
参数一:以什么方式发送,常用的用GET或POST,大小写不敏感
参数二:发送到什么地方去,常用Servlet或Struts2或SpringMVC来接收,
这里只限于JavaEE学科
参数三:默认值为true,表示AJAX对象以【异步】的方式提交到服务端
如果设置为false,表示AJAX对象以【同步】的方式提交到服务端
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
表示将请求体中的内容,按照UTF-8的方式进行编码,只针对POST请求有效
ajax.send(content)
AJAX异步对象真正发送异步请求
参数一:表示HTTP【请求体】中的内容
如果是GET方式:content =null,如果强行传值到服务器,服务端收不到,返回NULL
如果是POST方式:content !=null,例如:username=jack&password=123&role=admin
十)数据载体
(1)HTML
(A)优点:服务端响应的是普通html字符串,无需JS解析,配合innerHTML属性效率高
(B) 缺点:如果需要更新WEB页面中的很多处地方,HTML不太方便,同时innerHTML属性不是DOM的标准,不能操作XML
注意:innerHTML在xml中不能使用,用firstChild.nodeValue替代
(C)适合:小量数据载体,且只更新在web页面中的一个地方
(2)XML
(A)优点:是种通用的普通字符串格式,任何技术都能解析,标签名可以任意,使用DOM标准规则能够解析XML的任何部分
(B)缺点:XML文件格式相当严格,出错后,responseXML属性返回NULL,如果XML文件过长,导致解析效率低下
(C)适合:大量具有层次数据载体