深入浅出AJAX (一) 轻松入门

前端之家收集整理的这篇文章主要介绍了深入浅出AJAX (一) 轻松入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. 简介
    1. AJAX是利用JavaScript脚本将XHTML CSS XML DOM等技术融合在一起,并通过XMLHttpResquest对象进行异步数据请求的新思想,利用它提高了用户体验度,可以说各种框架的出现,比如EXT DOJO等的出现都是为了提高用户体验度而开发的,全新全意为用户考虑是我们设计软件的宗旨。
  2. 与传统区别Web请求区别
    1. 它与传统Web页面数据处理流程有所不同,可以异步进行操作和处理,即用户对浏览器的和服务器处理可以同步进行,不需要等待。
    2. 看下面这张图
        1. 经典Web应用中浏览器向服务器提交数据后,需要等待服务器返回结果,才能继续执行,返回的是整个页面,一般为HTML页。
        2. Ajax web中并不需要等待服务器返回结果,浏览器还可以继续做其他的操作,而且服务器也不一定返回整个页面,返回的是Data,部分我们需要的数据,格式根据我们需要自己选择,如JSON XML 等等。
  3. 实现步骤
    1. 获取浏览器端数据
    2. 获取的数据提交到服务器端
    3. 接收服务器返回数据
    4. 将接受的数据动态显示页面
  4. 实例介绍

省市下拉列表级联菜单实现

  1. 界面
    1. $(function (){
    2. //注册下拉列表框的改变事件
    3. $('#dropProvince').change(function (){
    4. //1.获取浏览器(下拉列表选择项)的ID值
    5. var proID = $(this).val();
    6. //服务器地址
    7. var url = "../Hander/test.ashx?proID=" + proID
    8. //2.通过JQuery的get()方法,向服务器提交数据
    9. $.get(url,function (data) {
    10. //3、4.处理服务器返回的数据并加载到界面上
    11. var dtJSON = eval(data);
    12. //清空上次改变添加的数据,避免累加
    13. $('#dropCity').html("");
    14. $("<option value=''>" + "请选择城市" + "</option>").appendTo($('#dropCity'));
    15. for (var i = 0; i < dtJSON.length; i++)
    16. {
    17. //创建新的选择项,并添加到下拉列表中
    18. $("<option value=" + dtJSON[i].cityName + ">" + dtJSON[i].cityName + "</option>").appendTo($('#dropCity'));
    19. }
    20. })
    21. });
    22. });
    服务器端代码,并把数据转换成JSON格式
  1. public void ProcessRequest(HttpContext context)
  2. {
  3. context.Response.ContentType = "text/plain";
  4. //接受客户端请求的参数
  5. string proID = context.Request.QueryString["proID"];
  6. //实例化操作类
  7. VoteManager voteManager = new VoteManager();
  8. DataTable dt = new DataTable();
  9. //执行方法
  10. dt = voteManager.SelectCityByProvince(proID);
  11. //将数据转换为JSON格式
  12. string strJson = DataTableToJson("Json",dt);
  13. context.Response.Write(strJson);
  14. context.Response.End();
  15.  
  16. }
  17. //将DataTable数据转换成JSON数据格式
  18. public string DataTableToJson(string jsonName,DataTable dt)
  19. {
  20.  
  21. StringBuilder Json = new StringBuilder();
  22. Json.Append("[");
  23. if (dt.Rows.Count > 0)
  24. {
  25. for (int i = 0; i < dt.Rows.Count; i++)
  26. {
  27. Json.Append("{");
  28. for (int j = 0; j < dt.Columns.Count; j++)
  29. {
  30. Json.Append(dt.Columns[j].ColumnName.ToString() + ":\"" + dt.Rows[i][j].ToString() + "\"");
  31. if (j < dt.Columns.Count - 1)
  32. {
  33. Json.Append(",");
  34. }
  35. }
  36. Json.Append("}");
  37. if (i < dt.Rows.Count - 1)
  38. {
  39. Json.Append(",");
  40. }
  41. }
  42. }
  43. Json.Append("]");
  44. return Json.ToString();
  45. }
  1. 应用前景
    1. 既然Ajax可以解决并提高用户体验度,那么以后Web开发中必然少不了Ajax应用,它的应用前景应该很广泛。
    2. Ajax将使的浏览器快速方法,提高用户体验度,有可能浏览器的作用将会被更多的挖掘和利用,随着互联网和网速的提高,以后,可能会替代一些本地软件的应用,让我们的电脑更轻巧、便捷。

猜你在找的Ajax相关文章