js类型
- number类型
var num = 100;
string类型,注意js中的string类型用”或”“均可
-
var str = “哈哈”; - boolean类型
-
var flag = true; - undefined不是字符串,它是一种类型
var card; alert(card); //通过如下代码判断: if(card == undefined){ alert("card变量暂没值"); }else{ alert(card); }
定义函数
<script type="text/javascript">
function add(num1,num2){
return num1 + num2;
}
window.alert("10+20=" + add(10,20));
</script>
JS中有四种对象
- Date对象
var nowStr = new Date().toLocaleString(); window.document.write(nowStr + "<br/>");
Math对象
-
for(var i=1;i<=10;i++){
//1到9之间的随机整数
document.write(Math.floor(Math.random()*9)+1 + “
”);
} string对象
var str = "Hello你好"; var size = str.length; alert(size);//7
Array
var array = new Array("语文","数学","英语",true,123); for(var i=0;i<array.length;i++){ document.write(array[i] + " "); }
自定义对象
function Person(id,name,sal){ this.id = id; this.name = name; this.sal = sal; } var p = new Person(1,"波波",7000); document.write("编号:" + p.id + "<br/>"); document.write("姓名:" + p.name + "<br/>"); document.write("薪水:" + p.sal + "<br/>");
window对象,打开新窗口
var url = "04_images.html"; window.open(url);
status对象,将当前时间设置到状态栏中
var nowStr = new Date().toLocaleString(); window.status = nowStr;(url);
location对象,模拟用户在地址栏输入url访问其它页面的情况
var url = "04_images.html"; window.location.href = url;
form 表单
演示用JS提交表单,重要
<form action="04_images.html" method="POST"> <input type="button" value="提交"/> </form> <!-- 演示用JS提交表单,重要 --> <script type="text/javascript"> //定位提交按钮 var inputElement = document.getElementsByTagName("input")[0]; //为提交按钮添加单击事件 inputElement.onclick = function(){ //定位<form>标签,forms表示document对象中所有表单的集合,通过下标引用不同的表单,从0开始 var formElement = document.forms[0]; //提交表单,提交到action属性指定的地方 formElement.submit(); } </script>
传统Web应用请求和响应特点【显示当前时间】
当前时间:${requestScope.nowStr}<br/> <input id="buttonID" type="button" value="获取当前时间"/><p/> <script type="text/javascript"> //定位按钮,同时添加单击事件 document.getElementById("buttonID").onclick = function(){ //发送请求到服务器 var url = "${pageContext.request.contextPath}/TimeServlet"; window.location.href = url; } </script>
- TimeServlet
-
//构造SimpleDateFormat对象
SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
//将当前日期按照指定格式输出成字符串
String nowStr = sdf.format(new Date());
//将结果绑定到request域对象中
request.setAttribute(“nowStr”,nowStr);
//转发到06_time.jsp页面
request.getRequestDispatcher(“/06_time.jsp”).forward(request,response);
不用刷新整个页面便可与服务器通讯的办法有
XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)
背景:早上IE5时,微软就开发出了第一个异步通讯对象,叫ActiveXObject对象,
Firefox等其它浏览器厂商也慢慢引入异步通讯对象,叫XMLHttpRequest对象,
IE的高版本,也将这个异步对象取名叫XMLHttpRequest对象,但IE有向下兼容问题,
也可以使用ActiveXObject对象。
无需第三方jar包,现代中高版本浏览器中内置了这个异步通讯对象,只需通过JavaScript就可以创建
注意:所有浏览器中都内置了异步对象,在默认情况下,该异步对象并没有创建出来
AJAX开发步骤
步一:创建AJAX异步对象,例如:createAJAX()
步二:准备发送异步请求,例如:ajax.open(method,url)
步三:如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader()
如果是GET请求的话,无需设置设置AJAX请求头
步四:真正发送请求体中的数据到服务器,例如:ajax.send()
步五:AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数
步六:在无名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面
AJAX适合用在什么地方
AJAX【适合】不用来传递大量数据,而只用来【传递少量数据】,在用户的【体验】上,【更加人性化】
AJAX是一个和服务器无关的技术,即服务器可使用:JavaEE,.NET,PHP,。。。这些技术都可
AJAX只管向服务器发送请求,同时只管接收服务器的HTML或XML或JSON载体响应
服务端不能使用转发或重定向到web页面,因为这样会起浏览器全面刷新
即只能以流的方式响应给浏览器
XMLHttpRequest(即:AJAX)对象常用事件,方法和属性
事件:
ajax.onreadystatechange:表示AJAX异步对象不断监听服务端的响应,
是由服务器程序触发,不是程序员触发
属性:
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载体中的数据
方法:
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
无需刷新整个Web页面显示服务器响应的当前时间
JSP
当前时间:<span id="time"></span><br/> <input id="buttonID" type="button" value="获取当前时间"/><p/>
创建AJAX异步对象
<script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var ajax = null; try{ //如果IE5=IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ //如果是非IE的话 ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器中不支持异步对象,请换浏览器"); } } return ajax; } </script>
AJax 请求与响应
<script type="text/javascript"> document.getElementById("buttonID").onclick = function(){ //NO1)创建AJAX异步对象 var ajax = createAJAX(); //NO2)准备发送请求 var method = "GET"; var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time=" + new Date().getTime(); ajax.open(method,url); //NO3)真正发送请求体的数据到服务器,如果请求体中无数据的话,就用null表示 ajax.send(null); //-------------------------------------------------------------等待 //NO4)AJAX异步对象不断监听服务器响应的状态0-1-2-3-【4】 //一定要状态变化后,才可触发function(){}函数 //如果状态永远是4-4-4-4-4,是不会触发function(){}函数的 ajax.onreadystatechange = function(){ //如果状态码为4的话 if(ajax.readyState == 4){ //如果响应码为200的话 if(ajax.status == 200){ //NO5)从AJAX异步对象中获取服务器响应的HTML数据 var nowStr = ajax.responseText; //NO6)将结果按照DOM规则,动态添加到web页面指定的标签中 var spanElement = document.getElementById("time"); spanElement.innerHTML = nowStr; } } } } </script>
AjaxTimeServlet
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String nowStr = sdf.format(new Date()); //以流的方式将结果响应到AJAX异步对象中 response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(nowStr); pw.flush(); pw.close();
基于HTML,以GET方式,检查注册用户名是否在数据库中已存在
JSP
<form> 用户名[GET]:<input id="usernameID" type="text" name="username" maxlength="4"/> 光标移出后,立即检查结果 </form> <hr/> <span id="resID"></span>
UserServlet
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { String username = request.getParameter("username"); byte[] buf = username.getBytes("ISO8859-1"); username = new String(buf,"UTF-8"); System.out.println("username=" + username); String tip = "<font color='green'>可以注册</font>"; if("杰克".equals(username)){ tip = "<font color='red'>该用户已存在</font>"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); }
AJAX 异步请求
<script type="text/javascript"> //定位文本框,同时提供焦点失去事件 document.getElementById("usernameID").onblur = function(){ //获取文本框中输入的值 var username = this.value; //如果用户没有填内容 if(username.length == 0){ //提示 document.getElementById("resID").innerHTML = "用户名必填"; }else{ //对汉字进行UTF-8(U8)的编码 username = encodeURI(username); //NO1) var ajax = createAJAX(); //NO2) var method = "GET"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username; ajax.open(method,url); //NO3) ajax.send(null); //--------------------------------------------------------等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) document.getElementById("resID").innerHTML = tip; } } } } } </script>
基于HTML,以POST方式,检查注册用户名是否在数据库中已存在
JSP
用户名[POST]:<input id="usernameID" type="text" maxlength="4"/> <span id="resID"> <!-- <img src="tip变量" width="12px" height="12px"/> --> </span>
UserServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); System.out.println("username=" + 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(); }
AJAX 异步请求
<script type="text/javascript"> document.getElementById("usernameID").onblur = function(){ var username = this.value;//杰克 //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "username=" + username; ajax.send(content); //===========================================等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) //创建img标签 var imgElement = document.createElement("img"); //设置img标签的src/width/height的属性值 imgElement.src = tip; imgElement.style.width = "12px"; imgElement.style.height = "12px"; //定位span标签 var spanElement = document.getElementById("resID"); //清空span标签中的内容 spanElement.innerHTML = ""; //将img标签加入到span标签中 spanElement.appendChild(imgElement); } } } } </script>
实例:基于XML,以POST方式,完成省份-城市二级下拉联动
JSP
<select id="provinceID" style="width:111px"> <option>选择省份</option> <option>湖南</option> <option>广东</option> </select> <select id="cityID" style="width:111px"> <option>选择城市</option> </select>
ProvinceCityServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String province = request.getParameter("province"); //通知AJAX异步对象,服务器响应的数据为xml格式的 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>"); }else if("湖南".equals(province)){ pw.write("<city>长沙</city>"); pw.write("<city>株洲</city>"); pw.write("<city>湘潭</city>"); pw.write("<city>岳阳</city>"); } pw.write("</root>"); pw.flush(); pw.close(); }
AJAX异步请求
<script type="text/javascript"> //定位省份下拉框,同时添加内容改变事件 document.getElementById("provinceID").onchange = function(){ //清空城市下拉框中的内容,除第一项外 var cityElement = document.getElementById("cityID"); cityElement.options.length = 1; //获取选中option标签的索引号,从0开始 var index = this.selectedIndex; //定位选中的option标签 var optionElement = this[index]; //获取选中的option标签中的内容,即省份 var province = optionElement.innerHTML; //如果选中的内容不是"选择省份" if("选择省份" != province){ //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头 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)从AJAX异步对象中获取服务器响应的xml文档 var xmlDocument = ajax.responseXML; //NO6)按照DOM规则,解析XML文档 var cityElementArray = xmlDocument.getElementsByTagName("city"); var size = cityElementArray.length; for(var i=0;i<size;i++){ //innerHTML只能用在html/jsp中,不能用在xml中 var city = cityElementArray[i].firstChild.nodeValue; //<option></option> var optionElement = document.createElement("option"); //<option>广州</option> optionElement.innerHTML = city; //<select><option>广州</option></select> cityElement.appendChild(optionElement); } } } } } } </script>
数据载体
(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)适合:大量具有层次数据载体
练习:服务端采用Servlet完成
1)检查注册用户名是否在数据库中存在
2)省份-城市二级联动
3)验证码识别