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 笔记

原生ajax及其与服务器交互(java)学习笔记

ASP.NET MVC5学习笔记01

通过ASP.NET MVC框架 + 原生JavaScript + Ajax + SQL SERVER 实现一个简单的有论坛功能的网站(有通过iis发布的例子)

AJAX学习笔记