Ajax1

1、Ajax是什麼？

全稱「Asynchronous JavaScript and XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。

AJAX應用能夠僅向服務器發送並取回必需的數據，並在客戶端採用JavaScript處理來自服務器的響應。由於在服務器和瀏覽

器之間交換的數據大量減小，結果咱們就能看到響應更快的應用。同時不少的處理工做能夠在發出請求的客戶端機器上完成，因此

Web服務器的處理時間也減小了。

2、Ajax基本過程和格式

一、引入JQuery文件

二、js中ajax的格式

var ss = $(this).val().trim();//取值
if (ss.length <= 0) {
return false;
}

$.ajax({

            url: "ajax/yong.ashx",//將數據提交到服務端
            data: { "un": ss },//提交的數據
            type: "post",//提交的方式
            dataType: "json",//返回的數據類型
            success: function (aa) //沒錯時，返回數據執行的語句
            {
                if (aa.has == "0") {
                    $("#Label1").text("可用").css("color", "green");
                }
                else {
                    $("#Label1").text("已存在").css("color", "red");
                }
            },//success
            error:function(){alert("鏈接服務端失敗！");}//若是出錯執行的語句
        });//ajax

三、建立LinQ

四、建立服務端

添加通常處理程序 後綴.ashx

導入命名空間

 string uname=context.Request["un"];//獲取傳入的值
        string end="{\"has\":\"0\"}";//建立ajax對象
       //數據庫查詢
        using(LinQlianxiDataContext con=new LinQlianxiDataContext())
        {
        var u=con.Users.Where(z=>z.UserName==uname).AsEnumerable();
            if(u.Count()>0){
            end="{\"has\":\"1\"}";
            }       
        }
        context.Response.Write(end);//返回json
        context.Response.End();//結束輸出

注：（1）xml和json的做用：在不一樣語言之間進行數據傳遞

最先使用的數據類型是 xml
劣勢：
a、代碼量較大
b、結構不清晰
c、解析起來麻煩

如今使用的數據類型是 json
優點：
a、結構清晰
b、相似於面向對象的解析方式

(2)json基本格式：

{"key":"value","":"","":""}

多個對象時[{"key":"value","":"","":""},{"key":"value","":"","":""},...,{"key":"value","":"","":""}]

3、展現表格

HTML代碼

 <table style="background-color:navy;text-align:center;width:90%;margin:auto;">
       <thead>
           <tr style="color:white;">
               <td>用戶名</td>
               <td>密碼</td>
               <td>暱稱</td>
               <td>性別</td>
               <td>出生日期</td>
               <td>民族</td>
           </tr>
       </thead>
       <tbody>         
       </tbody>
   </table>
        <asp:Button ID="Button1" runat="server" Text="加載" />

View Code

js代碼

 $("#Button1").click(function () {
        $.ajax({
            url: "sanji.ashx",
            data: {},
            type: "post",
            dataType: "json",
            success: function (data) {
                $("#bd tbody").empty();//清空，防止重複加載
                for (i in data) {
                    var ss = "<tr style=\"background-color:white;\">";
                    ss += "<td>" + data[i].usersname + "</td>";
                    ss += "<td>" + data[i].mima + "</td>";
                    ss += "<td>" + data[i].nc + "</td>";
                    ss += "<td>" + data[i].sex + "</td>";
                    ss += "<td>" + data[i].bir + "</td>";
                    ss += "<td>" + data[i].nation + "</td>";
                    ss += "</tr>";
                    $("#bd tbody").append(ss);
                }

            },//success
            error: function () { alert("鏈接服務端shibai！"); }
        });//ajax
        return false;//我使用的Button不是使用表單元素，這句必須有！！！
    });//click

通常處理程序

//引入的命名空間
using System.Linq;
using System.Collections;
using System.Collections.Generic;
using System.Text;
//代碼
int count = 0;//做用是判斷需不需加","
        StringBuilder str = new StringBuilder();//省內存
        str.Append("[");
        using(LinQlianxiDataContext con=new LinQlianxiDataContext())
        {           
            var list = con.Users.AsEnumerable();
            foreach(Users u in list)
            {
                if (count > 0)
                {
                    str.Append(",");
                }
       //拼寫時注意！！注意！！注意！！另外在這裏擴展屬性
                str.Append("{\"usersname\":\"" + u.UserName + "\",\"mima\":\"" + u.PassWord + "\",\"nc\":\"" + u.NickName + "\",\"sex\":\"" + u.Sexstr + "\",\"bir\":\"" + u.Birthdaystr + "\",\"nation\":\"" + u.Nationname+ "\"}");
                count++;
            }       
        }
        str.Append("]");
        context.Response.Write(str);
        context.Response.End();

4、三級聯動

注意：異步致使程序不是按代碼順序執行

//頁面加載時調用執行

hanshu("0001", $("#DropDownList1"),"1");

//封裝的方法，參數1：父級編號；參數2：控件；參數3：對應省市區   
 function hanshu(p,drop,n) { 
$.ajax({

            url: "ajax/sanji.ashx",
            data: { "pcode":p},
            type: "post",
            dataType: "json",
            success: function (data) {
                drop.empty();
              //省調用這個函數時執行n=="1"
                if(n=="1"){
                for(i in data)
                {
                    var ss = "<option value=\""+data[i].acode+"\">"+data[i].aname+" </option>";
                    drop.append(ss);
                }               
                hanshu($("#DropDownList1").val(), $("#DropDownList3"), "2"); //省改變時改變市           
                }//n==1
              //市調用這個函數時執行n=="2"
                if (n == "2") {
                    for (i in data) {
                        var ss = "<option value=\"" + data[i].acode + "\">" + data[i].aname + " </option>";
                        drop.append(ss);
                    }
                    
                    hanshu($("#DropDownList3").val(), $("#DropDownList2"), "3");//市改變時改變區
                }//n==2
             //區調用這個函數時執行n=="3"
                if (n == "3") {
                    for (i in data) {
                        var ss = "<option value=\"" + data[i].acode + "\">" + data[i].aname + " </option>";
                        drop.append(ss);
                    }                  
                }//n==3
            },//success
            error: function () { alert("鏈接服務端錯誤！！");}
        });//ajax
    }
//省改變事件
    $("#DropDownList1").change(function () {
        hanshu($(this).val(), $("#DropDownList3"), "2");
    });
//市改變事件
    $("#DropDownList3").change(function () {
        hanshu($(this).val(), $("#DropDownList2"), "3");
    });