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封装:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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(); //这时才开始发送请求
四、ajax案例:检查用户名是否可用
案例代码:
html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
ashx
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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"); }