Ajax基础应用与实例.doc

Ajaxday011. Ajax简介l Ajax：asynchronouse javascript and xml作用：增强用户的交互体验l Web1.0servlet + JSP + JavaBeanl Web2.0Ajaxl Web3.0flax - flush2. 同步和异步l 同步操作：在JSP/Servlet中发送一个同步的requet，这是用户必须等待响应特点：返回一整张页面l 异步操作：发送了一个异步的request，这时用户不用等待，可以进行后续的操作特点：返回一张页面的局部内容（异步刷新）3. Ajax1) 异步请求对象JavaScript对象存在浏览器差异FF：XMLHttpRequestvar xhr = new XMLHttpRequest();window.XMLHttpRequestIE：ActiveXObjectvar xhr = new ActiveXObject(Microsoft.XMLHTTP);window.ActiveXObjectvar xhr = new ActiveXObject(MSXML2.5.0.XMLHTTP);var xhr = new ActiveXObject(MSXML2.4.0.XMLHTTP);2) xhr相关方法xhr.open(POST|GET , url);建立连接xhr.send();传输数据3) xhr相关属性xhr.readyState浏览器为这个属性赋值数字类型的属性0xhr初始化1xhr发送请求2xhr|servlet接受到请求3servlet提供response的时候4response到达html页面的时候xhr.onreadystatechange事件监听属性xhr.onreadystatechange=funcation()if(xhr.readyState=4) /xxxxxXhr.status返回结果的状态码200正常返回的状态码404500xhr.responseText返回的文本内容xhr.responseXML返回的XML内容当4) 案例1：get方式*【参见：web_day16am_110602.zip】reg1.html /小技巧：通过$()获得标签 function $(tagId) return document.getElementById(tagId); function checkUserName() /1 获得 input 中数据 var name = $(nameId).value; /2 Ajax xhr 发送异步请求 /2.1 创建xhr var xhr ; if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); else if(window.ActiveXObject) xhr = new ActiveXObject(Microsoft.XMLHTTP); /2.2 发送请求 /注意：get方式发送时用?传了数据，send()方法参数就为null；post要写 xhr.open(GET,/ajax/checkServlet?name=+name); xhr.send(null); /2.3 监听Servlet异步返回的结果 xhr.onreadystatechange = function() if(xhr.readyState=4&xhr.status=200) /DOM - input写内容 var ret = xhr.responseText; var span = $(msgId); /innerHTML作用 方便往标签中增加内容 span.innerHTML = +ret+ ; 5) 案例2：post方式*【参见：web_day16pm_110602.zip】reg2.html/伪代码 1 xhr var xhr = new XMLHttpRequest(); var xhr = new ActiveXObject(Microsoft.XMLHTTP); http:/localhost:8080/servletapp/TestServlet?name=xxxx 2 xhr.open(post,ServletURL); /属性 通过这个属性的设置 可以让Servlet中 通过 request.getParameter(name);-值 xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); xhr.send(name=+name); /QueryString 3 xhr.onreadystatechange=function() |mutiple/form-data(文件上传) request.getParameter(name); request.getParameter(password);l xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); 通过设置该属性，可以让Servlet通过request.getParameter()获得属性l mutiple/form-data用于文件上传6) 案例3：传输复杂数据【参见：web_day16pm01_110602.zip】query.html知识点：l var xml =xhr.responseXML 指获得xml文档的根，此处指l Ajax输出对象或集合时，需要在服务器端XML格式的对象数据，然后通过DOM输出到页面4. AjaxUtils.js（体会）【参见：web_day16pm02_110602.zip】ajaxUtils.jsvar Ajax = createXHR:function() if(window.XMLHttpRequest) var xhr = new XMLHttpRequest(); return xhr; else if(window.ActiveXObject) var xhr = new ActiveXObject(Microsoft.XMLHTTP); return xhr; , sendRequest:function(method,url,data,callback) var xhr = this.createXHR(); /调用自己的方法要用this xhr.open(method,url); if(method=GET) xhr.send(null); else if(method=POST) xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); xhr.send(data); xhr.onreadystatechange=function() if(xhr.readyState=4&xhr.status=200) var p = text:xhr.responseText, xml:xhr.responseXML callback(p); ;调用【参见：web_day16pm02_110602.zip】reg3.html function $(tagId) return document.getElementById(tagId); function checkUserName() var name = $(nameId).value; Ajax.sendRequest(POST,/ajax/checkServlet,name=+name,cb); function cb(c) var ret = c.text; var span = $(msgId); /innerHTML作用 方便往标签中增加内容 span.innerHTML = +ret+ ; day021. JSON1) 简介2) JSON初步a. 传输数据格式JavaScript1. 对象-字符串JSON.stringify(student) var student= name:ss, password:1234, favrate:java,js var student2= name:ss1, password:12341, favrate:java,js var smap = 1:student,2:student2; 注意：JSON中的Map alert(JSON.stringify(smap);知识点：l JSON中的Map集合var map = a:aa,2:bb;alert(mapa);alert(map2);2. 字符串-对象JSON.parse() 与JSON.stringify()互逆 var jsonObj = name:ss,password:1234,favrate:java,js; var stu = JSON.parse(jsonObj); for(idx in stu) alert(stuidx); 注意：JSON字符串中的必须转义Java注意：需要导入JSON的jar包1. JSON串转-Java对象JSONObject.fromObject(str);将字符串转换为对象public static void main(String args) String jsonString = name:ss,password:1234,age:27;JSONObject jobj = JSONObject.fromObject(jsonString);User u = (User)jobj.toBean(jobj,User.class);System.out.print(u.getName();2. JSON数组-Java对象JSONArray.toCollection()把JSON数组转换为对象public static void main(String args) String jstr = name:abc,name:liyi;JSONArray ja = JSONArray.fromObject(jstr);Collection c = JSONArray.toCollection(ja , User.class);List us = new ArrayList(c); /用Colleciton构造ArrayListSystem.out.println(us.get(0).getName();知识点：l 用Collection构造ListList us = new ArrayList(c);3. Java对象-JSON串public static void main(String args) User u = new User();u.setName(aaaa);u.setPassword(1234);JSONObject jobj = JSONObject.fromObject(u);System.out.println(jobj.toString();4. Java数组-JSON串int a = 1,2,3;JSONArray jobj = JSONArray.fromObject(a);System.out.println(jobj.toString(); 5. Map-JSON串Map m = new HashMap();m.put(1, a); /注意：key只能为字符串JSONObject jobj = JSONObject.fromObject(m);System.out.println(jobj.toString();知识点：l Map转换时要用JSONObjectl Map的key必须是字符串b. 案例1：Ajax传输复杂数据（修改day01案例3）query.html【参看：web_day17pm_110603.zip】ajaxWebRootday2query.html function createTd(tdValue) var td = document.createElement(td); var txt = document.createTextNode(tdValue); td.appendChild(txt); return td; function createTr(tds) var tr = document.createElement(tr); for(var i=0;itds.length;i+) tr.appendChild(tdsi); return tr; function query() /1 发送异步请求 Ajax.sendRequest(GET,/ajax/queryAllStudentsServlet,null,fun); /2 接收返回值 进行DOM的处理 function fun(data) var span = document.getElementById(l); span.innerHTML = ; var students = JSON.parse(data.text); var tb = document.getElementById(tb); for(idx in students) var student = studentsidx; var nameTd = createTd(); var ageTd = createTd(student.age); var emailTd = createTd(student.email); var tr = createTr(nameTd,ageTd,emailTd); tb.appendChild(tr); Loading. QueryAllStudentsServlet.java【参看：web_day17pm_110603.zip】ajaxWebRootday2package com.tarena.ajax.day2;import java.io.IOException;import java.io.PrintWriter;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.j