ajax.htm 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728
  1. <#def title = "AJAX"/>
  2. <#def keyword = "ZhiqimUI"/>
  3. <#def desc = " AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术"/>
  4. <#def prevUrl = "flexcopy.htm"/>
  5. <#def nextUrl = "drag.htm"/>
  6. ${zhiqim_com_header()}
  7. ${zhiqim_com_topnav("document")}
  8. <script>
  9. function doChange(tabnav)
  10. {
  11. doUpdateCode(Z(tabnav));
  12. }
  13. function doUpdateCode($this)
  14. {//更新代码
  15. var html = $this.find("section > div").htmlt();
  16. $this.find("section > div").next("div > span").html(html);
  17. }
  18. </script>
  19. <!--容器开始 -->
  20. <div id="container" class="container">
  21. <!--边导航-->
  22. ${zhiqim_com_ui("tutorial", "ui", "tool", "ajax")}
  23. <!--主体-->
  24. <div id="mainbody" class="mainbody">
  25. ${zhiqim_com_breadcrumb("文库", "教程", "Ajax")}
  26. <div class="content">
  27. <#-- 标题 -->
  28. <div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
  29. <p class="z-text-blue">AJAX:</p>
  30. <p class="z-color-333" style="text-indent:38px;">
  31. AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
  32. 知启蒙AJAX采用面向RMI的概念设计,通过指定类和方法,传入参数对应方法的参数,通过RMI访问JAVA类的方法获取执行结果。
  33. </p>
  34. </div>
  35. <#-- 一、调用成功,回调函数(无参数的方法) -->
  36. <div class="tutorial title">一、调用成功,回调函数(无参数的方法)</div>
  37. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  38. <nav>
  39. <ul class="zi-float-left">
  40. <li class="z-active">示例</li>
  41. <li>代码</li>
  42. <li>说明</li>
  43. </ul>
  44. </nav>
  45. <section style="min-height:150px;">
  46. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  47. <!-- 编写AJAX的函数 -->
  48. <script>
  49. function doTestSuccess()
  50. {
  51. var ajax = new Z.Ajax();
  52. ajax.setContextPath("${context.getContextPath()}");
  53. ajax.setClassName("ZuiPresenter");
  54. ajax.setMethodName("doTestSuccess");
  55. ajax.setFailureAlert();
  56. ajax.setSuccess(function(){
  57. Z.alert(this.responseText);
  58. });
  59. ajax.setLoading(document, true);
  60. ajax.execute();
  61. }
  62. </script>
  63. <!-- 编写AJAX的点击调用 -->
  64. <a href="javascript:void(0);" onclick="doTestSuccess();">点我执行[doTestSuccess]函数</a>
  65. </div>
  66. <div class="z-relative-left z-w100p z-pd10">
  67. <span class="z-text-prewrap z-pre"></span>
  68. </div>
  69. <div class="z-pd10 z-px16 z-lh200p">
  70. 1、定义一个AJAX调用函数,设置类名或类别名、类方法和回调函数,然后执行<br>
  71. 2、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  72. </div>
  73. </section>
  74. </div>
  75. <#-- 二、调用成功,回调函数(带参数、使用类别名@AnAlias) -->
  76. <div class="tutorial title">二、调用成功,回调函数(带参数、使用类别名@AnAlias)</div>
  77. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  78. <nav>
  79. <ul class="zi-float-left">
  80. <li class="z-active">示例</li>
  81. <li>代码</li>
  82. <li>说明</li>
  83. </ul>
  84. </nav>
  85. <section style="min-height:150px;">
  86. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  87. <!-- 编写AJAX的函数 -->
  88. <script>
  89. function doTestParam()
  90. {
  91. var ajax = new Z.Ajax();
  92. ajax.setContextPath("${context.getContextPath()}");
  93. ajax.setClassName("ZuiPresenter");
  94. ajax.setMethodName("doTestParam");
  95. ajax.addParam("111111");
  96. ajax.addParam("222222");
  97. ajax.setCallback(function()
  98. {
  99. Z.alert("状态:"+this.responseStatus+"\r\n信息:"+this.responseText);
  100. });
  101. ajax.execute();
  102. }
  103. </script>
  104. <!-- 编写AJAX的点击调用 -->
  105. <a href="javascript:doTestParam();">点我执行[doTestParam]函数</a>
  106. </div>
  107. <div class="z-relative-left z-w100p z-pd10">
  108. <span class="z-text-prewrap z-pre"></span>
  109. </div>
  110. <div class="z-pd10 z-px16 z-lh200p">
  111. 1、定义一个AJAX调用函数,设置类类别名、类方法和回调函数<br>
  112. 2、通过ajax.addParam();设置参数,参数个数和类型要和后端对应,支持字符串和基本类型
  113. 3、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  114. </div>
  115. </section>
  116. </div>
  117. <#-- 三、调用成功,显示到元素中(无参数、使用类别名@AnAlias) -->
  118. <div class="tutorial title">三、调用成功,显示到元素中(无参数、使用类别名@AnAlias)</div>
  119. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  120. <nav>
  121. <ul class="zi-float-left">
  122. <li class="z-active">示例</li>
  123. <li>代码</li>
  124. <li>说明</li>
  125. </ul>
  126. </nav>
  127. <section style="min-height:150px;">
  128. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  129. <!-- 编写AJAX的函数 -->
  130. <script>
  131. function doTestSuccess2()
  132. {
  133. var ajax = new Z.Ajax();
  134. ajax.setContextPath("${context.getContextPath()}");
  135. ajax.setClassName("ZuiPresenter");
  136. ajax.setMethodName("doTestSuccess");
  137. ajax.setCallback("successId");
  138. ajax.execute();
  139. }
  140. </script>
  141. <!-- 编写AJAX的点击调用 -->
  142. <a href="javascript:doTestSuccess2();">点我执行[doTestSuccess]函数</a><br><br>
  143. <!-- 编写AJAX的响应结果 -->
  144. 返回内容:<span id="successId"></span>
  145. </div>
  146. <div class="z-relative-left z-w100p z-pd10">
  147. <span class="z-text-prewrap z-pre"></span>
  148. </div>
  149. <div class="z-pd10 z-px16 z-lh200p">
  150. 1、定义一个AJAX调用函数,设置类名或类别名、类方法和回调函数,然后执行<br>
  151. 2、在页面上设置点击执行函数,把结果放置到Z("#"+id)中<br>
  152. </div>
  153. </section>
  154. </div>
  155. <#-- 四、调用成功,加载器,后端等待5秒(无参数、使用类别名@AnAlias) -->
  156. <div class="tutorial title">四、调用成功,加载器,后端等待8秒(无参数、使用类别名@AnAlias)</div>
  157. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  158. <nav>
  159. <ul class="zi-float-left">
  160. <li class="z-active">示例</li>
  161. <li>代码</li>
  162. <li>说明</li>
  163. </ul>
  164. </nav>
  165. <section style="min-height:150px;">
  166. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  167. <!-- 编写AJAX的函数 -->
  168. <script>
  169. function doTestLoading()
  170. {
  171. var ajax = new Z.Ajax();
  172. ajax.setContextPath("${context.getContextPath()}");
  173. ajax.setClassName("ZuiPresenter");
  174. ajax.setMethodName("doTestLoading");
  175. ajax.setCallback(function()
  176. {
  177. Z.alert("状态:"+this.responseStatus+"\r\n信息:"+this.responseText);
  178. });
  179. ajax.setLoading(document, true);
  180. ajax.execute();
  181. }
  182. </script>
  183. <!-- 编写AJAX的点击调用 -->
  184. <a href="javascript:doTestLoading();">点我执行[doTestLoading]函数</a><br><br>
  185. </div>
  186. <div class="z-relative-left z-w100p z-pd10">
  187. <span class="z-text-prewrap z-pre"></span>
  188. </div>
  189. <div class="z-pd10 z-px16 z-lh200p">
  190. 1、定义一个AJAX调用函数,设置类类别名、类方法和回调函数<br>
  191. 2、通过ajax.setLoading(document, true);设置全屏加载器且遮罩,然后执行<br>
  192. 3、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  193. </div>
  194. </section>
  195. </div>
  196. <#-- 五、调用成功,指定加载器元素,后端等待5秒(无参数、使用类别名@AnAlias) -->
  197. <div class="tutorial title">五、调用成功,指定加载器元素,后端等待8秒(无参数、使用类别名@AnAlias)</div>
  198. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  199. <nav>
  200. <ul class="zi-float-left">
  201. <li class="z-active">示例</li>
  202. <li>代码</li>
  203. <li>说明</li>
  204. </ul>
  205. </nav>
  206. <section style="min-height:150px;">
  207. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  208. <!-- 编写AJAX的函数 -->
  209. <script>
  210. function doTestLoading2()
  211. {
  212. var ajax = new Z.Ajax();
  213. ajax.setContextPath("${context.getContextPath()}");
  214. ajax.setClassName("ZuiPresenter");
  215. ajax.setMethodName("doTestLoading");
  216. ajax.setCallback("testLoading2");
  217. ajax.setLoading("testLoading2");
  218. ajax.execute();
  219. }
  220. </script>
  221. <!-- 编写AJAX的点击调用 -->
  222. <a href="javascript:doTestLoading2();">点我执行[doTestLoading2]函数</a><br><br>
  223. <!-- 指定加载器的位置 -->
  224. <div id="testLoading2" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
  225. </div>
  226. <div class="z-relative-left z-w100p z-pd10">
  227. <span class="z-text-prewrap z-pre"></span>
  228. </div>
  229. <div class="z-pd10 z-px16 z-lh200p">
  230. 1、定义一个AJAX调用函数,设置类类别名、类方法和回调函数<br>
  231. 2、通过ajax.setLoading("testLoading2");设置在testLoading2上显示加载器无遮罩,然后执行<br>
  232. 3、如果需要遮罩层,设置为ajax.setLoading("testLoading2", true);
  233. 4、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  234. </div>
  235. </section>
  236. </div>
  237. <#-- 六、调用成功,自定义加载器,后端等待5秒(无参数、使用类别名@AnAlias) -->
  238. <div class="tutorial title">六、调用成功,自定义加载器,后端等待8秒(无参数、使用类别名@AnAlias)</div>
  239. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  240. <nav>
  241. <ul class="zi-float-left">
  242. <li class="z-active">示例</li>
  243. <li>代码</li>
  244. <li>说明</li>
  245. </ul>
  246. </nav>
  247. <section style="min-height:150px;">
  248. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  249. <!-- 编写AJAX的函数 -->
  250. <script>
  251. function doTestLoading3()
  252. {
  253. var ajax = new Z.Ajax();
  254. ajax.setContextPath("${context.getContextPath()}");
  255. ajax.setClassName("ZuiPresenter");
  256. ajax.setMethodName("doTestLoading");
  257. ajax.setCallback("testLoading3");
  258. ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
  259. ajax.execute();
  260. }
  261. </script>
  262. <!-- 编写AJAX的点击调用 -->
  263. <a href="javascript:doTestLoading3();">点我执行[doTestLoading3]函数</a><br><br>
  264. <!-- 指定加载器的位置 -->
  265. <div id="testLoading3" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
  266. </div>
  267. <div class="z-relative-left z-w100p z-pd10">
  268. <span class="z-text-prewrap z-pre"></span>
  269. </div>
  270. <div class="z-pd10 z-px16 z-lh200p">
  271. 1、定义一个AJAX调用函数,设置类类别名、类方法和回调函数<br>
  272. 2、通过Z.loading()函数自定义加载器,然后通过ajax.setLoading();设置到Z.Ajax中<br>
  273. 3、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  274. </div>
  275. </section>
  276. </div>
  277. <#-- 七、调用失败(无参数、使用类别名@AnAlias) -->
  278. <div class="tutorial title">七、调用失败(无参数、使用类别名@AnAlias)</div>
  279. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  280. <nav>
  281. <ul class="zi-float-left">
  282. <li class="z-active">示例</li>
  283. <li>代码</li>
  284. <li>说明</li>
  285. </ul>
  286. </nav>
  287. <section style="min-height:150px;">
  288. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  289. <!-- 编写AJAX的函数 -->
  290. <script>
  291. function doTestError()
  292. {
  293. var ajax = new Z.Ajax();
  294. ajax.setContextPath("${context.getContextPath()}");
  295. ajax.setClassName("ZuiPresenter");
  296. ajax.setMethodName("doTestError");
  297. ajax.setCallback(function()
  298. {
  299. Z.alert("状态:"+this.responseStatus+"\r\n信息:"+this.responseText);
  300. });
  301. ajax.execute();
  302. }
  303. </script>
  304. <!-- 编写AJAX的点击调用 -->
  305. <a href="javascript:doTestError();">点我执行[doTestError]函数</a>
  306. </div>
  307. <div class="z-relative-left z-w100p z-pd10">
  308. <span class="z-text-prewrap z-pre"></span>
  309. </div>
  310. <div class="z-pd10 z-px16 z-lh200p">
  311. 1、定义一个AJAX调用函数,设置类类别名、类方法和回调函数<br>
  312. 2、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  313. </div>
  314. </section>
  315. </div>
  316. <#-- 八、调用异常(无参数、使用类别名@AnAlias) -->
  317. <div class="tutorial title">八、调用异常(无参数、使用类别名@AnAlias)</div>
  318. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  319. <nav>
  320. <ul class="zi-float-left">
  321. <li class="z-active">示例</li>
  322. <li>代码</li>
  323. <li>说明</li>
  324. </ul>
  325. </nav>
  326. <section style="min-height:150px;">
  327. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  328. <!-- 编写AJAX的函数 -->
  329. <script>
  330. function doTestException()
  331. {
  332. var ajax = new Z.Ajax();
  333. ajax.setContextPath("${context.getContextPath()}");
  334. ajax.setClassName("ZuiPresenter");
  335. ajax.setMethodName("doTestException");
  336. ajax.setCallback(function()
  337. {
  338. Z.alert("状态:"+this.responseStatus+"\r\n信息:"+this.responseText);
  339. });
  340. ajax.execute();
  341. }
  342. </script>
  343. <!-- 编写AJAX的点击调用 -->
  344. <a href="javascript:doTestException();">点我执行[doTestException]函数</a>
  345. </div>
  346. <div class="z-relative-left z-w100p z-pd10">
  347. <span class="z-text-prewrap z-pre"></span>
  348. </div>
  349. <div class="z-pd10 z-px16 z-lh200p">
  350. 1、定义一个AJAX调用函数,设置类类别名、类方法和回调函数<br>
  351. 2、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  352. </div>
  353. </section>
  354. </div>
  355. <#-- 九、拦截器,未通过显示未通过信息(无参数、使用类别名@AnAlias) -->
  356. <div class="tutorial title">九、拦截器,未通过显示未通过信息(无参数、使用类别名@AnAlias)</div>
  357. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  358. <nav>
  359. <ul class="zi-float-left">
  360. <li class="z-active">示例</li>
  361. <li>代码</li>
  362. <li>说明</li>
  363. </ul>
  364. </nav>
  365. <section style="min-height:150px;">
  366. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  367. <!-- 编写AJAX的函数 -->
  368. <script>
  369. function doTestInterceptor()
  370. {
  371. var ajax = new Z.Ajax();
  372. ajax.setContextPath("${context.getContextPath()}");
  373. ajax.setClassName("ZuiPresenter");
  374. ajax.setMethodName("doTestInterceptor");
  375. ajax.setCallback(function()
  376. {
  377. Z.alert("状态:"+this.responseStatus+"\r\n信息:"+this.responseText);
  378. });
  379. ajax.execute();
  380. }
  381. </script>
  382. <!-- 编写AJAX的点击调用 -->
  383. <a href="javascript:doTestInterceptor();">点我执行[doTestInterceptor]函数</a>
  384. </div>
  385. <div class="z-relative-left z-w100p z-pd10">
  386. <span class="z-text-prewrap z-pre"></span>
  387. </div>
  388. <div class="z-pd10 z-px16 z-lh200p">
  389. 1、定义一个AJAX调用函数,设置类类别名、类方法和回调函数<br>
  390. 2、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  391. 3、拦截器由Java后端设置,如:
  392. <span class="z-text-prewrap z-pre">
  393. @AnInterceptor("chkAjax1")
  394. public static void doTestInterceptor(HttpRequest request)
  395. {
  396. request.setResponseResult("返回成功信息");
  397. }
  398. </span>
  399. <span class="z-text-prewrap z-pre">
  400. @AnAlias("chkAjax1")
  401. public class AjaxChk1Interceptor implements Interceptor
  402. {
  403. @Override
  404. public void intercept(HttpRequest request) throws Exception
  405. {
  406. request.setResponseError("拦截器不通过");
  407. }
  408. }
  409. </span>
  410. </div>
  411. </section>
  412. </div>
  413. <#-- 十、拦截器,未通过显示未通过信息(同步调用、无参数、使用类别名@AnAlias) -->
  414. <div class="tutorial title">十、拦截器(同步调用、无参数、使用类别名@AnAlias)</div>
  415. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  416. <nav>
  417. <ul class="zi-float-left">
  418. <li class="z-active">示例</li>
  419. <li>代码</li>
  420. <li>说明</li>
  421. </ul>
  422. </nav>
  423. <section style="min-height:150px;">
  424. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  425. <!-- 编写AJAX的函数 -->
  426. <script>
  427. function doTestSyncInterceptor()
  428. {
  429. var ajax = new Z.Ajax();
  430. ajax.setContextPath("${context.getContextPath()}");
  431. ajax.setSync();
  432. ajax.setClassName("ZuiPresenter");
  433. ajax.setMethodName("doTestInterceptor");
  434. ajax.execute();
  435. Z.alert("状态:"+ajax.responseStatus+"\r\n信息:"+ajax.responseText);
  436. }
  437. </script>
  438. <!-- 编写AJAX的点击调用 -->
  439. <a href="javascript:doTestSyncInterceptor();">点我执行[doTestSyncInterceptor]函数</a>
  440. </div>
  441. <div class="z-relative-left z-w100p z-pd10">
  442. <span class="z-text-prewrap z-pre"></span>
  443. </div>
  444. <div class="z-pd10 z-px16 z-lh200p">
  445. 1、定义一个AJAX调用函数,设置类类别名、类方法<br>
  446. 2、通过ajax.setSync();设置表示设置成同步等待,同步调用时无需提供回调函数,直接在执行后读出结果即可<br>
  447. 3、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  448. 4、拦截器由Java后端设置,如:
  449. <span class="z-text-prewrap z-pre">
  450. @AnInterceptor("chkAjax1")
  451. public static void doTestInterceptor(HttpRequest request)
  452. {
  453. request.setResponseResult("返回成功信息");
  454. }
  455. </span>
  456. <span class="z-text-prewrap z-pre">
  457. @AnAlias("chkAjax1")
  458. public class AjaxChk1Interceptor implements Interceptor
  459. {
  460. @Override
  461. public void intercept(HttpRequest request) throws Exception
  462. {
  463. request.setResponseError("拦截器不通过");
  464. }
  465. }
  466. </span>
  467. </div>
  468. </section>
  469. </div>
  470. <#-- 十一、拦截器,未通过跳转到新页面(无参数、使用类别名@AnAlias) -->
  471. <div class="tutorial title">十一、拦截器,未通过跳转到新页面(无参数、使用类别名@AnAlias)</div>
  472. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  473. <nav>
  474. <ul class="zi-float-left">
  475. <li class="z-active">示例</li>
  476. <li>代码</li>
  477. <li>说明</li>
  478. </ul>
  479. </nav>
  480. <section style="min-height:150px;">
  481. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  482. <!-- 编写AJAX的函数 -->
  483. <script>
  484. function doTestInterceptor2()
  485. {
  486. var ajax = new Z.Ajax();
  487. ajax.setContextPath("${context.getContextPath()}");
  488. ajax.setClassName("ZuiPresenter");
  489. ajax.setMethodName("doTestInterceptor2");
  490. ajax.setCallback(function()
  491. {
  492. alert("状态:"+this.responseStatus+"\r\n信息:"+this.responseText);
  493. });
  494. ajax.execute();
  495. }
  496. </script>
  497. <!-- 编写AJAX的点击调用 -->
  498. <a href="javascript:doTestInterceptor2();">点我执行[doTestInterceptor2]函数</a>
  499. </div>
  500. <div class="z-relative-left z-w100p z-pd10">
  501. <span class="z-text-prewrap z-pre"></span>
  502. </div>
  503. <div class="z-pd10 z-px16 z-lh200p">
  504. 1、定义一个AJAX调用函数,设置类类别名、类方法和回调函数<br>
  505. 2、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  506. 3、拦截器由Java后端设置,如:
  507. <span class="z-text-prewrap z-pre">
  508. @AnInterceptor("chkAjax2")
  509. public static void doTestInterceptor2(HttpRequest request)
  510. {
  511. request.setResponseResult("返回成功信息");
  512. }
  513. </span>
  514. <span class="z-text-prewrap z-pre">
  515. @AnAlias("chkAjax2")
  516. public class AjaxChk2Interceptor implements Interceptor
  517. {
  518. @Override
  519. public void intercept(HttpRequest request) throws Exception
  520. {
  521. request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
  522. }
  523. }
  524. </span>
  525. </div>
  526. </section>
  527. </div>
  528. <#-- 十二、拦截器,未通过跳转到新页面(同步调用、无参数、使用类别名@AnAlias) -->
  529. <div class="tutorial title">十二、拦截器,未通过跳转到新页面(同步调用、无参数、使用类别名@AnAlias)</div>
  530. <div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
  531. <nav>
  532. <ul class="zi-float-left">
  533. <li class="z-active">示例</li>
  534. <li>代码</li>
  535. <li>说明</li>
  536. </ul>
  537. </nav>
  538. <section style="min-height:150px;">
  539. <div class="z-active z-pd10 z-px16" style="padding-top:40px">
  540. <!-- 编写AJAX的函数 -->
  541. <script>
  542. function doTestSyncInterceptor2()
  543. {
  544. var ajax = new Z.Ajax();
  545. ajax.setContextPath("${context.getContextPath()}");
  546. ajax.setSync();
  547. ajax.setClassName("ZuiPresenter");
  548. ajax.setMethodName("doTestInterceptor2");
  549. ajax.execute();
  550. alert("状态:"+ajax.responseStatus+"\r\n信息:"+ajax.responseText);
  551. }
  552. </script>
  553. <!-- 编写AJAX的点击调用 -->
  554. <a href="javascript:doTestSyncInterceptor2();">点我执行[doTestSyncInterceptor2]函数</a>
  555. </div>
  556. <div class="z-relative-left z-w100p z-pd10">
  557. <span class="z-text-prewrap z-pre"></span>
  558. </div>
  559. <div class="z-pd10 z-px16 z-lh200p">
  560. 1、定义一个AJAX调用函数,设置类类别名、类方法<br>
  561. 2、通过ajax.setSync();设置表示设置成同步等待,同步调用时无需提供回调函数,直接在执行后读出结果即可<br>
  562. 3、在页面上设置点击执行函数,通过设置callback回调得到responseStatus和responseText<br>
  563. 4、拦截器由Java后端设置,如:
  564. <span class="z-text-prewrap z-pre">
  565. @AnInterceptor("chkTutorialRedirect")
  566. public static void doTestInterceptor2(HttpRequest request)
  567. {
  568. request.setResponseResult("返回成功信息");
  569. }
  570. </span>
  571. <span class="z-text-prewrap z-pre">
  572. @AnAlias("chkTutorialRedirect")
  573. public class AjaxChk2Interceptor implements Interceptor
  574. {
  575. @Override
  576. public void intercept(HttpRequest request) throws Exception
  577. {
  578. request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
  579. }
  580. }
  581. </span>
  582. </div>
  583. </section>
  584. </div>
  585. <#-- AJAX调用参数说明 -->
  586. <div class="tutorial title">AJAX调用参数说明(请求参数十个,响应结果两个)</div>
  587. <table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
  588. <tr bgcolor="#f5f5f5">
  589. <td width="20%">参数</td>
  590. <td width="30%">值</td>
  591. <td width="*">说明</td>
  592. </tr>
  593. <tr>
  594. <td colspan="3" class="z-text-cyan">请求参数</td>
  595. </tr>
  596. <tr>
  597. <td class="z-samp">contextPath</td>
  598. <td>默认为空</td>
  599. <td>当前上下文环境路径,如/admin,默认为空表示根上下文路径</td>
  600. </tr>
  601. <tr>
  602. <td class="z-samp">className</td>
  603. <td>必须</td>
  604. <td>调用的类名或类别名,如ZuiPresenter/com.zhiqim.document.tutorial.ui.ZuiPresenter</td>
  605. </tr>
  606. <tr>
  607. <td class="z-samp">methodName</td>
  608. <td>必须</td>
  609. <td>调用的类的方法名,如doTestInterceptor</td>
  610. </tr>
  611. <tr>
  612. <td class="z-samp">async</td>
  613. <td>true</td>
  614. <td>异常还是同步调用,默认异步,true|false</td>
  615. </tr>
  616. <tr>
  617. <td class="z-samp">params</td>
  618. <td>[]</td>
  619. <td>参数数组,可通过addParam();函数设置参数,如addParam("abc");</td>
  620. </tr>
  621. <tr>
  622. <td class="z-samp">callback</td>
  623. <td>null</td>
  624. <td>回调函数或回调elem的id<br>
  625. 1、函数的this为Z.Ajax对象,可以通过this.responseStatus和this.responseText获取结果状态和结果文本<br>
  626. 2、回调ID时,填写elem的id,即把this.responseText的值填充到elem中,有三种填充方式,见callbackMethod参数
  627. </td>
  628. </tr>
  629. <tr>
  630. <td class="z-samp">callbackMethod</td>
  631. <td>"html"</td>
  632. <td>回调ID时的方法,三种"html"|"text"|"val"</td>
  633. </tr>
  634. <tr>
  635. <td class="z-samp">callScript</td>
  636. <td>true</td>
  637. <td>是否在AJAX结果的改变重置由data-role的缓存,如Z.Tooltip,Z.Select等,true|false,默认true</td>
  638. </tr>
  639. <tr>
  640. <td class="z-samp">loading</td>
  641. <td>null</td>
  642. <td>三种加载器,通过方法setLoading();方法来设置<br>
  643. 1、传入Z.loading对象,参数由对象指定,如ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
  644. 2、传入target和是否遮罩,如ajax.setLoading(document, true);或无遮罩ajax.setLoading(document);
  645. 3、传入targetId和是否遮罩,如ajax.setLoading("testLoading3", true);或无遮罩ajax.setLoading("testLoading3");
  646. 4、传入一个函数,在加载时回调该函数,如ajax.setLoading(function(){});此方式用于自定义操作
  647. </td>
  648. </tr>
  649. <tr>
  650. <td class="z-samp">loadingParam</td>
  651. <td>null</td>
  652. <td>加载器参数,通过方法setLoading();方法来设置,是第二个参数<br>
  653. 1、当loading是Z.loading和字符串时表示是否遮罩<br>
  654. 2、当#ID时指定的HTML,成功后换回原始HTML
  655. </td>
  656. </tr>
  657. <tr>
  658. <td colspan="3" class="z-text-cyan">响应参数</td>
  659. </tr>
  660. <tr>
  661. <td class="z-samp">responseStatus</td>
  662. <td>0</td>
  663. <td>响应状态,0表示成功,601-603表示跳转,其他表示错误</td>
  664. </tr>
  665. <tr>
  666. <td class="z-samp">responseText</td>
  667. <td>null</td>
  668. <td>响应文本字符串,默认是text/plain格式,XML或JSON格式自行转化</td>
  669. </tr>
  670. </table>
  671. ${zhiqim_com_chapter()}
  672. </div>
  673. <!-- 主体结束 -->
  674. </div>
  675. <!-- 容器结束 -->
  676. </div>
  677. ${zhiqim_com_footer()}