ajax的作用是用来进行异步http请求,获取远程数据。在实践中,能学到好多。这不在实践中把ajax给理解了一些。积累了两种Asp.net程序使用ajax的方式。
1、通过一般处理程序.ashx
vs目录如下图:
(1)新建个web页面(.aspx),写一个简单的html页面。
<form id="form1" runat="server" method="post">
<div >
<div id="prompt"></div>
<div>
<label>账号</label>
<input type="text" id="personalnewphone" value="15712345678" placeholder="邮箱/手机号" runat="server" />
<button type="button" id="FqAuthcode" runat="server" >
获取验证码
</button>
</div>
</div>
</form>
(2)引入jquery文件,写ajax传值方法。
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//获取验证码
$("#FqAuthcode").bind("click", function () {
var _loginname = $("#personalnewphone").val();
if (_loginname == '') {
$('#prompt').removeClass('hidden').addClass('text-danger').html('手机或邮箱不能为空');
return false;
}
$.post("../ajax/Getcode.ashx", { action: 'register', loginname: _loginname }, function (data) {
if (data.code == 10000) {
$("#sub-btn-box").removeClass('hidden');
$(".personalcode").css("display", "block");
$('#prompt').removeClass('hidden').addClass('text-danger').html(data.message);
} else {
$('#prompt').removeClass('hidden').addClass('text-danger').html(data.message);
}
console.log(data.message);
}, 'json');
});
});
</script>
例子中的需求还可以通过jquery底层ajax实现。
$.ajax({
url: "../ajax/Getcode.ashx", async:false,data:{ action: 'register', loginname: _loginname }, success: function (data) {
if (data.code == 10000) {
$("#sub-btn-box").removeClass('hidden');
$(".personalcode").css("display", "block");
$('#prompt').removeClass('hidden').addClass('text-danger').html(data.message);
} else {
$('#prompt').removeClass('hidden').addClass('text-danger').html(data.message);
}
}, dataType: "json"
});
(3)新建一个一般处理程序,接收通过ajax方法传过来的值,进行处理,然后返回ajax方法。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
namespace Asp.net_Ajax_Demo1.ajax
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//context.Response.ContentType = "text/plain";
context.Response.ContentType = "text/html;charset=utf-8";
//获取传过来的参数
string action = context.Request.Params["action"]; //方法名称
string loginname = context.Request.Params["loginname"]; //要重置密码的账号
//调用函数
string json = GetJsonStr(action, loginname);
context.Response.Write(json);//返回处理结果
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
private string GetJsonStr(string action, string loginname) {
StringBuilder jsonString = new StringBuilder();
switch (action)
{
case "register"://注册发送验证码
//TODO:发送验证码方法省略
jsonString.Append("{\"code\":\"10000\",\"message\":\"验证码发送成功\"}");
break;
default:
jsonString.Append("{\"code\":\"1\",\"message\":\"未知错误,请联系管理员\"}");
break;
}
return jsonString.ToString();
}
}
}
之所以用switch判断,是为了用同一个一般处理程序(Handler)处理多个ajax请求。如果不用switch判断的话,就要建立多个Handler。
效果如图所示:
2、不通过一般处理程序.aspx
目录结构如图:
(1)新建webservice页面(.asmx)。取消注释行,使用web服务
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Text;
namespace WebApplication1.web
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public string GetCode(string loginname)
{
StringBuilder jsonString = new StringBuilder();
//TODO:发送验证码方法省略
jsonString.Append("{\"code\":\"10000\",\"message\":\"验证码发送成功\"}");
return jsonString.ToString();
}
}
}
(2)新建web页面(.aspx)。添加页面基本元素及布局。添加ScriptManager,用来相应webservice
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.web.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ajax_demo2</title>
</head>
<body>
<form id="form1" runat="server">
<%--响应webservice--%>
<asp:ScriptManager ID="clientService" runat="server">
<Services>
<asp:ServiceReference Path="~/web/WebService1.asmx" /><%--webservice路径--%>
</Services>
</asp:ScriptManager>
<div >
<div id="prompt"></div>
<div>
<label>账号</label>
<input type="text" id="personalnewphone" value="15712345678" placeholder="邮箱/手机号" runat="server" />
<button type="button" id="FqAuthcode" runat="server" >
获取验证码
</button>
</div>
</div>
</form>
</body>
</html>
(3)引用jquery文档,js编写
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//获取验证码
$("#FqAuthcode").bind("click", function () {
var _loginname = $("#personalnewphone").val();
if (_loginname == '') {
$('#prompt').removeClass('hidden').addClass('text-danger').html('手机或邮箱不能为空');
return false;
}
//webservice方法
//要调用的方法的完整路径,WebService命名空间.WebService类名.方法名
WebApplication1.web.WebService1.GetCode(_loginname, function (data) {
//响应成功
var json=$.parseJSON(data);//把字符串转成json格式
if (json.code == 10000) {
$("#sub-btn-box").removeClass('hidden');
$(".personalcode").css("display", "block");
$('#prompt').removeClass('hidden').addClass('text-danger').html(json.message);
} else {
$('#prompt').removeClass('hidden').addClass('text-danger').html(json.message);
}
}, function () {
//响应失败
setContainer('Error!');
});
});
});
</script>
效果如图:
对比:
jQuery调用Handler几乎完美了,但是不能处理多个方法。用webService和ScriptManager,可以调用多个方法。
总结:
有了理论要在实践中去验证,验证过了还要总结成理论。