BlogJava-花花JAVA-随笔分类-ajax_jquery

ajax总结

花-花 — Wed, 14 Jan 2009 03:04:00 GMT

ajax应用开发的五个步骤：
    1.创建XMLHttpRequest对象 ( 注意各浏览器间的差异 ).
    2.注册回调函数onreadystatechange ( 别加括号 ).
    3.open( "get/post","url",true ) ( true 表示异步 )
    4.send(null/"...")  ( get方式为null，post设置所传参数 )
    5.写回调函数，处理返回的数据( xml / text ).

*    ajax返回的是数据，传统的web交互返回的是页面( html+css )。
*    xmlHttp.onreadystatechange=callback; 这里的callback不能加()，因为这是将这个方法注册给onreadystatechange，如果加了()，就相当于把callback的返回值注册给了onreadystatechange。
*    异步方式，数据回来后就自动调用回调函数，页面就被改变了。
*    ajax不需要表单

的提交方式。
*

块级元素，独占一行。内联元素，会连接起来，不会分行。

ajax当前框架：
DOJO，DWR，ext，JQuery，mootools，prototype，script.aculo.us，rico

利用时间戳解决浏览器缓存：
只要url一致，浏览器就会读取缓存，不会去再次请求服务器。所以可以用时间做参数，来骗过浏览器读缓存。

花-花 2009-01-14 11:04 发表评论

jquery实现ajax通信

花-花 — Thu, 08 Jan 2009 09:41:00 GMT

在这里用2个案例，来说明jquery是怎样来实现ajax通信的
案例环境：[ tomcat6.0, struts1 ]

* jquery的API，返回的都是jquery对象。

案例：
1) load 方式请求ajax，返回值在div中显示，载入远程html文件代码并插入到DOM中。
ajax_2.jsp：

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
    <head>
        <script type="text/javascript" src="jquery-1.2.6-vsdoc-cn.js">script>
        <script type="text/javascript">
            //用jquery处理ajax请求
            function doajax(){            ajax请求的url地址        传递到后台的数组参数             后台返回来的结果
                $('#testja').load('/ajaxTest/jquery-ajax/testajax.do',{param:456},function(responseText){
                    alert(responseText);
                });
            }
        script>
    head>

    <body>
        <a href="javascript:doajax();">测试jquery-ajaxa>
        <div id="testja">div>
    body>
html>

2) get/post 方式请求ajax，上述doajax()代码可改写为：

3) $.ajax({...}) 更多的控制ajax细节：

//控制细节
            function doajax(){
                $.ajax({
                    type: "post",
                    url: "/ajaxTest/jquery-ajax/testajax.do",
                    data: "param=456123&aa=aaa",
                    success: function(responseText){
                        $('#testja').html(responseText);
                    }
                });
            }

4) $.ajaxSetup({...}) 全局设置ajax默认选项，语法等同于$.ajax({...})。

//全局设定ajax
            $.ajaxSetup({
                data: "param=456&aa=aaa"
            });

            //控制细节
            function doajax(){
                $.ajax({                                        --------------------->
                    type: "post",                                                            可以将$.ajax({...})中的设置，全部提到$.ajaxSetup({...})，更加通用。但必须至少保留$.ajax({...})
                    url: "/ajaxTest/jquery-ajax/testajax.do",
                    //data: "param=456123&aa=aaa",
                    success: function(responseText){
                        $('#testja').html(responseText);
                    }
                });
            }

AjaxTestAction：

public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        String str1 = request.getParameter("param");
        StringBuffer sb = new StringBuffer(str1);
        sb.append("+123");
        String responseText = sb.toString();

        // 回传处理的结果，到之前页面
        response.getWriter().println(responseText);          <------- 用这种方式将值传回给页面
        return null;
    }

5) jquery实现ajax返回XML格式的数据。

后台Action中组装一个XML格式，并且注意response.setContentType("text/xml;charset=utf-8");

花-花 2009-01-08 17:41 发表评论

jquery源文件及chm帮助文档（非常好的东西）

花-花 — Thu, 08 Jan 2009 03:48:00 GMT

jquery-1.2.6源文件及帮助文档压缩包下载：
【非常好的东东，学会了这个chm文档，你就能灵活使用jquery了】

点击这里下载：/Files/huashuai/jquery126.rar

* jquery兼容了各种浏览器，不必在担心浏览器兼容问题。
* 遵循W3C的html应该在页面顶部加上""

花-花 2009-01-08 11:48 发表评论

XMLHttpRequest对象介绍

花-花 — Wed, 07 Jan 2009 09:38:00 GMT

是一个ActiveX控件，IE5.5以上，firefox都内嵌。

方法：
.void open(String method,String url,Boolean async);     //打开并准备好要发送的请求
        //method：分为post、get，post带的数据量大
        //url：ajax所请求的具体地址
        //async：true表示异步，才能使用ajax通信，true/false

.void send(String body);     //发送请求，也就是说，在这之前要准备好一切
        //body：为所要发送的内容体，如果没有内容体，则传入null

.void setHeader(String header,String value);    //为request设置头信息
        //头信息的名称，头信息的值

.String getResponseHeader(String header);     //得到某一条响应的头信息
        //头信息的名称

.String getAllResponseHeader();    //以字符串的形式，返回所有响应头信息

.void abort();    //发出请求后，取消关闭这个请求

属性：

.Number readyState
    // 0.表示这个对象没有被初始化
    // 1.调用abort()方法后，会变为1，表示loading
    // 2.调用send()方法后，会变为2，表示loaded
    // 3.表示已经获得了部分数据
    // 4.完成（成功/失败） -----------> 其实就关心这个就可以了

.Function onreadystatechange
    //是回调函数，在readyState改编后被调用

.String responseText     //返回纯文本对象(即"字符串")
.XMLDocument responseXML     //返回"xml对象"
    //都是在readyState为4的时候使用的，获得response的body内容，xmlhttp.responseText

.Number status         String statusText
    200 ok                    //表示成功
    404 notfound         //表示页面没有找到，资源没有找到
    500   内部错误

花-花 2009-01-07 17:38 发表评论

一个最简单的ajax应用

花-花 — Wed, 07 Jan 2009 03:42:00 GMT

Ajax(Asynchronous JavaScript and XML,异步JavaScript与XML)，俗称“阿贾克斯”。
由4部分组成：JS + CSS + DOM + XMLHttpRequest

案例：实现ajax异步通信，局部刷新。开发环境：tomcat服务器(必须)。。

ajax_1_1.html：

将上述doajax换成 "POST" 方法请求ajax：

//post方式请求ajax，需要设置setRequestHeader，将参数放置在send中。
    function doajax_post() {
        createXMLHttpRequest();
        var par = "abcd";
        xmlHttp.open("POST", "/ajax_jquery/ajax_old/testajax.do", true);
        //需要设置setRequestHeader
        xmlHttp.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");
        xmlHttp.onreadystatechange = startCallback;
        //在send()方法中传参
        xmlHttp.send("param=" + par);
    }

ajax_2_2.jsp：(注意字符编码问题)

<%@ page language="java" pageEncoding="UTF-8"%>
异步测试成功，恭喜您！！！

将上述返回值的形式改为 XML： ( 只要改一下回调函数。Action中需要设置response.setContentType("text/xml;charset=utf-8"); )

* Action返回给ajax数据的方式：response.getWriter().println("responseText");

花-花 2009-01-07 11:42 发表评论