ajax-jquery-1

最新推荐文章于 2022-01-26 14:15:57 发布

iteye_1020

最新推荐文章于 2022-01-26 14:15:57 发布

阅读量92

点赞数

分类专栏： AJAX 文章标签： Ajax jQuery Servlet Firefox IE ViewUI

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1-ajax 用的小框架jquery

--------先用下面的PAGE测试一下SERVLET好不好用

<!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="js/jquery.js"></script>
    <script type="text/javascript" src="js/verify.js"></script>
    <script type="text/javascript" src="js/verifySimple.js"></script>
</head>
<body>
       hubin
       <hr/>
         <!--ajax need no form tag and good html need "" to-->
       <!--hold a value and must closed-->
        username: <input type="text" id="username" />
        <input type="button" value="logon" onclick="verifySimple()"/>
        <div id="result">cc</div>
        <span id="hb"></span>


       <hr/>

       <form action="ClassicServer" >
        username: <input type="text" name="name"/>
         <input type="submit" value="submit" />
    </form>
</body>
</html>

-------------------------------------------

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

public class ClassicServer extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        //System.out.println(httpServletRequest.getParameter("name"));
        //PrintWriter out = httpServletResponse.getWriter();
        //out.println("ncs");
         doPost(httpServletRequest, httpServletResponse);
    }

    @Override
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

        //use ajax
        //need 4 step
        try {
            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();
            //1.get parameter
            String old = httpServletRequest.getParameter("name");
            System.out.println(old);
            //2.check parameter
            if(old == null || old.length() == 0) {
                out.println("THE name must not be empty !");
            } else {
                 String name = old;
                //3.logic check parameter
                if(name.equals("hubin")) {
                     //4.return data (not a view)
                    out.println("the name is my lord !");
                } else {
                     //4.return data (not a view)
                    out.println("the name is other name");
                }
            }
        } catch (IOException e) {
            e.printStackTrace(); 
        }


    }
}

------------------------------------

<?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>ClassicServer</servlet-name>
        <servlet-class>ClassicServer</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ClassicServer</servlet-name>
        <url-pattern>/ClassicServer</url-pattern>

    </servlet-mapping>
</web-app>

----------------------
这个最最早的，可以用
-----------

function verify(){
    //alert("verify is ok !")
    var jqueryObj = $("#username");
    var name = jqueryObj.val();

    //alert(name);
    $.get("/idea/ClassicServer?name=" + name,null,callback);
}

function callback(nn){
    //alert(nn);
   var resultObj = $("#result");
    resultObj.html(nn);
    //alert(nn);
 }

-----------------------
这个是简化的，非常好用
---------------

function verifySimple(){
    alert("dd");
   // alert($("#username").val) ;
    $.get("/idea/ClassicServer?name=" + $("#username").val(), null, function(data) {
        $("#result").html(data);
    });

}

-----------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>myindex</title>
    <script type="text/javascript" src="js/my.js"></script>
  </head>
<body>
     myindex page
       <hr/>

        username: <input type="text" id="username" />
        <input type="button" value="logon" onclick="verify()"/>
        <div id="result">cc</div>
        <span id="hb"></span>


       <hr/>


</body>
</html>

-----------------------
上面的PAGE是配合下面的JS用的
------------------------

var myXmlHttpRequest;
//全局的，所以function 都可以 call

function verify() {
    //do it myself ajax
    //1. use dom to get data       username is the id 
    var userName = document.getElementById("username").value;


    //2 .create XMLHTTPREQUEST OBJECT
    // difficult because many browers
    if(window.XMLHttpRequest) {
        //due to FireFox Mozillar Opera,Safari  IE7 IE8
        myXmlHttpRequest = new XMLHttpRequest();
        //only for some mozillar browers
        if (myXmlHttpRequest.overrideMimeType) {
            myXmlHttpRequest.overrideMimeType("text/xml") ;
        }

    } else if (window.ActiveXObject) {
         //only for IE6 IE5 IE5.5
        //两个可以创建XMLHTTPRequest对象的控件名称，保存在一个JS的数组里

        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i =0 ;i<activexName.length;i++) {
            try{
                //取一个看看可不可以创建，
                // OK了就break
                //NG，就 异常，然后重新来
                myXmlHttpRequest = new ActiveXObject(activexName[i]);
                break;
            } catch(e) {

            }
        }

    }

    if(!myXmlHttpRequest) {
        alert("XMLHttpRequest对象创建失败！");
    } else {
        alert(myXmlHttpRequest);
    }

     //2
    //好了，刚刚也测试过了，可以了    在IE里是[object]
    //在firefox里是[object XMLHttpRequest]
    //现在开始用
    //就当是第二步吧  要注册callback 函数

    myXmlHttpRequest.onreadystatechange = callback;
    //上面就是一个名字，不要用（），用（）就表示是执行函数了

     //3. 设置连接信息
    //第一个参数表示HTTP的请求方式，支持所有HTTP的请求方式，主要使用GET POST
    // 第二个参数表示URL地址，get方式 请求的参数也在URL里
    //第三个参数 表示 采用异步还是同步交互，true 表示 异步
    //注意POST不一样的
      myXmlHttpRequest.open("GET","ClassicServer?name="+userName,true) ;

      //4. 发数据 和 server 进行 交互
        myXmlHttpRequest.send(null);//这是NULL 因为是GET嘛，数据在URL里过去了
        // 在同步方式下，send这话会在服务器数据返回来后再 往下执行
    //异步方式下，send这话执行完后 就往下 继续 执行了
}

//数据回来，自动调用这个方法
function callback() {
        //判断对象的状态是不是交互完成了
    if(myXmlHttpRequest.readyState == 4) {
          // 判断HTTP的交互是不是成功了
        if(myXmlHttpRequest.status == 200) {
            //获取服务器段返回的数据
             //数据有两种 1 text 2 xml
              var responseText = myXmlHttpRequest.responseText;    //服务器输出的文本，我可以得到了
            //吧数据 显示在PAGE上
            //现在是纯DOM 所以要麻烦些
            var divNode = document.getElementById("result");
            divNode.innerHTML = responseText;
        }
    }
}