JQuery AJAX介绍

Posted 2020-09-17 叶祖辉

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 [email protected]

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>