AjaxHelper 无刷新留言

1 .无刷新留言
<script type="text/javascript">
function getIdObj(id) { return document.getElementById(id); }
window.onload = function () {
document.getElementById(‘btnSumbit‘).onclick = function () {
var _Id = document.getElementById(‘txtId‘).value;
var _Class = document.getElementById(‘txtClass‘).value;
var str = ‘id=‘ + _Id + ‘&className=‘ + _Class;

var xhr = null;
if (typeof XMLHttpRequest != ‘undefined‘) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = xhr.responseText;
var msgObj=document.getElementById(‘msgId‘);
if (res == 1)
{
msgObj.innerHTML = "提交成功!";
msgObj.style.color = "green";
var tboduObj = document.getElementById(‘tdid‘).getElementsByTagName(‘tbody‘)[0];
var trObj = tboduObj.insertRow(-1);
trObj.insertCell(-1).innerHTML = 1;
trObj.insertCell(-1).innerHTML = _Class;
trObj.insertCell(-1).innerHTML = _Id;

}
}
};
xhr.open(‘post‘, ‘AddClass.ashx‘, true);
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
xhr.send(str);
};
};
</script>
2.JsHelper
var JsHelper = {
getXHR: function () {
var xhr = null;
if (typeof XMLHttpRequest != ‘undefined‘) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHttp‘);
}
return xhr;
},
doAjax: function (method, url, data, isAyn, callback) {
method=method.toLowerCase();
var xhr = this.getXHR();
xhr.open(method,url+(method=="get"?‘?‘+data:‘‘), isAyn);
if (method == ‘get‘) {
xhr.setRequestHeader(‘If-Modified-Since‘, 0);
} else {
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
}
xhr.onreadystatechange = function () {
callback(xhr);
};
xhr.send(method != "get" ? data : null);
}
};

时间: 2024-11-10 00:58:22

AjaxHelper 无刷新留言的相关文章

LigerUi框架+jquery+ajax无刷新留言板系统的实现

前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板前台展示页基本采用ajax进行操作的,所以前台页面只有一个index.html页可查看.在运行的时候请打开这个页面,压缩文件里面包括编译版本和源码,大家可以用vs调试或者IIS运行查看 只要支持.net2.0就行,数据采用了access和mssql数据两个都可以,切换的时候请在配置文件中修改.废话就

2015.3.9小练习(无刷新留言板)

效果如图:(图中是我的狗~名叫坨坨)一号女主角. 代码如图:

Ajax无刷新提交表单和显示

ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

验证码和图片上传和多张图片无刷新上传

先来验证码一般处理程序编写 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 namespace Blog.UI 7 { 8 using System.Drawing; 9 using Blog.Common; 10 /// <summary> 11 /// Vcode 的摘要说明 12 /// </summary> 13 public c

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="周记[学校晚会篇]" /><meta name="description

ASP.NET MVC3实现无刷新验证码

在MVC中进行留言,评论等功能时,不可避免会用到表单提交时的验证码问题,有时,我们的作法是,当表单被提交后,在controller里去判断验证码的正确与否,但我认为这种用户体验是很差的,今天正好有后时间,把这方法的东西总结一下: 首先,在公用项目中建立一个生成图片验证码的类型ValidateCode,代码如下: /// <summary> /// 生成验证码对象 /// </summary> public class ValidateCode { public ValidateCo

Ajax实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.PHP)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理

jQuery 单页无刷新插件

现在很多网站都使用了单页无刷新效果,这里自己也封装了一个类似 PJAX 的jquery插件(支持浏览器前进后退按钮及url地址更改不跳转),方便以后在项目中应用或参考,在测试的时候注意自己的本地路径,这里采用了ajax所以不能直接点击打开,必须得在本地服务器下执行: 文件目录: index.html 为首页展示页: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

Asp.net页面无刷新请求实现

Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="omAjaxSubmit.aspx.cs" Inherits="OMDemo.demo.omAjaxSubmit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q