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

  • 相关阅读:
    hdu 4614 线段树 二分
    cf 1066d 思维 二分
    lca 最大生成树 逆向思维 2018 徐州赛区网络预赛j
    rmq学习
    hdu 5692 dfs序 线段树
    dfs序介绍
    poj 3321 dfs序 树状数组 前向星
    cf 1060d 思维贪心
    【PAT甲级】1126 Eulerian Path (25分)
    【PAT甲级】1125 Chain the Ropes (25分)
  • 原文地址:https://www.cnblogs.com/zxpgo/p/2571395.html
Copyright © 2011-2022 走看看