当前位置: 代码迷 >> Ajax >> ajax入门范例
  详细解决方案

ajax入门范例

热度:269   发布时间:2012-07-24 17:47:57.0
ajax入门实例

下面就ajax入门做了一个简单的实例:
下面我们就开始吧

第一步:导入我们需要的jqurery.js在这里和我们myeclipse中有所不同需要我们去到工程的目录下把jqurery.js复制在我们在web目录新建的jslib目录中,这个目录用来存放我们的.js文件 就是javascript脚本 jqurery.js封装了许多的js我们只需去调用就行

第二步:编写一个Servlet 在src目录中新建一个AJAXServer

public class AJAXServer extends HttpServlet{

     protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);
    }

    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        try{
//            request.setCharacterEncoding("UTF-8");
//            response.setContentType("text/html;charset=gb18030");

            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();

            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
            int temp = 0;
            if (inte == null) {
                temp = 1;
            } else {
                temp = inte.intValue() + 1;
            }
            httpServletRequest.getSession().setAttribute("total",temp);

            //1.取参数
            String old = httpServletRequest.getParameter("name");
            //String name = new String(old.getBytes("iso8859-1"),"UTF-8");
             String name=null;
            if(!old.equals("") && (old != null))
            {
                 name = URLDecoder.decode(old,"UTF-8");
            }
            //2.检查参数是否有问题
            if(old == null || old.length() == 0){
                out.println("用户名不能为空");
            } else{
//                String name = URLDecoder.decode(old,"UTF-8");
//                byte[] by = old.getBytes("ISO8859-1");
//                String name = new String(by,"utf-8");
//                String name = URLDecoder.decode(old,"utf-8");
                //3.校验操作
//                String name = old;
                if(name.equals("liyong")){
                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
                    //写法没有变化,本质发生了改变
                    out.println("用户名[" + name + "]已经存在,请使用其他用户名, " + temp);
                } else{
                    out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, " + temp);
                }
            }
        } catch(Exception e){
            e.printStackTrace();
        }
    }
}

第三步:编写一个ajax.html提供用户提交数据

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
     <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/verify1.js"></script>
</head>
<body>
    ajax验证输入用户名:<br/>
     <input type="text" id="userName" >
    <input type="button" value="校验" onclick="verify()">
    <div id="result"></div>
</body>
</html>

第四步:编写上面需要的verify() js函数

//定义用户名校验
        function verify()
        {
           //通过ID找到这个节点
           var jQuryObj=$("#userName");
           //获取这个节点属性值
           var username=jQuryObj.val();
           //使用jQuery的XMLHTTPrequest对象的get请求的封装,代码运行到这里会继续向下运行
           //当服务器有数据返回的时候就去回调这个回调函数callback这里必须是函数名不能带有参数
           $.get("AJAXServer?name="+username,null,callback);
//    alert(username);
        }
        function callback(data)
        {
            //alert("服务器数据返回");
            //alert(data);
            var resultObj=$("#result");
            resultObj.html(data)
;
第五步:部署运行...
  相关解决方案