AJAX笔记

来源：互联网发布：手机数据分析软件编辑：程序博客网时间：2024/05/17 10:40

AJAX，很久以前就听到过，因为又有个足球队的名字叫做“阿贾克斯”，所以感觉很酷的样子。现在很多地方都要用到，把重要的一些东东记下来先。Ajax即是Asynchronous JavaScript + XML的简写，它是用Javascript来进行绑定和调用，通过使用XMLHttpRequest同服务器进行异步通信，用Dom模型来交互、动态的显示，最后再用CSS+XHTML来进行表示，通过这一些列技术的综合运用为用户提供良好的用户体验的一种技术，现在都说“互联网富应用”，富应用也就是更好的交互体验，AJAX正是能够带给用户出色的丰富的体验。

Http方法，有两种形式一种是“get",另一个种是”post" , 两者的区别就相当于表单提交时，如果使用get方法，就可以在url里看到提交的值，是显示的，不安全；而post是隐式的，看不到提交的值，相对比较安全，但与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET更稳定也更可靠

原生态的AJAX不算麻烦，但是jQuery 提供的用于 AJAX 开发的丰富函数（方法）库用起来更强大更简单。通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。让你写的更少，做的更多。

几种常见的jquery.ajax的方法：

1.load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中；

2.get() 方法通过远程 HTTP GET 请求载入信息；

3.通过 HTTP GET 请求载入 JSON 数据，比如jquery.getJSON()等等；

jquery的方法的一个好处是提供了回调函数，也就是在ajax请求成功或失败或等等的状态中可以执行指定的函数，从而能够完成更多的功能。

此外jquery还提供了一个比较屌的功能，就是加载页面片段，也就是指定的进行加载。
比如.load() 方法允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。也就是说，你可以指定选择器进行加载！
例如： $("#result").load("ajax/test.html #container");
如果执行该方法，则会取回 ajax/test.html 的内容，不过然后，jQuery 会解析被返回的文档，来查找带有容器 ID 的元素。该元素，连同其内容，会被插入带有结果 ID 的元素中，所取回文档的其余部分会被丢弃。
jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，比如 <html>, <title> 或 <head> 元素。结果是，由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

如果请求的数据比较多，这个时候大量数据的传输就成了一个问题，这里就要用到了JSON！JSON(即：JavaScript Object Notation) 是一种轻量级的数据交换格式。

例如一段代码如下：

<body> <h1>Hello! This is the ShowPerson Page!</h1>     <input id="btnshow" type="button" value="Show All Person" onclick="ShowPerson()" />     <div id="pdiv" style="width:300px; height:300px; background:green">     <table id="showtable"></table>     </div> </body> 　<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> function ShowPerson{            //采用$.post()方法向后台请求数据             $.post("GetPerson.ashx", { i: Math.random() }, function (data, textStatus) {                     //请求成功，返回处理数据                     if (textStatus == "success") {                     alert(data);//显示一些返回的数据，主要做测试用                     var ps = $.parseJSON(data);//使用$.parseJSON(data)解析从后台请求的Json格式的数据                     var table = $("#showtable");                     for (var i = 0; i < ps.length; i++) {//经过解析后，将从后太读取的数据逐条添加到页面中显示                         var item = ps[i];                         var row = $("<tr><td>" + item.PName + "</td><td>" + item.PSex + "</td><td>" + item.PAge <br>+ "</td><td>" + item.PJob + "</td></tr>");                         table.append(row);                     }                     $("#pdiv").css("background", "lightblue");//添加完成后，将背景色修改，以显示添加完毕                 }             });         }     </script>

AJAX很简单但是很神奇的东西！

顺便推荐本书《Ajax入门经典》。