Ajax技术(2)--比较完整的原始ajax写法

 转载地址:http://abstractforever.iteye.com/blog/524148
 刚开始学习Ajax，当然是先把原理性的东西弄懂了，在去用什么js框架，那样才能得心应手：
 以下是我收集的资料，写的注释比较多，适合快速理解和上手使用，因为大部分是js代码，就没有专门写成js文件。
 originalityAjax.HTML代码如下：

      HTML代码 
      
    
 <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
 <htmlheadtitle>最原始的ajax写法</ 
Metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"Metahttp-equiv="description"content="thisismypage"Metahttp-equiv="content-type"content="text/html;charset=UTF-8" <!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->
scripttype="text/javascript" //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
 varxmlHttpRequest;
 //用户名校验的方法
 functionverify(){
 varsuccess=createXMLHTTPRequest();
 if(!success){
 return;
 }
 varuserName=document.getElementById("userName").value;//获取用户名字
 //2.注册回调函数
 //注册回调函数时，之需要函数名，不要加括号
 //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
 xmlHttpRequest.onreadystatechange=callback;
 //3。设置连接信息
 //第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
 //第二个参数表示请求的URL地址，get方式请求的参数也在url中
 //第三个参数表示采用异步还是同步方式交互，true表示异步
 //记住在url后面加上时间戳
 //xmlHttpRequest.open("GET","OriginalityAjaxAction?username="+userName,true);
 //POST方式请求的代码
 xmlHttpRequest.open("POST","OriginalityAjaxAction",250); line-height:18px"> //POST方式需要自己设置http的请求头
 xmlHttpRequest.setRequestHeader("Content-Type",
 "application/x-www-form-urlencoded");
 //POST方式发送数据
 xmlHttpRequest.send("username="+userName);
 //4.发送数据，开始和服务器端进行交互
 //同步方式下，send这句话会在服务器段数据回来后才执行完
 //异步方式下，send这句话会立即完成执行
 //xmlHttpRequest.send(null);
 //回调函数
 functioncallback(){
 //alert(xmlHttpRequest.readyState);
 //5。接收响应数据
 //判断对象的状态是交互完成
 if(xmlHttpRequest.readyState==4){
 //判断http的交互是否成功
 if(xmlHttpRequest.status==200){
 //获取服务器器端返回的数据
 //获取服务器段输出的纯文本数据
 varresponseText=xmlHttpRequest.responseText;
 //将数据显示在页面上
 //通过dom的方式找到div标签所对应的元素节点
 vardivNode=document.getElementById("result");
 //设置元素节点中的html内容
 divNode.innerHTML=responseText;
 }else{
 alert("出错了！！！");
 //创建XMLHTTPRequest对象来进行AJAX的异步数据交互
 functioncreateXMLHTTPRequest(){
 //1.创建XMLHttpRequest对象
 //这是XMLHttpReuquest对象无部使用中最复杂的一步
 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
 if(window.XMLHttpRequest){
 //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
 xmlHttpRequest=newXMLHttpRequest();
 //针对某些特定版本的mozillar浏览器的BUG进行修正
 if(xmlHttpRequest.overrideMimeType){
 xmlHttpRequest.overrideMimeType("text/xml");
 }elseif(window.ActiveXObject){
 //针对IE6，IE5.5，IE5
 //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
 //排在前面的版本较新
 varactivexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
 for(vari=0;iactivexName.length;i++){
 try{
 //取出一个控件名进行创建，如果创建成功就终止循环
 //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
 xmlHttpRequest=newActiveXObject(activexName[i]);
 break;
 }catch(e){
 //确认XMLHTtpRequest对象是否创建成功
 if(!xmlHttpRequest){
 alert("XMLHttpRequest对象创建失败!!");
 returnfalse;
 //0-本地响应成功
 //alert(xmlhttp.readyState);
 returntrue;
scriptbody 请输入要验证的用户名字(输入admin试试)：br/>
inputtype="text"id="username"/>inputtype="button"value="校验"onclick="verify()"divid="result">div>
 和servlet交互的，OriginalityAjaxAction.java代码如下：

      Java代码 
      
    
packageweb.action;importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.servletexception;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
 //对原始的ajax页面请求的控制器
publicclassOriginalityAjaxActionextendsHttpServlet{
privatestaticfinallongserialVersionUID=1978049925174268801L;
voiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsservletexception,IOException{
this.doPost(request,response);
voiddoPost(HttpServletRequestrequest,250); line-height:18px"> request.setCharacterEncoding("UTF-8");
 Stringusername=request.getParameter("username");
 response.setCharacterEncoding("UTF-8");
 PrintWriterout=response.getWriter();
//将数据返回给页面
if(username.equals("admin")){
 out.print("用户：[admin]已经被使用了");
 }else{
 out.print("用户：["+username+"]可以使用");
 }
 web.xml的servlet配置如下：

      Xml代码servletservlet-name>OriginalityAjaxActionservlet-class>web.action.OriginalityAjaxActionservlet-mappingurl-pattern>/OriginalityAjaxAction 以上简单的页面和servlet交互，返回一个字符串结果。
 下面进行扩展，解析servlet返回的xml数据，为了保证代码的完整性，下面列出完整代码：
 originalityAjaxXml.html
>最原始的ajax解析xml数据写法//读取后台xml数据的方法 functionreadxml(){
 xmlHttpRequest.send(null);
 varrootNode=xmlHttpRequest.responseXML;;
 //利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组
 varproductNodes=rootNode.getElementsByTagName("product");
 //将获取到的内容解析成表格显示
productNodes.length;i++){//创建行数
 varproduct=document.createElement("TR");
 //每行8的td标签
 varname=document.createElement("TD");
 name.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("name")[0].firstChild.nodeValue));//给name赋值
 vardescription=document.createElement("TD");
 description.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("description")[0].firstChild.nodeValue));
 varprice=document.createElement("TD");
 price.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("price")[0].firstChild.nodeValue));
 varimage=document.createElement("TD");
 image.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("image")[0].firstChild.nodeValue));
 varseries=document.createElement("TD");
 series.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("series")[0].firstChild.nodeValue));
 vartriband=document.createElement("TD");
 triband.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("triband")[0].firstChild.nodeValue));
 varcamera=document.createElement("TD");
 camera.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("camera")[0].firstChild.nodeValue));
 varvideo=document.createElement("TD");
 video.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("video")[0].firstChild.nodeValue));
 //将所有的td依附到tr上去
 product.appendChild(name);
 product.appendChild(description);
 product.appendChild(price);
 product.appendChild(image);
 product.appendChild(series);
 product.appendChild(triband);
 product.appendChild(camera);
 product.appendChild(video);
 document.getElementById("productBody").appendChild(product);
 读取服务器的xml数据:
inputtype="button"value="读取"onClick="readxml()" 解析xml数据为表格的形式：tableborder="1"id="productTable"tbodyid="productBody"trtd>name>description>price>image>series>triband>camera>videotbodytable 后台的catalog.xml数据代码：
<?xmlversion="1.0"encoding="utf-8"?>
catalogproductproductId="1"name>Nokia6010中文的哈description>Easytousewithoutsacrificingstyle,theNokia6010phoneoffersfunctionalvoicecommunicationsupportedbytextmessaging,multimediamessaging,mobileinternet,gamesandmoreprice>99.99image>Nokia_6010.gifseries>6000triband>falsecameravideohighlight1>MMShighlight2>LargecolordisplayqtyInStock>2productproductproductId="2">Nokia3100Blue>Lightupthenightwithaglow-in-the-darkcover-whenit'schargedwithlightyoucaneasilyfindyourphoneinthedark.Whenyougetacall,theNokia3100phoneflashesintunewithyourringingtone.AndwhenyousnaponaNokiaXpress-onâ„¢gamingcover*,you'llgetluminescentlighteffectsintimetothegamingaction.>139>Nokia_3100_blue.gif>3000>true>Glow-in-the-dark>Flashinglights>1productproductId="3">Nokia3100Pink>Nokia_3100_pink.gif>7productproductId="4">Nokia3120>Designedforbothbusinessandpleasure,theelegantNokia3120phoneoffersapleasingmixoffeatures.Enclosedwithinitschic,compactbody,youwilldiscoverthebenefitsoftri-bandcompatibility,acolorscreen,MMS,XHTMLbrowsing,cheerfulscreensavers,andmuchmore.>159.99>Nokia_3120.gif>Multimediamessaging>Animatedscreensavers>15productproductId="5">Nokia3220>TheNokia3220phoneisafreshnewcutonsomefamiliarideas-animateyourMMSmessageswithcutecharacters,seethemusicwithlightsthatflashintimewithyourringingtone,downloadwallpapersandscreensaverswithmatchingcolorschemesfortheinterface.>Nokia_3220.gif>MIDItones>Cut-outcovers>5
 OriginalityAjaxXmlAction.java代码如下：
importjava.io.File;
importorg.dom4j.Document;
importorg.dom4j.DocumentException;
importorg.dom4j.io.SAXReader;
//返回xml格式的数据
classOriginalityAjaxXmlAction response.setContentType("text/xml;charset=utf-8");
 response.setHeader("Cache-Control","no-cache");
 Stringpath=request.getSession().getServletContext().getRealPath("/")+"catalog.xml";
 SAXReadersaxReader=newSAXReader();
 Documentdocument=null;
try{
 document=saxReader.read(newFile(path));
catch(DocumentExceptione){
 e.printStackTrace();
 Stringxml=document.asXML();
 System.out.println(xml);
 out.print(xml);
 完整例子代码下载:ajaxDemo.rar(750.3 KB)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
上一篇：Ajax技术(1)--技术初探下一篇：Ajax技术(3)--JQuery中提供的ajax请

                  