|
|
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/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" /> <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,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; } }}
------------------------------
最最麻烦的一种，但是没有用矿加！
如果熟悉J2EE的 目录，可以试一下，效果非常不错！！ |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡