ajax 基础

一般处理程序（数据接口）：ashx

跨语言传递数据：
xml：
结构不清晰
代码量比较大
查找起来比较费事
非面向对象结构

json：
结构清晰
代码量相对较小
面向对象的处理解析方式，查找数据很简单

键值对
{"key1":"value","key2":"value"}

 完整格式：

 1  $.ajax({
 2             url: "", //服务器路径
 3             data: { }, //传递的参数，可为空，可多个
 4             type: "post", //传递参数的方式，可POST可GET，一般用POST
 5             dataType: "json", //数据传递的格式，有Json和xml两种
 6             success: function (data) { //成功返回数据执行这里，排第2
 7                 
 8             },
 9             beforeSend: function () { //一触发ajax就执行，无任何延迟，排第1
10                
11             },
12             complete: function () { //所有的方法都执行完毕后再来执行这里，排最后（不管成功失败都会执行）
13                 
14             },
15             error: function () { //服务器路径错误，或是服务器内部错误，走这里报错，此位置与success只会走一个
16             
17             }
18         });

 

练习：

连接数据库验证用户名是否存在

 

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title></title>
 9     <script src="jquery-1.7.2.min.js"></script>
10 </head>
11 <body>
12     <form id="form1" runat="server">
13     <div>
14         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
15         <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
16     </div>
17     </form>
18 </body>
19 </html>
20 <script type="text/javascript">
21     var txt = document.getElementById("TextBox1");
22     txt.onkeyup = function () {
23         var c = txt.value;
24 
25         $.ajax({
26             url:"ajax/Handler.ashx",//要将此次请求提交到哪个服务去
27             data: {"aaa":c},//给服务端带的数据，可以没有，也可以多个
28             type:"post",//传递的方式
29             dataType: "json",//数据传递的格式
30             success: function (bbb) {
31                 document.getElementById("Label1").innerHTML = bbb.lb;
32                 if (bbb.lb1 == "1") {
33                     document.getElementById("Label1").style.color = "green";
34                 }
35                 else {
36                     document.getElementById("Label1").style.color = "red";
37                 }
38             }
39         });
40     }
41 </script>

 

 1 <%@ WebHandler Language="C#" Class="Handler" %>
 2 
 3 using System;
 4 using System.Web;
 5 using System.Data.SqlClient;
 6 
 7 public class Handler : IHttpHandler {
 8     
 9     public void ProcessRequest (HttpContext context) {
10         string s = context.Request["aaa"];
11         string lb ;
12         WindowsFormsApplication1.App_Code.Users us = new WindowsFormsApplication1.App_Code.UsersData().Select(s);
13         if (us != null)
14         {
15             lb = "{\"lb\":\"该用户名已存在！\",\"lb1\":\"0\"}";
16         }
17         else
18         {
19             lb = "{\"lb\":\"恭喜！用户名可用！\",\"lb1\":\"1\"}";
20         }
21 
22         context.Response.Write(lb);
23         context.Response.End();
24         
25         
26     }
27  
28     public bool IsReusable {
29         get {
30             return false;
31         }
32     }
33 
34 }

 

posted @ 2017-01-15 10:58  浆糊033  阅读(171)  评论(0)  编辑  收藏  举报