ASP.NET学习笔记——原生Ajax基本操作
Posted Jacklovely
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ASP.NET学习笔记——原生Ajax基本操作相关的知识，希望对你有一定的参考价值。
说明（2017-11-4 15:32:49）：
1. 回北京后又快一个月了，上次在家写的下回预告，到底是没把加水印写完，而且这次也不想写。。
2. 上次许的愿，十月份看完asp.net，已经泡汤了，翻了一下，一共十天的课程，我搞不好大半年就看了6天的。。
3. 总而言之，这次的笔记是用javascript的原生ajax操作，应该只是了解写法吧，因为下一讲就是jQuery封装好的ajax操作了。
Ajax_Get.aspx：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Get.aspx.cs" Inherits="_06_Ajax.ajax" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 </head> 8 <body> 9 <form id="form1" runat="server"> 10 <input type="button" name="name" value="显示用户" id="btnShow" /> 11 </form> 12 </body> 13 <script type="text/javascript"> 14 var btnShow = document.getElementById("btnShow"); 15 btnShow.onclick = function () { 16 var xhr; 17 if (XMLHttpRequest) { 18 xhr = new XMLHttpRequest(); 19 } else { 20 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 21 } 22 //open里面放用户名和密码传值 23 xhr.open("get", "Ajax.ashx?userName=zhangsan&passWord=123", true); 24 xhr.send(); 25 xhr.onreadystatechange = function () { 26 if (xhr.readyState == 4 && xhr.status == 200) { 27 alert(xhr.responseText); 28 } 29 }; 30 }; 31 </script> 32 </html>
Ajax_Post.aspx：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Post.aspx.cs" Inherits="_06_Ajax.Ajax_Post1" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 </head> 8 <body> 9 <form id="form1" runat="server"> 10 <input type="button" name="name" value="显示用户" id="btnShow" /> 11 </form> 12 </body> 13 <script type="text/javascript"> 14 var btnShow = document.getElementById("btnShow"); 15 btnShow.onclick = function () { 16 var xhr; 17 if (XMLHttpRequest) { 18 xhr = new XMLHttpRequest(); 19 } else { 20 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 21 } 22 xhr.open("post", "Ajax.ashx", true); 23 //手动加head头，第一次没成功，因为x前面的斜杠写成横杠了 24 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 25 //send里放传的值 26 xhr.send("userName=lisi&passWord=456"); 27 xhr.onreadystatechange = function () { 28 if (xhr.readyState == 4 && xhr.status == 200) { 29 alert(xhr.responseText); 30 } 31 }; 32 }; 33 34 35 </script> 36 </html>
Ajax.ashx：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 namespace _06_Ajax 7 { 8 /// <summary> 9 /// ajax1 的摘要说明 10 /// </summary> 11 public class ajax1 : IHttpHandler 12 { 13 14 public void ProcessRequest(HttpContext context) 15 { 16 context.Response.ContentType = "text/plain"; 17 //string method = context.Request.HttpMethod();判断请求方式，get还是post 18 //get和post都发送到这个ashx页面，反正都是接受用户名和密码 19 string userName = context.Request["userName"]; 20 string passWord = context.Request["passWord"]; 21 context.Response.Write(userName + passWord); 22 } 23 24 public bool IsReusable 25 { 26 get 27 { 28 return false; 29 } 30 } 31 } 32 }
以上是关于ASP.NET学习笔记——原生Ajax基本操作的主要内容，如果未能解决你的问题，请参考以下文章
ASP.Net MVC开发基础学习笔记：四校验AJAX与过滤器
asp.net Core MVC + form validation + ajax form 笔记
通过ASP.NET MVC框架 + 原生JavaScript + Ajax + SQL SERVER 实现一个简单的有论坛功能的网站（有通过iis发布的例子）