简单的使用ajax

 

AJAX定义：异步JavaScript 及XML（英文：Asynchronous JavaScript And XML 缩写Ajax）。是一种基于 JavaScript和HTTP请求（HTTP requests），广泛应用在浏览器的网页开发技术。

最早使用的数据类型是 xml
劣势：
1、代码量较大
2、结构不清晰
3、解析起来麻烦

现在使用的数据类型是 json
优势：
1、结构清晰
2、类似于面向对象的解析方式

基本结构：

$.ajax({
url: "ajax/SelectUserName.ashx", //将数据要提交到哪个服务端
data: { "un": oTxt }, //将什么数据提交到服务端去
type: "post", //用什么样的方式将数据提交过去
dataType: "json", //返回一个什么样的数据类型
    success: function (data) {

    },//success 请求成功后调用的回调函数

error: function () {
alert('服务器连接失败！');
} //请求失败后调用的回调函数

});//ajax

案例代码

$("#txt1").keyup(function () {
        var oTxt = $(this).val();

        //1、将数据提交到某个服务端去
        $.ajax({
            url: "ajax/SelectUserName.ashx", //将数据要提交到哪个服务端
            data: { "un": oTxt }, //将什么数据提交到服务端去
            type: "post",       //用什么样的方式将数据提交过去
            dataType: "json",   //返回一个什么样的数据类型
            success: function (aa) {
                if (aa.has == "0")
                    $("#sp1").text('恭喜！用户名可用！').css('color','green');
                else
                    $("#sp1").text('用户名已被占用！').css('color', 'red');
            },//success
            error: function () {
            alert('服务器连接失败！');
        } //请求失败后调用的回调函数
        });//ajax

    });

服务端代码：

string uname = context.Request["un"];//将ajax传过来的数据取出来

        string end = "{\"has\":\"0\"}"; //创建json对象，设置默认值

        //数据库验证此用户名是否存在
        using (Data0720DataContext con = new Data0720DataContext())
        {
            var u = con.Users.Where(r => r.UserName == uname).AsEnumerable();

            if (u.Count() > 0)//如果此用户名已存在，那么更改json内容
            {
                end = "{\"has\":\"1\"}";
            }
        }

        context.Response.Write(end);//将json返回出去
        context.Response.End();//结束输出