php 页面异步刷新,Ajax异步调用http接口后刷新页面

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

先获取XMLHttpRequest对象

var xmlHttp;

//创建一个xmlHttpRequest对象

window.onload = function createxmlHttp() {

try {

//尝试创建 xmlHttpRequest 对象，除 IE 外的浏览器都支持这个方法。

xmlHttp = new XMLHttpRequest();

} catch (e) {

try {

//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.xmlHttp)。

xmlHttp = ActiveXObject("Msxml12.XMLHTTP");

} catch (e1) {

try {

//使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.xmlHttp)。

xmlHttp = ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

flag = false;

}

}

}

//判断是否成功的例子：

if (!xmlHttp) {

alert("creat XMLHttpRequest Object failed.");

}

}

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

//调用http接口获取接口内容

function getMethodContent(method) {

url = "/getMethod/" + method;

xmlHttp.open("GET", url, true);

xmlHttp.onreadystatechange = showContent;

document.getElementById("interfaceName").value = method; //将接口名放入html指定div中

xmlHttp.send();

}

//回调函数，显示http响应结果

function showContent() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

var text = xmlHttp.responseText; //这里获得服务器返回的数据

document.getElementById("interfaceBody").innerHTML = text; //将数据放入html指定div中

} else {

alert("response error code:" + xmlHttp.status);

}

}

}

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

post的方式：

//新增、编辑接口

function generateInterfaceEntity() {

url = "/editMethod/" + document.getElementById("interfaceName").value;

xmlHttp.open("POST", url, true);

xmlHttp.setRequestHeader("Content-type",

"application/json;charset=UTF-8");

xmlHttp.onreadystatechange = showActionResult;

xmlHttp.send(document.getElementById("interfaceBody").innerHTML);

}

//回调函数，显示action操作结果，刷新页面

function showActionResult() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

alert("operation success!");

window.location.reload();

} else {

alert("operation failed! response error code:" + xmlHttp.status);

}

}

}

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

jquery中ajax异步调用接口

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

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

1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML)

jquery ajax异步调用

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

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

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

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

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

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

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

&lbrack;转&rsqb; 为什么javascript是单线程的却能让AJAX异步调用？

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

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

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

随机推荐

ASP&period;NET Web API 2&period;1支持Binary JSON(Bson)

ASP.NET Web API 2.1内建支持XML.Json.Bson.form-urlencoded的MiME type,今天重点介绍下Bson.BSON是由10gen开发的一个数据格式,目前主要 ...

c&num; 的MD5加密算法

发现用C#封装好的内部类实现MD5加密和其它语言的MD5加密结果有时会不一样,暂时发现没有特殊字符时的结果是一样的,一旦有特殊字符(09404719290010210»×úÛ±8*«À7201 ...

2015年毕业生收到的offer和薪资透露

个人情况:全国排名70多的大学,非211,计算机专业硕士 收到的offer: 苏州同程旅游--6k/月 ,自己要了这么多,就给了这么多,没有规范.苏州蜗牛科技--8k/月 ,给了个口头offer,要去 ...

canvas学习笔记：小小滴公式，大大滴乐趣

声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近想弄一个网页,把自己学HTML5过程中做的部分DEMO放上去做集合,但是,如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了. ...

jquery validate如何不提交表单就做验证(ajax提交数据)

if($("#FromID").valid()){ $.ajax({ type:'post', url:'/CampaignOrderRelations/save', data:{ ...

剑指Offer34 数组中的逆序对

/************************************************************************* > File Name: 34_Invers ...

html5 list属性、autocomplete属性、pattern属性

list属性的值为某个datalist元素的id,datalist也是html5中新增的属性,类似于选择框select,或者android中的autocomplete textview控件.datal ...

ggplot2 theme相关设置—矩形设置(rect)

在主题设置中,rect设置主要用于设置图例和面板 element_rect(fill = NULL, colour = NULL, size = NULL, linetype = NULL, colo ...

php实现json