1-ajax 用的小框架jquery
--------先用下面的PAGE测试一下SERVLET好不好用
-------------------------------------------
------------------------------------
----------------------
这个最最早的,可以用
-----------
-----------------------
这个是简化的,非常好用
---------------
-----------------------------
-----------------------
上面的PAGE是配合下面的JS用的
------------------------
------------------------------
最最麻烦的一种,但是没有用矿加!
如果熟悉J2EE的 目录,可以试一下,效果非常不错!!
--------先用下面的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;
}
}
}
------------------------------
最最麻烦的一种,但是没有用矿加!
如果熟悉J2EE的 目录,可以试一下,效果非常不错!!