hubin4 发表于 2013-1-23 02:21:32

ajax-jquery-1

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" />      <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/javaeehttp://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" />      <div id="result">cc</div>      <span id="hb"></span>       <hr/></body></html>
-----------------------
上面的PAGE是配合下面的JS用的
------------------------
var myXmlHttpRequest;//全局的,所以function 都可以 callfunction 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,SafariIE7 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);                break;            } catch(e) {            }      }            }    if(!myXmlHttpRequest) {      alert("XMLHttpRequest对象创建失败!");    } else {      alert(myXmlHttpRequest);    }   //2    //好了,刚刚也测试过了,可以了    在IE里是    //在firefox里是    //现在开始用    //就当是第二步吧要注册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;      }    }}
------------------------------
最最麻烦的一种,但是没有用矿加!

如果熟悉J2EE的 目录,可以试一下,效果非常不错!!
页: [1]
查看完整版本: ajax-jquery-1