java相关课程系列笔记之十一ajax学习建议用wps打开

目一、Ajax概 什么是 Ajax对象：如何获得Ajax对 Ajax对象的属 编程步 编码问 Ajax的优 缓存问题（IE浏览器 案例：修改1.8案例，使用post请 二、 什么是 数据交 轻量 JSON语法 如何使用JSON来编写Ajax应用程 同步请 案例：修改1.8案例step1中的JS代码（使用同步请求 一、Ajax概述Xml的技术，其实质是利用浏览器内置的一个特殊对象（XMLHttpRequestAjax对Xml文档AjaxAjax对象：如何获得Ajax对象functiongetXhr(){//注意：后面的案例都将用到此函数varxhr=null;functiongetXhr(){//注意：后面的案例都将用到此函数varxhr=null; }return} }return}Ajax对象的属性oneadystaecanereadystatechange。Ajax对象的readyState属性发生改变，比如从0到1，则会产生onreadystatechange事件。3）responML：获得服务器返回的Xml文档。5）readyStateAjaxnumber类型的值。5个值，分别是：①0（②1（③2（④3（⑤4（编程步骤getstep1Ajax对象，比如：varxhr=getXhr();//调用之前定义的函数step2Ajaxget请求xhr.open('get',check_username.do?username=chang&age=23,true);方法：建true：表示异步请求（Ajax对象发送请求时，用户可以对当前页面作其他false：表示同步请求（Ajax对象发送请求时，浏览器会锁定当前页面，用functionfunctiondom操作……}}poststep1Ajax对象，比如：varxhr=getXhr();//调用之前定义的函数step2Ajaxpost请求content-type消息头getsend因为按照HTTP协议的要求，发送post请求时，应该发送一个content-typeAjax对象在默认情况下，不会发送这个消息setRequestHeader方法来添加。编码问题getIE浏览器内置的Ajax对象会使用“GBK”或“GB2312”对中文参数进行编码，而其他浏览器（Chrom、Firefox）内置的Ajax对象会使用“utf-8”对中文参数进行编码。服务<Connectorport="8080"maxThreads="150"minSpareThreads="25"maxSpareThreads="75"enableLookups="false"redirectPort="8443"acceptCount="100"<Connectorport="8080"maxThreads="150"minSpareThreads="25"maxSpareThreads="75"enableLookups="false"redirectPort="8443"acceptCount="100"step2encodeURI()函数（JS中内置函数）对请求地址进行编码。encodeURI()varuir='check_username.do?username='+$F('username');post所有浏览器（一般指三大浏览器：Chrom、Firefox、IE）Ajax对象都会使用注意事项：FirefoxAjax的优点缓存问题（IE浏览器getIE浏览器（其他浏览器没这个问题）内置的Ajax对象会检查请求地址是否过，post方式发请求。3）案例：在IE浏览器中测试缓存问题step1：getNumber.jsp页面"<divfunctiongetNumber(){varvarfunctiongetNumber(){varvar}}step3：ServletserviceifRandomr=newRandom();}案例：简易（使用Ajax进行相关验证，get请求varxhr=getXhr();//step1获得Ajax//step2Ajax var functioncheck_number(){//检查varxhr=getXhr();var <formaction="regist.do" 用户名：<formaction="regist.do" 用户名：<inputtype="textname="usernameid="username"<spanclass="tips"真 ：<inputtype="text" ：<inputtype="text"name="number"id="number"onblur="check_number();"/><ahref="javascript:;"<spanclass="tips"<inputtype="submitvalue="提交hefaarphref="#"一起使用，表示a元素不再指向一个地址，而是点击后触发一个PrintWriterout=response.getWriter();Stringuri=PrintWriterout=response.getWriter();Stringuri=Stringaction=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));if(action.equals("/check_username")){Stringusername=request.getParameter("username");try{//模拟耗时操作Thread.sleep(6000);}catch(InterruptedExceptione){}thrownewServletException("someerror"); StringStringnumber1=request.getParameter("number");HttpSessionsession=request.getSession();String }else 案例：修改1.8案例，使用post请求functioncheck_username_post(){varxhr=getXhr();varfunctioncheck_username_post(){varxhr=getXhr();var}}案例：使用Ajax实现下拉列表Stringname=request.getParameter("name"); }else Stringname=request.getParameter("name"); }else step2：select.jsp<select<selectid="s1"<divfunctionvarfunctionvarif(xhr.readyState==4){var }}二、JavaScriptObjectNatation，是一种轻量级的数据交换技术规范（数据交换将数据转换成一种中间的，与平台无关的数据格式（XmlJSON字符串）发送轻量级JSONXmlXml现在用的少了（AjaxxXml交换数据。JSON语法 {varobj={'name':'chang','age':22};functionf2(){//表示一个对象}varvarobj={'name':'chang','age':22};functionf2(){//表示一个对象}var }}注意事项：JavaScript中创建对象的三种方式（JavaScript8章：Json语法来创建varvarp=varobj=newvarobj=new = obj.age==1=this.age=}vararr=[{'name':'chang','age':22},{'name':'bo','age':23}];}如何使用JSON来编写Ajax应用程序一般使用JSON提供的API（json-lib）来实现转换（6个包：1主5副。也可用谷歌提供的API。例如例如 /**效果：{'name':'chang','code':'10086','price':12.8}*/publicstaticvoidtest1(){Stocks=newStock(); /**效果：{'name':'chang','code':'10086','price':12.8}*/publicstaticvoidtest1(){Stocks=newStock(); JSONObjectobj=JSONObject.fromObject(s);//json对象StringjsonStr= /**/**publicstaticvoidtest2(){Randomr=newRandom(); DecimalFormatdf=newDecimalFormat("#.##");for(inti=0;i<3;i++){ Stocks=newStock(); doubleJSONArray}String publicstaticvoidtest3()publicstaticvoidtest3()Stock[]stocks=newRandomr=newDecimalFormatdf=newfor(inti=0;i<3;i++){ Stocks=newStock(); JSONArray}String step2：JSONJavaScriptjs文件，里面提供了很多常用的函数，比如： ：分别依据function var//alert(typeof//prototype框架提供的evalJSONJavaScript function varvar 案例：的实时行/**JSON/**JSONRandomr=newRandom(); DecimalFormatdf=newDecimalFormat("#.##");for(inti=0;i<8;i++){ Stocks=newStock(); s.setCode("6000"+r.nextInt(30));doubleprice=r.nextInt(100)+r.nextDouble(); stocks.add(s);}JSONArrayarray=JSONArray.fromObject(stocks);//将Java数组转成JSON字符串StringjsonStr=array.toString(); <body<body<divid="d1"><div 名称 代码 <tbodyfunctionf1(){ functionf1(){ functionquoto(){ varxhr=getXhr(); xhr.onreadystatechange=function(){if(xhr.readyState==4){vartxt=vararr=txt.evalJSON();//将json字符串转换成javascript对象组成的数组varhtml='';//将数组中的数据取出来，添加到tbody html+='<tr><td>'+arr[i].name+'</td><td>'+arr[i].code+'</td><td>'+arr[i].price+ $('tb1').innerHTML= 注意事项：innerHTML属性对于IEtdtable里的其他节tr、tbody、thead、caption都不能赋值，只能用它去读（兼容性问题。案例：显示热卖的前3个商品publicList<Sale>publicList<Sale>limit(inttop)throwsList<Sale>list=newArrayList<Sale>(); Connectionconn=DBUtil.getConnection();PreparedStatementprep=conn.prepareStatement("select*fromchang_saleorderbyqtydesclimitprep.setInt(1,ResultSetSalesale=new return step3：ActionServletserviceifintSaleDAOdao=newSaleDAO(); List<Sale>sales=newArrayList<Sale>();try{sales=dao.limit(top); JSONArrayarray=JSONArray.fromObject(sales);StringjsonStr=array.toString(); out.println(jsonStr);}catch(Exceptione){ functionfunctionquoto(){ varxhr=getXhr();}varif(xhr.readyState==4){ varfunctionfunctionquoto(){ varxhr=getXhr();}varif(xhr.readyState==4){ vartxt=xhr.responseText;vararr=txt.evalJSON(); varhtml=''; html+='<tr><td>'++'</td><td>'+arr[i].qty+$('tb1').innerHTML=html;} }同步请求xhr.responseText方法来获得服务器返回的数据。例如：if(navigator.userAgent.indexOf('Firefox')!=-1){return return'other';}//}functionif(getType()!