您的位置：首页 > 理论基础 > 计算机网络

AJAX入门

2008-01-08 12:42 162 查看

1. AJAX概述。

1.1什么是AJAX。

 1.2 为什么使用AJAX？ 
1.2.1 传统web应用的不足
 1.2.2 AJAX对于请求的处理
 1.2.3AJAX的优势
 1.2.4AJAX能干什么？
 1.3 AJAX的工作原理
 2.AJAX 实例讲解
2.1类、属性和方法
var req;   if(window.ActiveXObject)     ...{       req = new ActiveXObject("Microsoft.XMLHTTP");   ／／IE创建方式     }else...{       req = new XMLHttpRequest();      } 由于IE是以ActiveX对象引入的，所以我们要检测是否支持 ActiveXObject来判断用户使用的是否为IE。（2）属性responseText、responseXML、onreadystatechange 、readyState和status是XMLHttpRequest类的主要属性。responseText：用于接受服务器返回的字符串。responseXML：用于接受服务器返回的XML文件。onreadystatechange：处理请求的方法的名字。一般用匿名方法实现。readyState： 用于判断交互状态0 (未初始化)  1 (正在装载) 2 (装载完毕) 3 (交互中) 4 (完成)。status：一般用来返回服务器的HTTP状态码，status为200表示“成功”，status为404代表“页面未找到”。（3）方法req.open('GET', URL, true);open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。req.send(null);发送参数如果有参数req.send("username="+user_name);用request取得。
 2.2实例验证用户名是否存在。
<body>  <html:form action="/register" onsubmit="return sub()">   <table>    <tr>     <td>      用户名     </td>     <td valign="top">      <html:text property="name" onchange="nameChange()" />     </td>     <td valign="top">      <div id="name1">       <font size="2">*用户名在5-50位之间</font>       <div>     </td>    </tr>   </table>   <html:submit value="注册" />  </html:form> </body></html> 第二步：书写AJAX代码。 在页面的head中加入以下代码：<SCRIPT LANGUAGE="JavaScript">  function nameChange()...{     if(document.all.name.value=="")...{    document.all.name1.innerHTML="<font size=2 color=red>！用户名不合法，不可以为空</font>";    return false;   }else...{    if(document.all.name.value.length<5||document.all.name.value.length>50)...{     document.all.name1.innerHTML="<font size=2 color=red>！用户名不合法，必须在5-50位之间</font>";     return false;    }else...{     var req;     if(window.ActiveXObject)       ...{         req = new ActiveXObject("Microsoft.XMLHTTP");        }else...{         req = new XMLHttpRequest();        }        if (req) ...{         req.onreadystatechange=function() ...{         if (req.readyState==4 && req.status==200) ...{//判断状态，4是已发送，200已完成           if(req.responseText==0)...{             document.all.name1.innerHTML="<font size=2 color=blue>用户名可以正常使用!~</font>";             return true;           }else if(req.responseText==1)...{             document.all.name1.innerHTML="<font size=2 color=red>！用户名已经被占用</font>";             return false;           }else...{             document.all.name1.innerHTML="<font size=2 color=blue>正在查询。。~</font>";             return false;           }        }      }      req.open('POST', 'register.do?test=1&name='+document.all.name.value);      req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');      req.send("");      //发送参数如果有参数req.send("username="+user_name);用request取得    }   }  } }第二步：在register.do 中加入相应代码。  public ActionForward execute(ActionMapping mapping, ActionForm form,   HttpServletRequest request, HttpServletResponse response) ...{  RegisterForm registerForm = (RegisterForm) form;// TODO Auto-generated method stub  ActionForward af=new ActionForward();  UserDao ud=new UserDao();  if(registerForm.getName()==null)...{   af=mapping.getInputForward();  }else...{   if("1".equals(request.getParameter("test")))...{    //验证用户名的代码。    try ...{     PrintWriter out = response.getWriter();     //在这里可以根据从数据库中查询的数据返回不同的值。1：用户存在，0：用户不存在        if(ud.getUserByName(request.getParameter("name")))...{      out.print(1);      //ajax取得都是字符的输出。如果数据量大的话，还可以用xml来发送和接受      }else...{      out.print(0);     }          return null;     //注意：这里必须return null 否则页面接收不到返回值。         } catch (IOException e) ...{     // TODO Auto-generated catch block     e.printStackTrace();    }   }else...{    //正常注册的代码。    User u=new User();    u.setName(registerForm.getName());    u.setPassword(registerForm.getPwd());    u.setSex(registerForm.getSex());    ud.save(u);       }     }  return af; } 
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                ajax
                                                xmlhttprequest
                                                服务器
                                                javascript
                                                mozilla
                                                asynchronous
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航