Ajax入门

一、没有AJAX会怎么样？
　　普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面。在youku看视频的过程中如果提交评论，页面就不会刷新，视频不会被打断。开发一个看效果：用<video  src="diaosi.mp4" autoplay controls></video>播放视频（只有支持html5的浏览器能播放），然后放一个评论功能，服务器只是存到一个文件中。
二、AJAX是一种进行页面局部异步刷新的技术。
　　用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在HTML页面中使用JavaScript创建XMLHTTPRequest（简称XHR）对象来向服务器发出请求以及获得返回的数据，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象。局部：一小部分刷新，其他部分不刷新；异步：网络请求期间，浏览器不卡。
1）AJAX代码：
 //找工作之前一定要能把下面的代码背着写出来。
　　 
//找工作之前一定要能把下面的代码背着写出来。
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性
            xmlhttp.open("POST", "AJAXTest.ashx?i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）,Post请求浏览器一定不会缓存。这里还没有发出请求。true代表异步请求。
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中）、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）
                {
                    if (xmlhttp.status == 200) //如果状态码为200则是成功
                    {
                        alert(xmlhttp.responseText);//服务器返回的报文正文
                    }
                    else
                    {
                        alert("AJAX服务器返回错误！");
                    }
                }
            }
    //不要以为if (xmlhttp.readyState == 4) {在send之前执行！！！！
            xmlhttp.send(); //这时才开始发送请求
    //发出请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000);

 
 2）额外提一点，如果要在send方法中发送报文体，比如send("name=5")，则需要设定Content-Type报文头：
 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 否则在服务器端是无法通过context.Request["name"]获得值的。

三、自己封装一个ajax函数
代码：简单的ajax封装：
function ajax(url,onsuccess,onfail)
        {
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            xmlhttp.open("POST", url, true);
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4)
                {
                    if (xmlhttp.status == 200)
                    {
                        onsuccess(xmlhttp.responseText);
                    }
                    else
                    {
                        onfail(xmlhttp.status);
                    }
                }
            }
            xmlhttp.send(); //这时才开始发送请求
View Code

四、ajax案例：检查用户名是否可用
案例代码：
html

html：
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-1.5.2.js"></script>
    <script type="text/javascript" src="rpajax.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#username").blur(function () {
                var username = $("#username").val();
                ajax("CheckUserName.ashx?username="+username,
                    function (resTxt) {
                        if (resTxt == "ok") {
                            $("#msg").text("此用户名可用");
                        }
                        else {
                            var strs = resTxt.split("|");
                            if (strs[0] == "error") {
                                $("#msg").text(strs[1]);
                            }
                        }
                    },
                    function (status) {
                        alert("出错");
                    });
            });
        });
    </script>
</head>
<body>
    傻瓜化只是让我们的工作变得简单，而不是让我们变成傻子！<br />
    用户名：<input type="text" id="username" /><span id="msg"></span>
</body>
</html>
View Code

ashx

 

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //"ok"，用户可以用
            //"error|含有违禁词汇","error|用户名已被使用"
            string username = context.Request["username"];
            if (string.IsNullOrWhiteSpace(username))
            {
                context.Response.Write("error|用户名必填");
                return;
            }
            if (username.Length<3||username.Length>10)
            {
                context.Response.Write("error|用户名长度必须介于3和10之间");
                return;
            }
 
            if (username.Contains("毒品") || username.Contains("手*枪"))
            {
                context.Response.Write("error|含有违禁词汇");
                return;
            }
            int c =(int)SqlHelper.ExecuteScalar("select count(*) from T_Users where UserName=@UserName",
                new SqlParameter("@UserName", username));
            if (c > 0)
            {
                context.Response.Write("error|用户名已经被使用");
                return;
            }
            context.Response.Write("ok");
        }
ashx

 

 

posted @ 2015-12-25 15:43  IT_小猩猩  阅读(171)  评论(0)    收藏  举报