一)什么是JavaScript【以下简称JS】
JS是
(1)基于对象
JS本身就有一些现成的对象可供程序员使用,例如:Array,Math,String。。。
JS并不排除你可以自已按一定的规则创建对象
(2)事件驱动
JS代码写好后,需要外界触发后,方可运行,例如:单击事件,定时执行,。。。
(3)解释性
每次运行JS代码时,得需要将原代码一行一行的解释执行
相对编译型语言(例如:Java、C++)执行速度相对较慢
(4)基于浏览器的动态交互网页技术
如果JS嵌入到HTML中,可以不需要服务器支持,直接由浏览器解释执行
如果JS嵌入到JSP或Servlet中,必需要服务器支持,直接由浏览器解释执行
(5)嵌入在HTML标签中
JS必须嵌入到一个名叫<script src="引入外部js文件"></script>的标签中,方可运行
脚本语言
二)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表示一个变量指向的值不确定
var array = null; var student; alert(array); alert(student); |
(3)复合类型:函数,对象,数组
对象包含内置对象和自定义的对象
三)JS中有三种定义函数的方式
(1)正常方式:function mysum(num1,num2){return num1+num2;}
function mysum(num1,num2){ return num1 + num2; } var myresult = mysum(100,200); alert("myresult="+myresult); |
(2)构造器方式:new Function("num1","num2","return num1+num2;")
var youresult = new Function("num1","num2","return num1+num2"); alert( youresult(1000,2000) ); |
(3)直接量或匿名或无名方式:var mysum = 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()
<form action="/js-day01/04_array.html" method="POST"> <input type="button" value="提交到服务端" onclick="doSubmit()"/> </form> <script type="text/javascript"> function doSubmit(){ //表单提交 document.forms[0].submit(); } </script> |
(3)inputElement.onblur = 函数
(4)document.createElement(“img”)
(5)imgElement.style.width/height
六)回顾传统Web应用请求和响应特点【显示当前时间】
(1)请求:浏览器以HTTP协议的方式提交请求到服务器
(2)响应:服务器以HTTP协议的方式响应内容到浏览器
注意:HTTP是WEB大众化非安全协议
HTTPS是WEB安全协议,是基于HTTP协议的,且加了一些加密等特殊功能,常用于在线支付,或者是需要安全性较高的网站中,例如:12306网站
HTTP请求有三个部份组成:请求行,请求头,请求体
HTTP响应有三个部份组成:响应行,响应头,响应体
(3)状态栏:有明显的进度条刷新现象,如果服务器响应较慢的话,进度条刷新也会变慢,IE9等中高版本浏览器,有明显转圈圈图标
(4)历史栏:会收集原来已访问过的web页面,进行缓存
(5)缺点:不需变化的大量数据,也全部刷新,造成浏览器加载和处理负担
(6)可改进的地方:让不需变化的大量数据,原封不动,不用缓存到历史栏中,无需全部刷新,只刷新某些需要变化的数据区域,例如:当前时间的区域
当前时间:<span>${requestScope.str}</span><br/> <input type="button" value="同步方式提交"/> |
<script type="text/javascript"> //定位button按钮,同时添加单击事件 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】,工作原理与特点
(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公司推出的一种全新【编程模式】,不是新的编程语言
(4)不用刷新整个页面便可与服务器通讯的办法有:
(A)Flash/ActionScript
(B)框架Frameset
(C)iFrame(内嵌入框架)
(D)XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)
背景:早上IE5时,微软就开发出了第一个异步通讯对象,叫ActiveXObject对象,
Firefox等其它浏览器厂商也慢慢引入异步通讯对象,叫XMLHttpRequest对象,
IE的高版本,也将这个异步对象取名叫XMLHttpRequest对象,但IE有向下兼容问题,
也可以使用ActiveXObject对象。
无需第三方jar包,现代中高版本浏览器中内置了这个异步通讯对象,只需通过JavaScript就可以创建
注意:所有浏览器中都内置了异步对象,在默认情况下,该异步对象并没有创建出来
function createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ ajax = new XMLHttpRequest(); } return ajax; } |
(5)AJAX工作原理
参见<<AJAX工作原理.JPG>>
(6)AJAX包含的技术
参见<<AJAX包含的技术.JPG>>
(7)AJAX开发步骤
步一:创建AJAX异步对象,例如:createAJAX()
步二:准备发送异步请求,例如:ajax.open(method,url)
步三:如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader()
如果是GET请求的话,无需设置设置AJAX请求头
步四:真正发送请求体中的数据到服务器,例如:ajax.send()
步五:AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数
步六:在无名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面
(8)AJAX适合用在什么地方
AJAX【适合】不用来传递大量数据,而只用来【传递少量数据】,在用户的【体验】上,【更加人性化】
AJAX是一个和服务器无关的技术,即服务器可使用:JavaEE,.NET,PHP,。。。这些技术都可
AJAX只管向服务器发送请求,同时只管接收服务器的HTML或XML或JSON载体响应
服务端不能使用转发或重定向到web页面,因为这样会起浏览器全面刷新
即只能以流的方式响应给浏览器