JQuery AJAX介绍
new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法。
非IE浏览器中创建方法是new XmlHttpRequest()。
为了兼容不同的浏览器需要编写很多代码
回调函数中data参数为服务器返回的数据，textStatus为服务器返回状态码，textStatus为"success"表示成功。
JQuery中提供了简化ajax使用的方法。
$.ajax()函数是JQuery中提供的 ajax访问函数，$.post()是对$.ajax()的post方式提交ajax查询的封装,$.get()是对$.ajax()的get方式
提交ajax查询的封装。推荐用post方式，因为post方式没有缓存的问题，演示，get方式中缓存处理的处
理方法。todo：好像服务端异常404、500等回调方法并不会被调用。
如果有请求参数则在第二个参数用字典方式来设置
$.post("GetDate1.ashx", {"id":"2"},function(data, textStatus)
JQuery帮我们进行了URL编码，因此参数中有中文也不用担心。
案例1：JQuery AJAX版的汇率转换。注 status指的是通讯是否成功
function zhuanghuan() { var amount = $("#count").val(); var type = $("#SelectType").val(); $.post("huilv.ashx",{"amount":amount,"type":type}, function(data, state) { if (state == "success") { $("#requst").val(data); } else { alert("ajax失败！"); } }); }
其中 {"amount":amount,"type":type} 是代表参数,可不加,直接写在第一个参数里面
案例2：填入商品名称，AJAX 自动带出价格填充到价格框
1.先创建数据库T_Products表,字段(Id,Name,Price),生成强类型DataSet,增加个按Name查询数据的方法
SELECT Id, Name, Price FROM T_Products where Name=@name
2.创建HTML，增加两个文本框就行
产品名<input id="CPname" type="text" /> 价格<input id="Price" type="text" />
3.创建处理程序页面 GetPrice.ashx
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string name = context.Request["name"]; //取得产品名 var data = new T_ProductsTableAdapter().GetDataByName(name); //通过产品名查询 if (data.Count > 0) //如果查询到的话 { context.Response.Write(data.Single().Price); //返回此产品的价格 } else { context.Response.Write("none"); //否则返回 none } }
3.创建Javascript脚本,使用JQury,使用AJAX
<script type="text/javascript"> $(function() { //页面一加载完毕后,就加载此函数 $("#CPname").blur(function() { //当#CPname控件失去焦点的时候 var Name = $("#CPname").val(); //获得用户输入的产品名 $.post("GetPrice.ashx", { "name": Name }, function(data, state) { if (state == "success") { //如果状态成功 if (data != "none") { $("#Price").val(data); //将返回的值(价格)写入到#Price控件中 } else { $("#Price").val("没有找到你要的东西！"); } } }) }) }) </script>
//------- 下面是用纯Javascript写的
<script type="text/javascript">
function price() {
var name = document.getElementById("CPname").value;
var Cname = encodeURI(name); //注意中文的转换,在JQury中不用,好像自动转换
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp) {
alert("xmlhttp创建失败！");
return false;
}
xmlhttp.open("Post", "GetPrice.ashx?name=" + Cname);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var val = xmlhttp.responseText;
if (val != "none") {
document.getElementById("Price").value = xmlhttp.responseText;
} else {
document.getElementById("Price").value = "没有找到你要的东西";
return false;
}
}
}
}
xmlhttp.send();
}
如果是这样写的话，就需要在 CPname控件中加入 onblur() 失去焦点时的事件了如：
<input id="CPname" type="text" onblur="price()" />
案例3：用 Repeater 加载用户的评论,实现用户评论无刷新,动态网页
1.HTML设置
<ul id="ulComment"> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsPost"> <ItemTemplate> <li> IP：<%#Eval("IPAddr") %><br /> 日期：<%#Eval("PostDate") %> <br /> 内容：<%#Eval("msg") %><br/> </li> <hr color="red" /> </ItemTemplate> </asp:Repeater> </ul> <textarea id="txtMsg" name="S1"></textarea><br /> <input id="btnPost" type="button" value="评论" onclick="post()" />
2.处理程序页面 PostComment.ashx
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string msg = context.Request["msg"]; string ip = context.Request.UserHostAddress; new T_PostsTableAdapter().Insert(ip, msg, DateTime.Now); context.Response.Write("ok"); }
3.Javascript设置
<script type="text/javascript">
function post() {
var emsg = document.getElementById("txtMsg").value;
var msg = encodeURI(emsg);
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp) {
alert("XMLHTTP创建失败");
}
xmlhttp.open("POST", "PostComment.ashx?msg=" + msg, false);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
if (xmlhttp.responseText == "ok") {
alert("发表成功！");
var newComment = "<li>日期：" + new Date().toLocaleTimeString() + "<br />
IP:自己<br />" + "内容:" + document.getElementById("txtMsg").value + "<br />
<hr color=‘pink‘ />";
document.getElementById("ulComment").innerHTML += newComment;
}
}
}
}
xmlhttp.send();
}
</script>
案例4：用静态页面 ul 加载用户的评论,静态网页
1.HTML设置
<ul id="ulComment">
2.处理程序页面设置 htmlPost.ashx
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; var comment = new T_PostsTableAdapter().GetData(); StringBuilder sb = new StringBuilder(); foreach (var items in comment) { sb.Append(items.IPAddr).Append("|").Append(items.PostDate).Append("|") .Append(items.Msg).Append("$"); context.Response.Write(sb.ToString().Trim(‘$‘)); } }
3. Javascript设置
<script type="text/javascript"> $(function() { $.post("htmlPost.ashx", function(data, status) { if (status != "success") { alert("<li>加载失败！</li>"); return; } var lines = data.split("$"); for (var i = 0; i < lines.length; i++) { var line = lines[i]; var file = line.split("|"); var comment = $("<li>IP:" + file[0] + "<br />日期:" + file[1] + "<br /> 内容:" + file[2] + "</li><br /><hr color=‘red‘ />"); $("#ulComment").append(comment); } }) }) </script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
