Ajax 调用本页面后台方法
2011-11-30 14:22
155 查看
在网上看到好多人利用 AJaxPro、Jquery等Ajax的框架来做这样的功能，但是最近公司的项目不让用 框架，JS完全手工写，这让我相当的郁闷。
不过正好再次温习一下JS。
Ajax调用自己页面后台的方法，完全可以利用 XMLHttpRequest来实现，这样其实就相当于一个AjaxPro，下面开始说明：
要实现此功能需要3个东东，1、JS 2、前台页面 3、后台页面 （这不是废话吗？呵呵）
开始贴代码
1、JS
我在网上找的一段JS代码，用来封装 AJAX 文件名：ajaxservice.js
var AjaxService = {
initXmlHttp: function() {
var activeXTypes = [
"MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "MICROSOFT.XMLHTTP.1.0", "MICROSOFT.XMLHTTP.1",
"MICROSOFT.XMLHTTP"];
var winner = null;
if (typeof XMLHttpRequest == 'undefined' && typeof ActiveXObject != 'undefined') {
for (var i = 0; i < activeXTypes.length; i++) {
var candidate = activeXTypes[i];
try {
new ActiveXObject(candidate);
winner = candidate;
break;
} catch (e) {
}
}
if (winner != null) {
return new ActiveXObject(winner);
}
}
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
return null;
},
post: function(obj) {
var xmlhttp = this.initXmlHttp();
if (xmlhttp == null) return false;
obj.asyn = obj.asyn == undefined ? false : obj.asyn;
xmlhttp.open("POST", obj.url, obj.asyn);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (obj.asyn) {
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.succ(xmlhttp);
}
}
}
var postval = "";
if (obj.val != undefined) {
for (var i = 0; i < obj.val.length; i++) {
postval = postval + encodeURIComponent(obj.val[i]) + "=" + encodeURIComponent(escape(obj.val[i + 1])) + "&";
i++;
}
}
if (postval.length > 0) {
postval = postval.substr(0, postval.length - 1);
}
obj.val == undefined ? xmlhttp.send(null) : xmlhttp.send(postval);
if (!obj.asyn)
obj.succ(xmlhttp);
},
get: function(obj) {
var xmlhttp = this.initXmlHttp();
if (xmlhttp == null) return false;
obj.asyn = obj.asyn == undefined ? false : obj.asyn;
var getval = "";
if (obj.val != undefined) {
for (var i = 0; i < obj.val.length; i++) {
getval = getval + obj.val[i] + "=" + escape(obj.val[i + 1]) + "&";
i++;
}
}
if (getval.length > 0) {
getval = getval.substr(0, getval.length - 1);
if (obj.url.indexOf("?") != -1) {
obj.url = obj.url + "&" + getval;
}
else {
obj.url = obj.url + "?" + getval;
}
}
xmlhttp.open("GET", obj.url, obj.asyn);
if (obj.asyn) {
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.succ(xmlhttp);
}
}
}
xmlhttp.send(null);
if (!obj.asyn)
obj.succ(xmlhttp);
}
}
2、创建一个 Default.aspx 页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Ajax_Default" %>
<!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 runat="server">
<title></title>
<script src="ajaxservice.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function btnDisplayClick() {
var txtName = document.getElementById("txtName");
var s_ajaxurl = "Default.aspx";
AjaxService.post({
url: s_ajaxurl,
succ: function (result) {
var s_return = result.responseText;
document.getElementById("spanName").innerHTML = s_return;
},
asyn: true,
val: ["ajaxmethodtype", "string", "ajaxmethodname", "GetName", "name", txtName.value]
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txtName" />
<input type="button" id="btnDisplay" value="Display" onclick="btnDisplayClick()" /><br/>
<span id="spanName"></span>
</div>
</form>
</body>
</html>
3、Default.aspx.cs (后台页面) 代码
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Ajax_Default : System.Web.UI.Page
{
#region 公有属性
/// <summary>
/// ajax方法类型
/// 字符串|json字符串|Db操作
/// </summary>
public string AjaxMethodType
{
get { return this.getUTF8ToString("ajaxmethodtype"); }
}
/// <summary>
/// ajax方法名称
/// </summary>
public string AjaxMethodName
{
get { return this.getUTF8ToString("ajaxmethodname"); }
}
#endregion
#region 私有方法
/// <summary>
/// 字符格式转换
/// add by Vincent.Q 10.05.06
/// </summary>
/// <param name="param"></param>
/// <returns></returns>
public string getUTF8ToString(string param)
{
return HttpUtility.UrlDecode(Request.Form[param], System.Text.Encoding.UTF8);
}
#endregion
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (!string.IsNullOrEmpty(this.AjaxMethodType))
{
//返回值
string s_responsetext = string.Empty;
//根据ajaxmethodtype和ajaxmethodname分配ajax方法
switch (this.AjaxMethodType)
{
case "string":
string s_string = string.Empty;
switch (this.AjaxMethodName)
{
case "GetName":
s_string = this.GetName(this.getUTF8ToString("name")).ToString().ToLower();
break;
default:
break;
}
s_responsetext = s_string;
break;
default:
break;
}
if (string.IsNullOrEmpty(s_responsetext))
s_responsetext = "";
//组装ajax字符串格式,返回调用客户端
Response.Charset = "UTF-8";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.ContentType = "text/html";
Response.Expires = 0;
Response.Write(s_responsetext);
Response.End();
}
}
}
private string GetName(string name)
{
return name;
}
}
试验成功，木有问题！
不过正好再次温习一下JS。
Ajax调用自己页面后台的方法，完全可以利用 XMLHttpRequest来实现，这样其实就相当于一个AjaxPro，下面开始说明：
要实现此功能需要3个东东，1、JS 2、前台页面 3、后台页面 （这不是废话吗？呵呵）
开始贴代码
1、JS
我在网上找的一段JS代码，用来封装 AJAX 文件名：ajaxservice.js
var AjaxService = {
initXmlHttp: function() {
var activeXTypes = [
"MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "MICROSOFT.XMLHTTP.1.0", "MICROSOFT.XMLHTTP.1",
"MICROSOFT.XMLHTTP"];
var winner = null;
if (typeof XMLHttpRequest == 'undefined' && typeof ActiveXObject != 'undefined') {
for (var i = 0; i < activeXTypes.length; i++) {
var candidate = activeXTypes[i];
try {
new ActiveXObject(candidate);
winner = candidate;
break;
} catch (e) {
}
}
if (winner != null) {
return new ActiveXObject(winner);
}
}
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
return null;
},
post: function(obj) {
var xmlhttp = this.initXmlHttp();
if (xmlhttp == null) return false;
obj.asyn = obj.asyn == undefined ? false : obj.asyn;
xmlhttp.open("POST", obj.url, obj.asyn);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (obj.asyn) {
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.succ(xmlhttp);
}
}
}
var postval = "";
if (obj.val != undefined) {
for (var i = 0; i < obj.val.length; i++) {
postval = postval + encodeURIComponent(obj.val[i]) + "=" + encodeURIComponent(escape(obj.val[i + 1])) + "&";
i++;
}
}
if (postval.length > 0) {
postval = postval.substr(0, postval.length - 1);
}
obj.val == undefined ? xmlhttp.send(null) : xmlhttp.send(postval);
if (!obj.asyn)
obj.succ(xmlhttp);
},
get: function(obj) {
var xmlhttp = this.initXmlHttp();
if (xmlhttp == null) return false;
obj.asyn = obj.asyn == undefined ? false : obj.asyn;
var getval = "";
if (obj.val != undefined) {
for (var i = 0; i < obj.val.length; i++) {
getval = getval + obj.val[i] + "=" + escape(obj.val[i + 1]) + "&";
i++;
}
}
if (getval.length > 0) {
getval = getval.substr(0, getval.length - 1);
if (obj.url.indexOf("?") != -1) {
obj.url = obj.url + "&" + getval;
}
else {
obj.url = obj.url + "?" + getval;
}
}
xmlhttp.open("GET", obj.url, obj.asyn);
if (obj.asyn) {
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.succ(xmlhttp);
}
}
}
xmlhttp.send(null);
if (!obj.asyn)
obj.succ(xmlhttp);
}
}
2、创建一个 Default.aspx 页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Ajax_Default" %>
<!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 runat="server">
<title></title>
<script src="ajaxservice.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function btnDisplayClick() {
var txtName = document.getElementById("txtName");
var s_ajaxurl = "Default.aspx";
AjaxService.post({
url: s_ajaxurl,
succ: function (result) {
var s_return = result.responseText;
document.getElementById("spanName").innerHTML = s_return;
},
asyn: true,
val: ["ajaxmethodtype", "string", "ajaxmethodname", "GetName", "name", txtName.value]
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txtName" />
<input type="button" id="btnDisplay" value="Display" onclick="btnDisplayClick()" /><br/>
<span id="spanName"></span>
</div>
</form>
</body>
</html>
3、Default.aspx.cs (后台页面) 代码
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Ajax_Default : System.Web.UI.Page
{
#region 公有属性
/// <summary>
/// ajax方法类型
/// 字符串|json字符串|Db操作
/// </summary>
public string AjaxMethodType
{
get { return this.getUTF8ToString("ajaxmethodtype"); }
}
/// <summary>
/// ajax方法名称
/// </summary>
public string AjaxMethodName
{
get { return this.getUTF8ToString("ajaxmethodname"); }
}
#endregion
#region 私有方法
/// <summary>
/// 字符格式转换
/// add by Vincent.Q 10.05.06
/// </summary>
/// <param name="param"></param>
/// <returns></returns>
public string getUTF8ToString(string param)
{
return HttpUtility.UrlDecode(Request.Form[param], System.Text.Encoding.UTF8);
}
#endregion
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (!string.IsNullOrEmpty(this.AjaxMethodType))
{
//返回值
string s_responsetext = string.Empty;
//根据ajaxmethodtype和ajaxmethodname分配ajax方法
switch (this.AjaxMethodType)
{
case "string":
string s_string = string.Empty;
switch (this.AjaxMethodName)
{
case "GetName":
s_string = this.GetName(this.getUTF8ToString("name")).ToString().ToLower();
break;
default:
break;
}
s_responsetext = s_string;
break;
default:
break;
}
if (string.IsNullOrEmpty(s_responsetext))
s_responsetext = "";
//组装ajax字符串格式,返回调用客户端
Response.Charset = "UTF-8";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.ContentType = "text/html";
Response.Expires = 0;
Response.Write(s_responsetext);
Response.End();
}
}
}
private string GetName(string name)
{
return name;
}
}
试验成功，木有问题！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX调用页面后台代码方法实现下拉框二级联动效果
- 微软ASP.Net Ajax:使用AJAX直接调用后台页面类方法
- 微软ASP.Net Ajax:使用AJAX直接调用后台页面类方法
- jQuery&nbsp;AJAX实现调用页面后台方法
- 微软ASP.Net Ajax:使用AJAX直接调用后台页面类方法
- MVC4中AJAX Html页面打开调用后台方法实现动态加载数据库中的数据
- jquery-ajax之2：调用asp.net 页面后台方法
- Ajax实现前台页面调用后台方法（mvc）
- 微软ASP.Net Ajax:使用AJAX直接调用后台页面类方法
- ajax调用后台方法返回页面显示为undefined 解决办法
- 通过AJAX调用页面后台代码方法实现省级三级联动效果 （简单练习）前台
- 调用iframe两个子页面js的方法，分别获得数组，拆分数组，拼接一定规则的字符串，用ajax传到后台，
- 微软ASP.Net Ajax:使用AJAX直接调用后台页面类方法
- a标签ajax直接调用后台方法下载文件：
- .net 利用页面方法的Ajax调用
- ASP.net AJAX 调用PageMethods实例(javascript调用服务器页面方法)
- ASP.NET jQuery 食谱23 (jQuery AJAX实现调用页面后台方法和web服务定义的方法)
- jQuery AJAX实现调用页面后台方法
- VS2005 使用AJAX直接调用后台方法
- AJAX下客户端调用服务端页面方法