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;
}
}
}
------------------------------
最最麻烦的一种,但是没有用矿加!
如果熟悉J2EE的 目录,可以试一下,效果非常不错!!
分享到:
相关推荐
Ajax-jquery-ajax-cache.zip,jquery插件,用于用“localstorage”或“sessionstorage”缓存ajax。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页...
JS-Ajax-jQuery笔记,学习笔记,JavaScript,JS-Ajax-jQuery笔记,学习笔记,JavaScript,
Ajax-JQuery-Ajax-POST-in-Codeigniter.zip,如何将带有数据的ajax post请求发送到codeigniter控制器,而不刷新页面并将数据返回到视图。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json...
Ajax-online-chat-with-php-jquery-ajax-codeigniter.zip,这个应用程序表示使用codeigniter php框架、jquery和ajax的在线聊天。我还添加了表示用于测试应用程序的数据库的sql文件。只有首先导入数据库(chat.sql),...
Ajax-jQuery-Ajax-Dynamic-Select.zip,从数据库中获取筛选记录的简单应用程序,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...
Ajax-jquery-ajax-progress.zip,使用xhr.onprogress事件调用“progress”回调的jquery的一个简单补丁,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态...
第五部分ajax\第16章 ajax-jquery
Ajax-laravel-jquery-ajax-crud.zip,用jquery的ajax特性简单实现laravel crud,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...
通过`ajax-jquery-demos`中的实例,你可以深入理解并掌握如何利用jQuery实现Ajax请求,包括数据的发送与接收、错误处理以及与用户的交互。学习和实践这些示例,将有助于提升你的前端开发技能,使你在构建现代Web应用...
Ajax-crud-ajax-json-jquery-php.zip,crud-ajax、php、jquery,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...
Ajax-jquery-tabledit.zip,与bootstrap兼容的html表的内联编辑器,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...
标题“PHP-JQuery-Ajax-json”揭示了这个压缩包文件主要涉及的是Web开发中的核心技术,具体包括PHP、jQuery、Ajax以及JSON。这四个元素在构建动态、交互式的Web应用程序时起着至关重要的作用。 1. **PHP(Hypertext...
Ajax-swagger-jquery-ajax.zip,这是对jquery ajax工具的一种炫耀,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...
Ajax-jquery-ajaxreadystate.zip,jquery ajaxreadystate插件,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...
Ajax-jquery-spa.zip,轻松地将任何standart网站转换为单页应用程序,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...
Java 8 和 AJAX-JQuery 是两个在Web开发中至关重要的技术。Java 8 是 Java 语言的一个重要版本,引入了许多新特性,提升了开发效率和代码的简洁性;而 AJAX(Asynchronous JavaScript and XML)和 JQuery 是...
Ajax-jquery-actualizer.zip,jquery ajax实现器,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改...
标题中的"Ajax-jQuery-JDBC"揭示了三个关键的技术领域:Ajax、jQuery和JDBC。让我们逐一深入探讨这些技术。 **Ajax(异步JavaScript和XML)**是一种在不刷新整个网页的情况下更新部分网页内容的技术。它通过在后台...
Ajax-jquery-pjax.zip,pushState ajax=pjax,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改。
Ajax-jquery.poseidon.zip,支持轮询的轻量级jquery ajax插件,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...