XMLHttpRequest对象实现AJAX登录功能
2013-09-05 23:43
609 查看
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btnLoginGet").onclick = doClickByGet;
document.getElementById("btnLoginPost").onclick = "doClickByPost()";
}
//1：创建浏览器兼容的异步对象——XMLHttpRequest对象
function createXhr() { //创建兼容异步对象
var xhrObj = false;
try {
xhrObj = new ActiveXObject("Msxml2.XMLHTTP");//ie msxml3.0+
} catch (e) {
try {
xhrObj = new ActiveXObject("Microsoft.XMLHTTP");//ie msxml2.6
} catch (e2) {
xhrObj = false;
}
}
if (!xhrObj && typeof XMLHttpRequest != 'undefined') {//Firefox , Opera 8.0+ , safari
xhrObj = new XMLHttpRequest();
}
return xhrObj;
}
//2.1使用get方式发送请求
function doClickByGet() {
//获取异步对象
var xhr = createXhr();
//设置参数（提交方式，请求路径，是否启用异步）
xhr.open("get", "Default.ashx", true);
//设置浏览器get方式不实用缓存
xhr.setRequestHeader("if-Modified-Since", "0");
//发送请求
xhr.send(null);
//设置异步对象回调函数
xhr.onreadystatechange = function () {
//readyState==4表示异步对象已经从服务器获取数据
if (xhr.readyState == 4) {
//获取异步对象的数据
var res = xhr.responseText;
alert(res);
//获得回发的响应报文头
alert(xhr.getAllResponseHeaders());
//获得回发的响应报文头部分信息
alert(xhr.getResponseHeader("Server"));
}
}
}
//2.2使用post方式发送请求
function doClickByPost() {
var strName = document.getElementById("txtName").value;
var strPwd = document.getElementById("txtPwd").value;
if (validate(strName, strPwd)==true) {
var xhr = createXhr();
xhr.open("POST", "Default.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("txtName="+strName+"&txtPwd="+strPwd);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var res = xhr.responseText;
if (res == "OK") {
alert("登陆成功");
window.location = "Default.aspx";
} else if (res == "false")
{
alert("登录失败")
}
else if (res = "err")
{
alert("用户名密码或密码不能空");
}
}
else {
alert("错误页面");
}
}
}
}
}
function validate(sN, sP) {
if (sN == "") {
document.getElementById("txtName").focus();
alert("用户名不能为空");
} else if (sP == "") {
document.getElementById("txtPwd").focus();
alert("用户密码不能为空");
} else {
return true;
}
return false;
}
</script>
</head>
<body>
<form method="post" action="Default.ashx">
<input id="txtName" type="text" name="txtName" /><br />
<input id="txtPwd" type="text" name="txtPwd" /><br />
<input id="btnLoginGet" type="button" value="登录Get" /><br />
<input id="btnLoginPost" type="button" value="登录Post" /><br />
</form>
</body>
</html>
Default.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX
{
/// <summary>
/// Default1 的摘要说明
/// </summary>
public class Default1 : IHttpHandler, IRequiresSessionState
{ //在一般处理程序中 要使用session 要实现IRequiresSessionState接口
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request.Form["txtName"];
if (string.IsNullOrEmpty(name))
{
context.Response.Write("GET "+"Hello World ");
}
else
{
string pwd = context.Request.Form["txtPwd"];
if (string.IsNullOrEmpty(pwd))
{
context.Response.Write("err");
}
if (name == "admin" && pwd == "admin")
{
context.Session["un"] = name;
context.Response.Write("OK");
}
else
{
context.Response.Write("false");
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btnLoginGet").onclick = doClickByGet;
document.getElementById("btnLoginPost").onclick = "doClickByPost()";
}
//1：创建浏览器兼容的异步对象——XMLHttpRequest对象
function createXhr() { //创建兼容异步对象
var xhrObj = false;
try {
xhrObj = new ActiveXObject("Msxml2.XMLHTTP");//ie msxml3.0+
} catch (e) {
try {
xhrObj = new ActiveXObject("Microsoft.XMLHTTP");//ie msxml2.6
} catch (e2) {
xhrObj = false;
}
}
if (!xhrObj && typeof XMLHttpRequest != 'undefined') {//Firefox , Opera 8.0+ , safari
xhrObj = new XMLHttpRequest();
}
return xhrObj;
}
//2.1使用get方式发送请求
function doClickByGet() {
//获取异步对象
var xhr = createXhr();
//设置参数（提交方式，请求路径，是否启用异步）
xhr.open("get", "Default.ashx", true);
//设置浏览器get方式不实用缓存
xhr.setRequestHeader("if-Modified-Since", "0");
//发送请求
xhr.send(null);
//设置异步对象回调函数
xhr.onreadystatechange = function () {
//readyState==4表示异步对象已经从服务器获取数据
if (xhr.readyState == 4) {
//获取异步对象的数据
var res = xhr.responseText;
alert(res);
//获得回发的响应报文头
alert(xhr.getAllResponseHeaders());
//获得回发的响应报文头部分信息
alert(xhr.getResponseHeader("Server"));
}
}
}
//2.2使用post方式发送请求
function doClickByPost() {
var strName = document.getElementById("txtName").value;
var strPwd = document.getElementById("txtPwd").value;
if (validate(strName, strPwd)==true) {
var xhr = createXhr();
xhr.open("POST", "Default.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("txtName="+strName+"&txtPwd="+strPwd);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var res = xhr.responseText;
if (res == "OK") {
alert("登陆成功");
window.location = "Default.aspx";
} else if (res == "false")
{
alert("登录失败")
}
else if (res = "err")
{
alert("用户名密码或密码不能空");
}
}
else {
alert("错误页面");
}
}
}
}
}
function validate(sN, sP) {
if (sN == "") {
document.getElementById("txtName").focus();
alert("用户名不能为空");
} else if (sP == "") {
document.getElementById("txtPwd").focus();
alert("用户密码不能为空");
} else {
return true;
}
return false;
}
</script>
</head>
<body>
<form method="post" action="Default.ashx">
<input id="txtName" type="text" name="txtName" /><br />
<input id="txtPwd" type="text" name="txtPwd" /><br />
<input id="btnLoginGet" type="button" value="登录Get" /><br />
<input id="btnLoginPost" type="button" value="登录Post" /><br />
</form>
</body>
</html>
Default.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX
{
/// <summary>
/// Default1 的摘要说明
/// </summary>
public class Default1 : IHttpHandler, IRequiresSessionState
{ //在一般处理程序中 要使用session 要实现IRequiresSessionState接口
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request.Form["txtName"];
if (string.IsNullOrEmpty(name))
{
context.Response.Write("GET "+"Hello World ");
}
else
{
string pwd = context.Request.Form["txtPwd"];
if (string.IsNullOrEmpty(pwd))
{
context.Response.Write("err");
}
if (name == "admin" && pwd == "admin")
{
context.Session["un"] = name;
context.Response.Write("OK");
}
else
{
context.Response.Write("false");
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax 通过XMLHttpRequest 对象完成首页的登录功能
- 使用Ajax技术通过XMLHttpRequest对象完成首页登录功能
- 使用Ajax技术通过XMLHttpRequest对象完成首页登录功能
- 如何使用XmlHttpRequest对象实现ajax?
- struts2中Ajax的操作实现及其核心对象XMLHttpRequest对象的使用
- AJAX实现步骤,XMLHttpRequest对象的方法
- 用AJAX实现注册用户即时检测(XMLHttpRequest对象)
- XMLHttpRequest对象方法和属性及实现AJAX标准示例
- 利用 Microsoft.XMLHTTP/XMLHttpRequest 对象 实现Ajax技术 的总结
- 利用XMLHttpRequest对象编写实现Ajax小实例
- 不使用XMLHttpRequest对象实现Ajax效果
- 用创建XMLHttpRequest对象与jQuery框架对文本为HTTP、JSON、XML的ajax实现比较
- Ajax实例:实现查找员工和新建员工，利用XMLHttpRequest对象实现前后端交互
- jQuery的ajax()检验用户名；通过jQuery的load()/get()/post()方法实现；使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- Ajax 创建 XMLHttpRequest 对象
- ajax中获取XMLHttpRequest对象的方法(IE/Firefox/chrome)
- AJax 学习笔记一(XMLHTTPRequest对象)
- ajax-创建XMLHttpRequest对象
- AJAX—XMLHttpRequest对象
- ajax原理和XmlHttpRequest对象