javaWeb笔记

11.AJAX(AsynchronousJavaScriptandXML)异步的Javascript与XML2.异步指的是不用等到前一个操作完成就可进入下一个操作。俩个操作或多个操作可“同时”进行。这极大的提高了用户体验。3.AJAX发送请求时并不刷新整个页面，只是进行局部刷新，因此我们并不能感知请求是否发送，只能通过第三方的调试工具才能看到，例如firebug等。4.不同的浏览器对Ajax的实现方式是不同的，Ajax中一个重要的对象为XMLHttpRequest，其中微软的IE6对该对象的实现是采用ActiveXObject控件的方式，而其它浏览器则采取了内置实现的方式。因此在Ajax编程时必须对其进行区分。例如如下的ajax.jsp页面：5.scripttype=text/javascript6.7.varxmlHttpRequest=null;//声明一个空对象以接收XMLHttpRequest对象8.9.functionajaxSubmit(){10.11.//alert(window.ActiveXObject);12.13.if(window.ActiveXObject){14.15.xmlHttpRequest=newActiveXObject(Microsoft.XMLHTTP);//IE浏览器16.17.}elseif(window.XMLHttpRequest){18.19.xmlHttpRequest=newXMLHttpRequest();//菲IE的其它浏览器20.}21.22.if(null!=xmlHttpRequest){23.24.varv1=document.getElementById(value1ID).value;225.26.varv2=document.getElementById(value2ID).value;27.28.xmlHttpRequest.open(POST,AjaxServlet,true);//准备发送数据29.30.xmlHttpRequest.onreadystatechange=ajaxCallback;//关联好Ajax的回调函数31.32.//使用POST方式提交，必须加上如下一行33.xmlHttpRequest.setRequestHeader(Content-Type,application/x-);34.35.xmlHttpRequest.send(v1=+v1+&v2=+v2);//真正向服务器发送数据；GET方式与POST方式的设置方式不一样36.}37.}38.39.40.41.functionajaxCallback(){42.43.//alert(test);44.if(xmlHttpRequest.readyState==4){45.46.if(xmlHttpRequest.status==200){47.48.varresponseText=xmlHttpRequest.responseText;49.50.document.getElementById(div1).innerHTML=responseText;51.}52.}53.}54./script55.56.57./head58.59.body60.inputtype=buttonvalue=getcontentfromserveronclick=ajaxSubmit();br/61.inputtype=textname=value1id=value1ID/br/362.inputtype=textname=value2id=value2ID/br/63.divid=div1/div64./body65./html相应的服务器端的servlet为AjaxServlet.java:publicclassAjaxServletextendsHttpServlet{@OverrideprotectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{System.out.println(doGetinvoked!);process(req,resp);}privatevoidprocess(HttpServletRequestreq,HttpServletResponseresp)throwsIOException{resp.setHeader(pragma,no-cache);resp.setHeader(cache-control,no-cache);Stringv1=req.getParameter(v1);Stringv2=req.getParameter(v2);Stringv3=String.valueOf(Integer.valueOf(v1)+Integer.valueOf(v2));PrintWriterout=resp.getWriter();//out.println(HelloWorld!);out.println(v3);out.flush();}@OverrideprotectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)4throwsServletException,IOException{System.out.println(doPostinvoked!);process(req,resp);}}1.Jquery的口号：writeless，domore。2.Jquery的ready()函数与onload属性的区别：onload为window窗口对象的一个属性。指的是当页面加载完了以后且页面中的dom元素的关联关系设定好了以后才去执行onload所关联的那个函数。而jquery中的ready()函数指的是当页面中的dom元素加载完毕后，且页面之间的关联关系还没设置好就立即执行参数中的函数。Window.onload属性只能关联一个函数，后面关联的函数将会覆盖前面关联的函数。而jquery中的ready()函数则能关联多个函数。被关联的函数依次执行例如：scripttype=text/javascriptfunctiontest1(){alert(Hello);}functiontest2(){alert(World);}5window.onload=test1;//下面这句将覆盖上面那句window.onload=test2;/scriptscripttype=text/javascriptsrc=jquery-1.5.js/scriptscripttype=text/javascript$(document).ready(function(){alert(Hello);});$(document).ready(function(){alert(World);});/script下面为使用原始的javascript代码与使用jquery完成同6一功能的代码：scripttype=text/javascriptwindow.onload=function(){varmyLinks=document.getElementsByTagName(a);for(vari=0;imyLinks.length;i++){myLinks[i].onclick=function(){alert(HelloWorld);}}}/script/headbodyahref=#test1/abr/ahref=#test2/abr/ahref=#test3/abr/ahref=#test4/abr/ahref=#test5/abr/ahref=#test6/abr/7/bodyscripttype=text/javascriptsrc=jquery-1.5.js/scriptscripttype=text/javascript$(document).ready(function(){$(a).click(function(){alert(HelloWorld);});});/script/headbodyahref=#test1/abr/ahref=#test2/abr/ahref=#test3/abr/8ahref=#test4/abr/ahref=#test5/abr/ahref=#test6/abr//bodyJquery中有一个特点：他对基本的javascript对象进行了再封装，转换成了jquery中的对象，并且把javascript中与事件有关的属性如onload、onclick转换成了ready()、click()等方法，这些方法一般都接受一个函数作为参数。Jquery对象与DOM对象的转换方法的实例如下：scripttype=text/javascriptsrc=jquery-1.5.js/scriptscripttype=text/javascript$(document).ready(function(){varpElement=document.getElementsByTagName(p)[0];//将DOM对象转换为jquery对象varpElementJQuery=$(pElement);//alert(DOM对象的结果：+pElement.innerHTML);//alert(jQuery对象的结果：+9pElementJQuery.html());varcm=$(#clickMe);//获得jquery对象//将jquery对象转换为DOM对象(第一种方式)vart=cm[0];alert(t.innerHTML);//将jquery对象转换为DOM对象(第二种方式)vars=cm.get(0);alert(s.innerHTML);});/script/headbodypid=clickMe点击我/p/bodybodyaid=hello10href==text/javascript//alert(document.getElementById(hello).href);if(document.getElementById(hello)){document.getElementById(hello).style.color=red;}/script/bodybodyaid=hellohref==color:red;ClickMe/ascripttype=text/javascript//$(#hello).css(color,red);写属性alert($(#hello).css(color));//读属性11//alert($(#hello));即使没有#hello表示的对象，也不为空//alert($(#hello).length);//alert($(#hello)[0]);如果有href属性，默认会获得该属性的值，如果没有该属性，则显示空。而不是null或undefined//alert($(#hello).get(0));同上/script/body注意：jquery中，如果函数只包含一个参数，那就是读，包含两个参数就是写。像上面的css()函数一样。注意通过jquery的$(#hello).css