使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新。这里直接在html中使用js来实现:

先获取XMLHttpRequest对象

  1. var xmlHttp;
  2.  
  3. //创建一个xmlHttpRequest对象
  4. window.onload = function createxmlHttp() {
  5. try {
  6. //尝试创建 xmlHttpRequest 对象,除 IE 外的浏览器都支持这个方法。  
  7. xmlHttp = new XMLHttpRequest();
  8. } catch (e) {
  9. try {
  10. //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.xmlHttp)。  
  11. xmlHttp = ActiveXObject("Msxml12.XMLHTTP");
  12. } catch (e1) {
  13. try {
  14. //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.xmlHttp)。  
  15. xmlHttp = ActiveXObject("Microsoft.XMLHTTP");
  16. } catch (e2) {
  17. flag = false;
  18. }
  19. }
  20. }
  21.  
  22. //判断是否成功的例子:  
  23. if (!xmlHttp) {
  24. alert("creat XMLHttpRequest Object failed.");
  25. }
  26. }

  这里xmlHttp作为一个js的全家变量,后续方法需要用到。再看下怎么异步调用get方式的http请求:

  1. //调用http接口获取接口内容
  2. function getMethodContent(method) {
  3. url = "/getMethod/" + method;
  4. xmlHttp.open("GET", url, true);
  5. xmlHttp.onreadystatechange = showContent;
  6. document.getElementById("interfaceName").value = method; //将接口名放入html指定div中
  7. xmlHttp.send();
  8. }
  9.  
  10. //回调函数,显示http响应结果
  11. function showContent() {
  12. if (xmlHttp.readyState == 4) {
  13. if (xmlHttp.status == 200) {
  14. var text = xmlHttp.responseText; //这里获得服务器返回的数据
  15. document.getElementById("interfaceBody").innerHTML = text; //将数据放入html指定div中
  16. } else {
  17. alert("response error code:" + xmlHttp.status);
  18. }
  19. }
  20. }

  

  这里通过回调函数showContent来局部刷新interfaceName和interfaceBody的值。

  post的方式:

  1. //新增、编辑接口
  2. function generateInterfaceEntity() {
  3. url = "/editMethod/" + document.getElementById("interfaceName").value;
  4. xmlHttp.open("POST", url, true);
  5. xmlHttp.setRequestHeader("Content-type",
  6. "application/json;charset=UTF-8");
  7. xmlHttp.onreadystatechange = showActionResult;
  8. xmlHttp.send(document.getElementById("interfaceBody").innerHTML);
  9. }
  10.  
  11. //回调函数,显示action操作结果,刷新页面
  12. function showActionResult() {
  13. if (xmlHttp.readyState == 4) {
  14. if (xmlHttp.status == 200) {
  15. alert("operation success!");
  16. window.location.reload();
  17. } else {
  18. alert("operation failed! response error code:" + xmlHttp.status);
  19. }
  20. }
  21. }

  这里在新增、编辑后提示操作成功,接口通过reload来刷新整个页面。完整页面参见spring mvc+velocity使用里的页面代码。

Ajax异步调用http接口后刷新页面的更多相关文章

  1. <asp:TextBox><asp:LinkButton><input button>调用后台方法后刷新页面

    <asp:TextBox><asp:LinkButton>服务器控件,执行后台方法,会回调加载js,相当于页面重新加载,刷新页面 <input button>不能直 ...

  2. jquery中ajax异步调用接口

    之前写过一个原始的.无封装的页面,没有引入任何外部js,直接实例化Ajax的XmlRequest对象去异步调用接口,参见Ajax异步调用http接口后刷新页面,可对比一下. 现在我们用jquery包装 ...

  3. Ajax请求数据与删除数据后刷新页面

    1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...

  4. jquery ajax异步调用

    写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...

  5. response 后刷新页面,点击按钮后,禁用该按钮

    一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...

  6. 实现简单的PHP接口,以及使用js/jquery ajax技术调用此接口

    主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...

  7. ajax的分页查询(不刷新页面)

    既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...

  8. [转] 为什么javascript是单线程的却能让AJAX异步调用?

    为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...

  9. 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法(转载)

    在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...

随机推荐

  1. 怎么用Python提取域名中的主域名

    从一个域名里面提取主域名,初想起来,貌似很简单,不就是数点[.]的个数吗?取最后一个点前后的字符串,那 abc.txt 是域名吗?那再加个验证,加上国家码,.com,.cn,.org结尾的才算,那这个 ...

  2. CentOS 5 上使用yum同时安装32位和64位包的解决方法

    在centos上使用yum在线安装软件包的时候,有时候会同时安装32位和64位的包.并且在update的时候也会更新双份. 其实让yum只安装64位的包,只要在 /etc/yum.conf 中加个 e ...

  3. 编写一个程序,将 a.txt 文件中的单词与 b.txt 文件中的单词交替合并到 c.txt 文件中,a.txt 文件中的单词用回车符分隔,b.txt 文件中用回车或空格进行分隔。

    package IO; import java.io.*; public class test { public void connectWords(File file1, File file2, F ...

  4. javascript onclick 函数不执行

    今天被这个问题搞伤了. 原本是要给table中的元素添加onclick事件处理函数,刚开始还可以,后来就不行了,百试不得其解,反复检查,程序也没问题,耗了一个多小时,偏偏我就不信电脑会扯拐,就要看看还 ...

  5. java socket - 半关闭

    通常,使用关闭输出流来表示输出已经结束.但在进行网络通信时则不能这样做.因为我们关闭输出流时,该输出流对应的Socket也将随之关闭,这样程序将无法再从该socket中读取数据. 为了应付这种情况,s ...

  6. struts2提交文件时,出现页面重置又无法返回input现象,我没有解决这个问题

    查看资料得知,是因为我使用的tomcat是8的原因,调整到6就可以了.但我没有改变Tomcat的版本,不知道该怎么解决这个问题.

  7. org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 语法分析器在此文档中遇到多个 "64,000" 实体扩展; 这是应用程序施加的限制

    使用SAX解析XML文件.XML文件有1.5G,程序抛出了这个问题: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 语法 ...

  8. CSS3 网格布局(grid-layout)基础知识 - 网格模板属性(grid-template)使用说明

    CSS3引入了新的网格布局(grid layout),以适应显示和设计技术的发展(尤其是移动设备优先的响应式设计). 主要目标是建立一个稳定可预料且语义正确的网页布局模式,用来替代过往表现不稳定且繁琐 ...

  9. TCP粘包问题及解决方案

    ① TCP是个流协议,它存在粘包问题 TCP是一个基于字节流的传输服务,"流"意味着TCP所传输的数据是没有边界的.这不同于UDP提供基于消息的传输服务,其传输的数据是有边界的.T ...

  10. MSSQL2008 临时总结文档2014

    2.  索引可以建立在基表上(基表索引),也可以视图上称为视图索引. 基表索引是建立在表数据中的,故视图索引是建立在查询后的结果集上的. (假如建立了视图索引)当从视图中取数据的时候,优化查询分析器会 ...