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

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

      Java代码 
      
    
 
   @H_353_502@ @H_502_19@packageweb.action; 
    importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
 @H_502_19@//对原始的ajax页面请求的控制器
publicclassOriginalityAjaxActionextendsHttpServlet{
privatestaticfinallongserialVersionUID=1978049925174268801L;
voiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
this.doPost(request,response);
voiddoPost(HttpServletRequestrequest,250); line-height:18px"> @H_502_19@request.setCharacterEncoding("UTF-8");
 @H_502_19@Stringusername=request.getParameter("username");
 @H_502_19@response.setCharacterEncoding("UTF-8");
 @H_502_19@PrintWriterout=response.getWriter();
//将数据返回给页面
if(username.equals("admin")){
 @H_502_19@out.print("用户：[admin]已经被使用了");
 @H_502_19@}else{
 @H_502_19@out.print("用户：["+username+"]可以使用");
 @H_502_19@}
 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)
上一篇：Ajax技术(1)--技术初探下一篇：Ajax技术(3)--JQuery中提供的ajax请
    
    
Ajax技术(2)--比较完整的原始ajax写法

猜你在找的Ajax相关文章
