`
hubin4
  • 浏览: 96605 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

ajax-jquery-1

    博客分类:
  • AJAX
阅读更多
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

    Ajax-jquery-ajax-cache.zip,jquery插件,用于用“localstorage”或“sessionstorage”缓存ajax。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页...

    JS-Ajax-jQuery笔记1

    JS-Ajax-jQuery笔记,学习笔记,JavaScript,JS-Ajax-jQuery笔记,学习笔记,JavaScript,

    Ajax-JQuery-Ajax-POST-in-Codeigniter.zip

    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

    Ajax-online-chat-with-php-jquery-ajax-codeigniter.zip,这个应用程序表示使用codeigniter php框架、jquery和ajax的在线聊天。我还添加了表示用于测试应用程序的数据库的sql文件。只有首先导入数据库(chat.sql),...

    Ajax-jQuery-Ajax-Dynamic-Select.zip

    Ajax-jQuery-Ajax-Dynamic-Select.zip,从数据库中获取筛选记录的简单应用程序,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...

    Ajax-jquery-ajax-progress.zip

    Ajax-jquery-ajax-progress.zip,使用xhr.onprogress事件调用“progress”回调的jquery的一个简单补丁,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态...

    第16章 ajax-jquery\

    第五部分ajax\第16章 ajax-jquery

    Ajax-laravel-jquery-ajax-crud.zip

    Ajax-laravel-jquery-ajax-crud.zip,用jquery的ajax特性简单实现laravel crud,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...

    ajax-jquery-demo

    通过`ajax-jquery-demos`中的实例,你可以深入理解并掌握如何利用jQuery实现Ajax请求,包括数据的发送与接收、错误处理以及与用户的交互。学习和实践这些示例,将有助于提升你的前端开发技能,使你在构建现代Web应用...

    Ajax-crud-ajax-json-jquery-php.zip

    Ajax-crud-ajax-json-jquery-php.zip,crud-ajax、php、jquery,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...

    Ajax-jquery-tabledit.zip

    Ajax-jquery-tabledit.zip,与bootstrap兼容的html表的内联编辑器,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    PHP-JQuery-Ajax-json

    标题“PHP-JQuery-Ajax-json”揭示了这个压缩包文件主要涉及的是Web开发中的核心技术,具体包括PHP、jQuery、Ajax以及JSON。这四个元素在构建动态、交互式的Web应用程序时起着至关重要的作用。 1. **PHP(Hypertext...

    Ajax-swagger-jquery-ajax.zip

    Ajax-swagger-jquery-ajax.zip,这是对jquery ajax工具的一种炫耀,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    Ajax-jquery-ajaxreadystate.zip

    Ajax-jquery-ajaxreadystate.zip,jquery ajaxreadystate插件,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...

    Ajax-jquery-spa.zip

    Ajax-jquery-spa.zip,轻松地将任何standart网站转换为单页应用程序,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    达内 java 8_Ajax-JQuery

    Java 8 和 AJAX-JQuery 是两个在Web开发中至关重要的技术。Java 8 是 Java 语言的一个重要版本,引入了许多新特性,提升了开发效率和代码的简洁性;而 AJAX(Asynchronous JavaScript and XML)和 JQuery 是...

    Ajax-jquery-actualizer.zip

    Ajax-jquery-actualizer.zip,jquery ajax实现器,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改...

    Ajax-jQuery-JDBC

    标题中的"Ajax-jQuery-JDBC"揭示了三个关键的技术领域:Ajax、jQuery和JDBC。让我们逐一深入探讨这些技术。 **Ajax(异步JavaScript和XML)**是一种在不刷新整个网页的情况下更新部分网页内容的技术。它通过在后台...

    Ajax-jquery-pjax.zip

    Ajax-jquery-pjax.zip,pushState ajax=pjax,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改。

    Ajax-jquery.poseidon.zip

    Ajax-jquery.poseidon.zip,支持轮询的轻量级jquery ajax插件,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...

Global site tag (gtag.js) - Google Analytics