zoukankan      html  css  js  c++  java
  • 史上最简单AJAX例子(转)

    AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 国内通常的读音为“阿贾克斯”。 
        下面是一个最简单的AJAX验证用户名是否存在的例子。 
         
         JSP页面 
    <%@ page language="java"  pageEncoding="utf-8"%> 
    <script type="text/javascript" language="javascript"> 
        //下面这个不理解没关系,反正就是为了不同的浏览器创建不同的XMLHttpRequest对象,照抄 
        function createXmlHttpRequest() 
        {       
       var xmlreq = false;   
       if (window.XMLHttpRequest) {   
        xmlreq = new XMLHttpRequest();     
       } else if (window.ActiveXObject) { 
         try {                              //创建较新版本的对象 
           xmlreq = new ActiveXObject("Msxml2.XMLHTTP");       
         } catch (e1) {                                                   
           try { 
             xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); 
           } catch (e2) {       
           } 
         } 
       } 
       return xmlreq; 
       } 
       
       function userNameCheck() 
      { 
          var username = document.all.username.value;//获得text的值 
          var request = createXmlHttpRequest();//创建request 对象 
          request.open("post","user.do?username="+username);//建立到服务器的新请求 
          request.send();//向服务器发送请求 
          request.onreadystatechange=function()//指定当readyState属性改变时的事件处理句柄 
          { 
              if (request.readyState==4)//提取当前HTTP的就绪状态,状态4表示:响应已完成,可以访问服务器响应并使用它 
                 if (request.status==200)//HTTP状态,我们期望的状态码是 200,它表示一切顺利。 
                 //如果就绪状态是 4 而且状态码是 200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据 
                    { 
                       var value = request.responseText;//服务器返回响应文本 
                       
                       if (value=="true") 
                       { 
                           document.all.unc.innerHTML="该用户名已存在"; 
                       } 
                       else 
                       { 
                            document.all.unc.innerHTML="OK"; 
                       } 
                    } 
          }     
           
      } 
    </script> 
    <html> 
      <head> 
           <title>AjaxTest</title> 
      </head> 
       
      <body> 
       用户姓名: <input type="text" name="username" onblur="userNameCheck()"/><font color="red" size="-1" id="unc"></font> 

      </body> 
    </html> 
    web.xml配置 
    <?xml version="1.0" encoding="UTF-8"?> 
    <web-app version="2.4" 
    http://java.sun.com/xml/ns/j2ee">http://java.sun.com/xml/ns/j2ee" 
    xmlns:http://www.w3.org/2001/XMLSchema-instance">http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLhttp://java.sun.com/xml/ns/j2ee">http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
      <welcome-file-list> 
        <welcome-file>index.jsp</welcome-file> 
      </welcome-file-list> 
       
      <servlet> 
      <servlet-name>user</servlet-name> 
      <servlet-class>chenlh.UserAction</servlet-class> 
      </servlet> 
      <servlet-mapping> 
      <servlet-name>user</servlet-name> 
      <url-pattern>/user.do</url-pattern>   
      </servlet-mapping> 
    </web-app> 

    servlet 

    package chenlh; 
    import java.io.IOException; 
    import javax.servlet.http.HttpServlet; 
    import javax.servlet.http.HttpServletRequest; 
    import javax.servlet.http.HttpServletResponse; 
    public class UserAction extends HttpServlet{ 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { 
            this.doPost(request, response); 
        } 
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException { 
            String username=request.getParameter("username"); 
            if(username.equals("chenlh")) 
             response.getWriter().print("true"); 
         else 
          response.getWriter().print("false"); 
        } 

     

    转自:http://devbbs.doit.com.cn/thread-27358-1-1.html

  • 相关阅读:
    数字三角形W(加强版) codevs 2189
    数字三角形W(加强版) codevs 2189
    线段树模板
    树状数组模板 洛谷3374
    洛谷 2327 [SCOI2005]扫雷
    洛谷 2327 [SCOI2005]扫雷
    洛谷1144 最短路计数
    洛谷1144 最短路计数
    洛谷1346 电车
    洛谷1346 电车
  • 原文地址:https://www.cnblogs.com/zxpgo/p/2571395.html
Copyright © 2011-2022 走看看