如何使用var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);登录后复制
state对象除了要title和url之外，你也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。
replaceState和pushState是相似的，这里就不多介绍了。
如何响应浏览器的前进、后退操作
window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。
window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);登录后复制
这样就可以结合ajax和pushState完美的进行无刷新浏览了。
一些限制
1、传递的URL必须是同域下的，无法跨域
2、state对象虽然可以存储很多自定义的属性，但对于不可序列化的对象则不能存储，如：DOM对象。
对应后端的一些处理
这种模式下除了当前使用ajax可以无刷新浏览外，还要保证直接请求改变的URL后也可以正常浏览，所以后端要对这些处理下。
1、对使用pushState的ajax发送一个特殊的头，如： setRequestHeader(‘PJAX’, ‘true’)。
2、后端获取到有PJAX=true的header时，将页面中通用的部分都不输出。比如：PHP可以通过下面的判断
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}登录后复制
虽然接口上只有pushState、replaceState、onpopstate，但在使用的时候需要做很多的处理。
针对这个已经写好了一个基于jquery的插件，已经将ajax+history.pushState封装成pjax, 项目地址： https://github.com/welefen/pjax， 目前支持jquery, qwrap, kissy 3个版本
此外，如果想要考虑到HTML4和HTML5下都能有次效果，可以参考history.js，项目地址为：https://github.com/browserstate/history.js。
参考资料：
1、Introducing the HTML5 History API
2、Manipulating the browser history
3、Session history and navigation
ajax技术 什么是Ajax无刷新技术？
浏览器实例化一个ajax对象，这个对象发送一个http请求，并且携带一定的参数，传输到后台。后台服务器接收这些参数，同时过滤一下传过来的参数，做出逻辑判断。如果需要数据库操作参与，就要取出数据，格式化数据。返回给前台客户端，前台获取的数据，对数据进行处理，获取dom元素，将数据放到局部。从而实现无数新技术。一般用到的地方主要是注册模块邮箱和用户验证。
以上就介绍了ajax技术 什么是Ajax无刷新技术？，包括了ajax技术方面的内容，希望对PHP教程有兴趣的朋友有所帮助。
ajax无刷新 信息自动提示
在网站中有个站内信功能！怎样通过 使用 ajax技术 实现 无刷新信息自动提示功能呢！
Ajax无刷新上传
html如下：
<form>
<div id="whiteListDiv"https://www.jb51.cc/tag/dis/" target="_blank">display: none;margin:-5px auto 10px auto;">
<label><font></font></label>
<input type="file" id="whiteList" name="whiteList"/>
<input type="button"onclick="uploadList('white');" value="上传">
</div>
<div>
<label><font></font>是否有黑名单</label>
<input type="file" id="blackList" name="blackList"/>
<input type="button"onclick="uploadList('black');" value="上传">
</div>
</form>
注意id和name属性
调用的JS方法：
function uploadList(type){
var fileList;
if(type == "white"){
fileList = $("#whiteList").val();
} else {
fileList = $("#blackList").val();
}
if(fileList == null || fileList == ""){
alert("请先选择文件再上传");
return;
}
var suffix = fileList.substring(fileList.lastIndexOf("."));
if(suffix != ".csv" && suffix != ".CSV"){
alert("请选择csv格式文件");
return;
}
var formData = new FormData($("form")[0]);
formData.append("idBombBannerInfo",sid);
formData.append("type",type);
$.ajax({
url : '../../accessManagerment/uploadFileList.do',type : 'POST',data : formData,// 告诉jQuery不要去处理发送的数据
processData : false,// 告诉jQuery不要去设置Content-Type请求头
contentType : false,beforeSend:function(){
//console.log("正在进行，请稍候");
},success : function(data) {
if(data.errorMsg != null && data.errorMsg != ""){
alert(data.errorMsg);
} else {
alert(data.resultMsg);
}
},error : function(responseStr) {
alert("上传名单出现异常");
}
});
}
由于是ajax发起请求，界面不用刷新
后台获取参数
@RequestMapping("/accessManagerment/uploadFileList.do")
public void uploadFileList(HttpServletRequest request,HttpServletResponse response,@RequestParam(value="whiteList",required=false) multipartfile whiteList,@RequestParam(value="blackList",required=false) multipartfile blackList,@RequestParam(value="idBombBannerInfo",required=false) String idBombBannerInfo,@RequestParam(value="type",required=false) String type
) throws IOException,ParseException,CmsBusinessException,IllegalStateException,servletexception{
CmsLogger.audit("弾屏广告-上传白名单/黑名单：[type=" + type+"][idBombBannerInfo="+"]");
Map<String,Object> resultMap = new HashMap<String,Object>();
Map<String,Object> paramMap = new HashMap<String,Object>();
PrintWriter out = initWriter();
out = response.getWriter();
String result = "";
if(!(idBombBannerInfo != null && !idBombBannerInfo.equals("") && type != null && !type.equals(""))){
result = "{\"errorMsg\": \"上传参数不能为空\"}";
return;
}
//获取产品编码
// DefaultMultipartHttpServletRequest req = (DefaultMultipartHttpServletRequest) request;
// String productCode = req.getParameter("productCode");
long www = whiteList.getSize();
long bbb = blackList.getSize();
multipartfile fileList = null;
if(type != null && type.equals("white")){
fileList = whiteList;
} else {
fileList = blackList;
}
try{
if(fileList == null){
result = "{\"errorMsg\": \"上传文件不能为空\"}";
return;
}
//判断上传文件的格式(csv)
String originalName = fileList.getoriginalFilename();
String suffix = originalName.substring(originalName.lastIndexOf("."));
if(!suffix.equalsIgnoreCase(".csv")){
result = "{\"errorMsg\": \"只能上传csv格式的文件\"}";
return;
}
//获取文件内容
InputStream is = fileList.getInputStream();
BufferedReader reader = new BufferedReader(new InputStreamReader(is));
// String phonestr = "";
// String tmp = "";
// int count = 0; //代表上传的手机号数量
// while((tmp = reader.readLine()) != null){
// //仅截取每行的前11位--如果长度够11
// if(tmp != null && tmp.length() >= 11){
// //最多传递500个手机号
// if(count < 500){
// phonestr += tmp.substring(0,11) + ",";
// count++;
// } else {
// result = "{\"errorMsg\": \"白名单上传失败 :白名单数量已超过500\"}";
// return;
// }
// }
// }
//
// if(count == 0){
// result = "{\"errorMsg\": \"上传的白名单为空，请录入白名单重新上传！\"}";
// return;
// }
//
// if(phonestr.indexOf(",") > -1){
// phonestr = phonestr.substring(0,phonestr.length() - 1);
// }
//下面调用接口直接将手机号一并发送过去
// String URL = "http://IQSZ-L1470:9091/elis_mili_shop_app/do/app/product/factory/batchSaveUserWhiteList";
String urlSuffix = cachePropertiesUtils.getPropertyValue("mili_shop.http.app.url");
String URL = urlSuffix + "/do/app/product/factory/batchSaveUserWhiteList";
NameValuePair[] data = {
// new NameValuePair("whilteList",phonestr),// new NameValuePair("operator",user.getUserUmNo())
};
//调用接口
resultMap.put("resultCode","00");
if(resultMap != null && resultMap.get("resultCode").equals("00")){
//mili-shop新增成功
/*注意添加产品的时候，也要同时添加产品配置信息*/
result = "{\"resultMsg\": \"上传成功\"}";
if(type.equals("white")){
paramMap.put("isuploadWhitelist","Y");
} else {
paramMap.put("isuploadBlacklist","Y");
}
paramMap.put("sid",idBombBannerInfo);
accessManagermentService.updateBombBannerStatus(paramMap);
} else {
result = "{\"errorMsg\": \"上传失败 " + resultMap.get("resultMsg") + "\"}";
CmsLogger.audit("弾屏广告名单上传失败");
}
} catch(Exception e){
result = "{\"errorMsg\": \"弾屏广告名单上传失败\"}";
CmsLogger.error("BombBannerManagementController-->uploadFileList:弾屏广告名单上传失败:" + e.getMessage(),e);
} finally {
if (null != out) {
out.print(result);
out.flush();
out.close();
}
}
}
jquery引用正常，请求能正常到后台，应该就可以直接使用了，上传代码是直接可运行的。。。
今天关于Ajax无刷新Url提交页面和ajax实现无刷新的分享就到这里，希望大家有所收获，若想了解更多关于ajax和html5无刷新改变页面URL、ajax技术 什么是Ajax无刷新技术？、ajax无刷新 信息自动提示、Ajax无刷新上传等相关知识，可以在本站进行查询。
