首先是贴出全部的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebandAJAX.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>登陆</title> <style type="text/css"> *{ margin:0px; padding:0px; font-size:16px; } #main{ width:500px; height:500px; margin:100px auto; border:1px solid black; text-align:center; padding-top:50px; } #main>button{ margin:20px auto; margin-left:20px; } </style> <script type="text/javascript"> function Login() { //创建HTTP请求对象 // var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // alert(document.getElementById('userName').value); //如果是GET请求 //第一个参数：GET/POST 第二个参数：url 第三个参数：true-异步 false-同步 // req.open('GET', '../Handler/Handler1.ashx?userName=' + document.getElementById('userName').value + '&userPwd=' + document.getElementById('userPwd').value, true); // req.open('GET', '../Handler/Handler1.ashx?userName=123&userPwd=123', true); req.send(null); //如果是POST请求 //req.open('POST', '../Handler/Handler1.ashx', true); //req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //req.send('userName=' + document.getElementById('userName').value + '&userPwd=' + document.getElementById('userPwd').value); //接受AJAX响应:发送AJAX请求后，我们要能接收HTTP响应，这是通过XMLHttpRequest的实例 //注册回调函数完成的。并通过XMLHttpRequest对象的responseText属性或responseXML属性 //来获取响应消息的内容。代码如下： //HTTP响应的处理 // req.onreadystatechange = function () { if (req.readyState == 4 && req.status == 200) { alert("结果是：" + req.responseText); } }; } function GetInfo() { alert("fljsafk"); setInterval(function () { var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); req.open('POST', '../Handler/Handler2.ashx?', true); req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); req.send('testh=haha');//这里面不可以有空格 req.onreadystatechange = function () { if (req.status == 200 && req.readyState == 4) { alert("响应的结果是：" + req.responseText); } }; }, 2000); alert("结束"); } </script> </head> <body> <form id="form1" runat="server"> <div id="main"> 用户名：<input type="text" name =" userName" id="userName" placeholder ="请输入用户名 " /><br /><br /> 密 码：<input type ="password"name ="userPwd" id="userPwd" placeholder =" 请输入密码" /><br /> //至于这个为什么加false，我也不明白 <button onclick="Login();return false;">登陆</button><button onclick="GetInfo();return false;">POST方法按钮</button> <input type="text" id="showInfo"/> <asp:Button ID="Button1" runat="server" Height="30px" OnClick="Button1_Click" Text="Button" /> </div> </form> </body> </html>拆分出其中的POST方法：
function GetInfo() { alert("fljsafk"); setInterval(function () { var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); req.open('POST', '../Handler/Handler2.ashx?', true); //这个地方和GET方法不一样 req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //这个地方一定要注意，因为你传过去，编译器会把空格也带上，所以你的接受方参数一旦忘记写上空格，那么就会报异常了 //这个地方也不一样 req.send('testh=haha');//这里面不可以有空格 req.onreadystatechange = function () { if (req.status == 200 && req.readyState == 4) { alert("响应的结果是：" + req.responseText); } }; }, 2000); alert("结束"); }拆分出其中的GET方法：
function Login() { //创建HTTP请求对象 // var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // alert(document.getElementById('userName').value); //如果是GET请求 //第一个参数：GET/POST 第二个参数：url 第三个参数：true-异步 false-同步 // req.open('GET', '../Handler/Handler1.ashx?userName=' + document.getElementById('userName').value + '&userPwd=' + document.getElementById('userPwd').value, true); // req.open('GET', '../Handler/Handler1.ashx?userName=123&userPwd=123', true); req.send(null); //如果是POST请求 //req.open('POST', '../Handler/Handler1.ashx', true); //req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //req.send('userName=' + document.getElementById('userName').value + '&userPwd=' + document.getElementById('userPwd').value); //接受AJAX响应:发送AJAX请求后，我们要能接收HTTP响应，这是通过XMLHttpRequest的实例 //注册回调函数完成的。并通过XMLHttpRequest对象的responseText属性或responseXML属性 //来获取响应消息的内容。代码如下： //HTTP响应的处理 // req.onreadystatechange = function () { if (req.readyState == 4 && req.status == 200) { alert("结果是：" + req.responseText); } }; //Session["jfdsja"] = "我是session"; }GET方法的接收代码：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebandAJAX { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { string userName = context.Request.QueryString["userName"].ToString(); string userPwd = context.Request.QueryString["userPwd"].ToString(); string result = string.Empty; if (userName=="admin"&&userPwd=="123") { result = "登陆成功"; context.Response.ContentType = "text/plain"; context.Response.Write(result); return; } context.Response.ContentType = "text/plain"; context.Response.Write("登陆失败");//write的参数就是你要传给请求方的数据 } public bool IsReusable { get { return false; } } } }POST的接收代码：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebandAJAX.Handler { /// <summary> /// Handler2 的摘要说明 /// </summary> public class Handler2 : IHttpHandler { public void ProcessRequest(HttpContext context) { string test = context.Request["testh"].ToString(); string result = string.Empty; if (!string.IsNullOrEmpty(test)) { result = "success"; } context.Response.ContentType = "text/plain"; context.Response.Write(result); } public bool IsReusable { get { return false; } } } }以上就是全部代码，刚学写的比较乱啊，好多代码该怎么写，写在哪个文件里面，还不是理解，敬请见谅啊，后期会持续更改，如有不足请指正！谢谢大家！
我最想讲的就是：POST方法send传值得时候，里面的参数（空格是算的），比如： req.sed(“name = haizi”); 平常我们都喜欢在里面加上空格，看起来好看，但是了当你在服务端接收的时候就要注意了： req.context.Request.Form[“name”];这样是会出现异常的，因为你么有加上那个空格 req.context.Request.Form[“name “];这样才正确
