知启蒙开源平台

Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
森中灵最后提交于3月前整理V8.0.6
ajax.htm26KB
<#def title = "AJAX"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "  AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术"/>
<#def prevUrl = "../nav/tabnav.htm"/>
<#def nextUrl = "imageClipper.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
<script>
<!--
function doChange(tabnav)
{
    doUpdateCode(Z(tabnav));
}

function doUpdateCode($this)
{//更新代码
    var html = $this.find("section > div").htmlt();
    $this.find("section > div").next("div > span").html(html);
}
//-->
</script>
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "tool", "ajax")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "Ajax")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <p class="z-text-blue">AJAX：</p>
    <p class="z-color-333" style="text-indent:38px;">
        AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
        凡狐AJAX采用面向RMI的概念设计，通过指定类和方法，传入参数对应方法的参数，通过RMI访问JAVA类的方法获取执行结果。
    </p>
</div>

<#-- 一、调用成功，回调函数（无参数的方法） -->
<div class="tutorial title">一、调用成功，回调函数（无参数的方法）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestSuccess()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("com.zhiqim.zhiqim.tutorial.presenter.AjaxPresenter");
        ajax.setMethodName("doTestSuccess");
        ajax.setFailureAlert();
        ajax.setSuccess(function(){Z.alert(this.responseText);});
        ajax.setLoading(document, true);
        ajax.execute();
    }
    </script>
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:void(0);" onclick="doTestSuccess();">点我执行[doTestSuccess]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
    2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>

<#-- 二、调用成功，回调函数（带参数、使用类别名@AnAlias） -->
<div class="tutorial title">二、调用成功，回调函数（带参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestParam()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestParam");
        ajax.addParam("111111");
        ajax.addParam("222222");
        ajax.setCallback(function()
        {
            Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
        });
        ajax.execute();
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestParam();">点我执行[doTestParam]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
    2、通过ajax.addParam();设置参数，参数个数和类型要和后端对应，支持字符串和基本类型
    3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>

<#-- 三、调用成功，显示到元素中（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">三、调用成功，显示到元素中（无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestSuccess2()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestSuccess");
        ajax.setCallback("successId");
        ajax.execute();
    }
    </script>
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestSuccess2();">点我执行[doTestSuccess]函数</a><br><br>
    <!-- 编写AJAX的响应结果 -->
    返回内容：<span id="successId"></span>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
    2、在页面上设置点击执行函数，把结果放置到Z("#"+id)中<br>
</div>
</section>
</div>

<#-- 四、调用成功，加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">四、调用成功，加载器，后端等待5秒（无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestLoading()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestLoading");
        ajax.setCallback(function()
        {
            Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
        });
        ajax.setLoading(document, true);
        ajax.execute();
    }
    </script>
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestLoading();">点我执行[doTestLoading]函数</a><br><br>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
    2、通过ajax.setLoading(document, true);设置全屏加载器且遮罩，然后执行<br>
    3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>

<#-- 五、调用成功，指定加载器元素，后端等待5秒（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">五、调用成功，指定加载器元素，后端等待5秒（无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestLoading2()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestLoading");
        ajax.setCallback("testLoading2");
        ajax.setLoading("testLoading2");
        ajax.execute();
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestLoading2();">点我执行[doTestLoading2]函数</a><br><br>
    
    <!-- 指定加载器的位置 -->
    <div id="testLoading2" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
    2、通过ajax.setLoading("testLoading2");设置在testLoading2上显示加载器无遮罩，然后执行<br>
    3、如果需要遮罩层，设置为ajax.setLoading("testLoading2", true);
    4、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>

<#-- 六、调用成功，自定义加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">六、调用成功，自定义加载器，后端等待5秒（无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestLoading3()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestLoading");
        ajax.setCallback("testLoading3");
        ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
        ajax.execute();
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestLoading3();">点我执行[doTestLoading3]函数</a><br><br>
    
    <!-- 指定加载器的位置 -->
    <div id="testLoading3" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
    2、通过Z.loading()函数自定义加载器，然后通过ajax.setLoading();设置到Z.Ajax中<br>
    3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>

<#-- 七、调用失败（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">七、调用失败（无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestError()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestError");
        ajax.setCallback(function()
        {
            Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
        });
        ajax.execute();
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestError();">点我执行[doTestError]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
    2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>

<#-- 八、调用异常（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">八、调用异常（无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestException()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestException");
        ajax.setCallback(function()
        {
            Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
        });
        ajax.execute();
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestException();">点我执行[doTestException]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
    2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
</div>
</section>
</div>

<#-- 九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestInterceptor()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestInterceptor");
        ajax.setCallback(function()
        {
            Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
        });
        ajax.execute();
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestInterceptor();">点我执行[doTestInterceptor]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
    2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
    3、拦截器由Java后端设置，如：
    <span class="z-text-prewrap z-pre">
    @AnInterceptor("chkAjax1")
    public static void doTestInterceptor(HttpRequest request)
    {
        request.setResponseResult("返回成功信息");
    }
    </span>
    <span class="z-text-prewrap z-pre">
    @AnAlias("chkAjax1")
    public class AjaxChk1Interceptor implements Interceptor
    {
        @Override
        public void intercept(HttpRequest request) throws Exception
        {
            request.setResponseError("拦截器不通过");
        }
    }
    </span>
</div>
</section>
</div>

<#-- 十、拦截器，未通过显示未通过信息（同步调用、无参数、使用类别名@AnAlias） -->
<div class="tutorial title">十、拦截器（同步调用、无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestSyncInterceptor()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setSync();
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestInterceptor");
        ajax.execute();
        
        Z.alert("状态："+ajax.responseStatus+"<br>信息："+ajax.responseText);
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestSyncInterceptor();">点我执行[doTestSyncInterceptor]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法<br>
    2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
    3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
    4、拦截器由Java后端设置，如：
    <span class="z-text-prewrap z-pre">
    @AnInterceptor("chkAjax1")
    public static void doTestInterceptor(HttpRequest request)
    {
        request.setResponseResult("返回成功信息");
    }
    </span>
    <span class="z-text-prewrap z-pre">
    @AnAlias("chkAjax1")
    public class AjaxChk1Interceptor implements Interceptor
    {
        @Override
        public void intercept(HttpRequest request) throws Exception
        {
            request.setResponseError("拦截器不通过");
        }
    }
    </span>
</div>
</section>
</div>

<#-- 十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias） -->
<div class="tutorial title">十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestInterceptor2()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestInterceptor2");
        ajax.setCallback(function()
        {
            alert("状态:"+this.responseStatus+",信息:"+this.responseText);
        });
        ajax.execute();
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestInterceptor2();">点我执行[doTestInterceptor2]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
    2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
    3、拦截器由Java后端设置，如：
    <span class="z-text-prewrap z-pre">
    @AnInterceptor("chkAjax2")
    public static void doTestInterceptor2(HttpRequest request)
    {
        request.setResponseResult("返回成功信息");
    }
    </span>
    <span class="z-text-prewrap z-pre">
    @AnAlias("chkAjax2")
    public class AjaxChk2Interceptor implements Interceptor
    {
    
        @Override
        public void intercept(HttpRequest request) throws Exception
        {
            request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
        }
    }
    </span>
</div>
</section>
</div>

<#-- 十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias） -->
<div class="tutorial title">十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 编写AJAX的函数 -->
    <script>
    function doTestSyncInterceptor2()
    {
        var ajax = new Z.Ajax();
        ajax.setContextPath("${context.getContextPath()}");
        ajax.setSync();
        ajax.setClassName("AjaxPresenter");
        ajax.setMethodName("doTestInterceptor2");
        ajax.execute();
        
        alert("状态:"+ajax.responseStatus+",信息:"+ajax.responseText);
    }
    </script> 
    <!-- 编写AJAX的点击调用 -->
    <a href="javascript:doTestSyncInterceptor2();">点我执行[doTestSyncInterceptor2]函数</a>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个AJAX调用函数，设置类类别名、类方法<br>
    2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
    3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
    4、拦截器由Java后端设置，如：
    <span class="z-text-prewrap z-pre">
    @AnInterceptor("chkAjax2")
    public static void doTestInterceptor2(HttpRequest request)
    {
        request.setResponseResult("返回成功信息");
    }
    </span>
    <span class="z-text-prewrap z-pre">
    @AnAlias("chkAjax2")
    public class AjaxChk2Interceptor implements Interceptor
    {
    
        @Override
        public void intercept(HttpRequest request) throws Exception
        {
            request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
        }
    }
    </span>
</div>
</section>
</div>

<#-- AJAX调用参数说明 -->
<div class="tutorial title">AJAX调用参数说明（请求参数十个，响应结果两个）</div>

<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
<tr bgcolor="#f5f5f5">
    <td width="20%">参数</td>
    <td width="30%">值</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td colspan="3" class="z-text-cyan">请求参数</td>
</tr>
<tr>
    <td class="z-samp">contextPath</td>
    <td>默认为空</td>
    <td>当前上下文环境路径，如/admin，默认为空表示根上下文路径</td>
</tr>
<tr>
    <td class="z-samp">className</td>
    <td>必须</td>
    <td>调用的类名或类别名，如AjaxPresenter/com.zhiqim.zhiqim.tutorial.presenter.AjaxPresenter</td>
</tr>
<tr>
    <td class="z-samp">methodName</td>
    <td>必须</td>
    <td>调用的类的方法名，如doTestInterceptor</td>
</tr>
<tr>
    <td class="z-samp">async</td>
    <td>true</td>
    <td>异常还是同步调用，默认异步，true|false</td>
</tr>
<tr>
    <td class="z-samp">params</td>
    <td>[]</td>
    <td>参数数组，可通过addParam();函数设置参数，如addParam("abc");</td>
</tr>
<tr>
    <td class="z-samp">callback</td>
    <td>null</td>
    <td>回调函数或回调elem的id<br>
        1、函数的this为Z.Ajax对象，可以通过this.responseStatus和this.responseText获取结果状态和结果文本<br>
        2、回调ID时，填写elem的id，即把this.responseText的值填充到elem中，有三种填充方式，见callbackMethod参数
    </td>
</tr>
<tr>
    <td class="z-samp">callbackMethod</td>
    <td>"html"</td>
    <td>回调ID时的方法，三种"html"|"text"|"val"</td>
</tr>
<tr>
    <td class="z-samp">callScript</td>
    <td>true</td>
    <td>是否在AJAX结果的改变重置由data-role的缓存，如Z.Tooltip,Z.Select等，true|false，默认true</td>
</tr>
<tr>
    <td class="z-samp">loading</td>
    <td>null</td>
    <td>三种加载器，通过方法setLoading();方法来设置<br>
        1、传入Z.loading对象，参数由对象指定，如ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
        2、传入target和是否遮罩，如ajax.setLoading(document, true);或无遮罩ajax.setLoading(document);
        3、传入targetId和是否遮罩，如ajax.setLoading("testLoading3", true);或无遮罩ajax.setLoading("testLoading3");
        4、传入一个函数，在加载时回调该函数，如ajax.setLoading(function(){});此方式用于自定义操作
    </td>
</tr>
<tr>
    <td class="z-samp">loadingParam</td>
    <td>null</td>
    <td>加载器参数，通过方法setLoading();方法来设置，是第二个参数<br>
        1、当loading是Z.loading和字符串时表示是否遮罩<br>
        2、当#ID时指定的HTML，成功后换回原始HTML
    </td>
</tr>
<tr>
    <td colspan="3" class="z-text-cyan">响应参数</td>
</tr>
<tr>
    <td class="z-samp">responseStatus</td>
    <td>0</td>
    <td>响应状态，0表示成功，601－603表示跳转，其他表示错误</td>
</tr>
<tr>
    <td class="z-samp">responseText</td>
    <td>null</td>
    <td>响应文本字符串，默认是text/plain格式，XML或JSON格式自行转化</td>
</tr>
</table>
</div>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}