`

AJAX学习笔记1

    博客分类：
  • AJAX
AjaxjQueryServletJavaEEXML 
阅读更多

前端页面：index.jsp

<%--
  Created by IntelliJ IDEA.
  User: wustrive_2008
  Date: 2011-3-22
  Time: 18:24:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>myajax校验</title>
    <script type="text/javascript" src="verify1.js"></script>
</head>
<body>
    用户名： <input type="text" id="username" />
            <input type="button" value="提交" onclick="verify()"/>
<div id="message" style="color:red"></div>
</body>
</html>

服务器端Servlet：AJAXServlet.java及web.xml

AJAXServlet.java:

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
 * Created by IntelliJ IDEA.
 * User: wustrive_2008
 * Date: 2011-3-22
 * Time: 18:30:12
 * To change this template use File | Settings | File Templates.
 */
public class AJAXServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
          try{
              resp.setContentType("text/html;charset=UTF-8");
              PrintWriter out=resp.getWriter();
              String name=req.getParameter("name");
              if(name==null||name.length()==0){
                  out.print("用户名不能为空！");
              }else{
                    if(name.equals("wustrive_2008")){
                        out.println("此用户名已经注册！");
                    }else{
                        out.println("恭喜你！该用户可以注册！");
                    }
              }
          }catch(Exception e){
                   e.printStackTrace();
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);

    }
}
web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
          http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
           version="2.5">
 <servlet>
     <servlet-name>AJAXServlet</servlet-name>
     <servlet-class>AJAXServlet</servlet-class>
 </servlet>
 <servlet-mapping>
     <servlet-name>AJAXServlet</servlet-name>
     <url-pattern>/AJAXServlet</url-pattern>
 </servlet-mapping>

<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>

</web-app>


一，使用XMLHttpRequest对象:verify1.js

var xmlhttp;
function  verify(){
    var userName=document.getElementById("username").value;
    if(window.XMLHttpRequest()){
        xmlhttp=new XMLHttpRequest();
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml");
        }
    }else if(window.ActiveXObject()){
            var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
            for(var i=0;i<activexName.length;i++){
               try{
                   xmlhttp=new ActiveXObject(activexName[i]);
                   break;
               }catch(e){

               }
            }
    }
    xmlhttp.onreadystatechange=callback;
   //发送get请求
   /*xmlhttp.open("GET","AJAXServlet?name="+userName,true);
    xmlhttp.send(null);*/
    //发送post请求
    xmlhttp.open("POST","AJAXServlet");
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlhttp.send("name="+userName);
}
function callback(){
    if(xmlhttp.readyState==4){
        if(xmlhttp.status==200){
            var response=xmlhttp.responseText;
            var h=document.getElementById("message");
            h.innerHTML=response;
        }
    }
}
二，使用JQuery库：verify.js(在index.jsp中导入jquery库文件及verify.js文件)

function verify(){
    //jquery查找节点的方式。参数中#加上ID属性值可以找到一个节点
    //jquery的方法返回的都是jquery对象，可以继续在上面执行其他jquery方法
    var jqueryObj= $("#username")
    var username=jqueryObj.val();
    //alert(username);
  
    //2，将数据发送到服务器Servlet
    $.get("AJAXServlet?name="+username,null,callback);

}
function callback(data){
     //3,接受服务器端返回的数据 data

    //4,将数据动态显示到前台
    var messageObj=$("#message");
    messageObj.html(data);
   
}

2
顶
0
踩
分享到：
| PHP学习笔记之自定义函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics