jQuery实现Ajax应用

(1)$.ajax方法。

用法:
    $.ajax({
        属性名:属性值,
        ...
    });
注:
    通过属性名和属性值来控制ajax对象如何向服务器发请求。
    常见的属性有如下一些:
    url         请求地址 (比如 'quoto.do')
    type        请求类型(比如 'get','post')
    data        请求参数，有两种格式:
                    "uname=Sally&age=22"   请求字符串形式
                    {"uname":"Sally","age":22}  对象形式
    dataType    服务器返回的数据类型:
                json   json字符串
                text   文本
                html   html文档
                xml    xml文档
                script  javascript脚本
    success     是一个函数，用来处理服务器返回的数据。
                注：服务器处理成功，并且已经发送完所有数据。
    error       是一个函数，用来处理异常。
                注：服务器处理失败。
    async       同步还是异步。 true表示异步(默认值)。


(2)load方法。
注：会向服务器发送异步请求，并且将服务器返回的数据直接添加到
符合要求的节点之上。
用法:
    $obj.load(url,[data]);  
    url: 请求地址。
    data:请求参数，有两种格式(同上)。


(3)serialize方法。
　对表单对象生成请求字符串。
注：使用表单域的name属性值作为请求参数名。 

---

首先理解一下什么是Ajax,全称是Asynchronous Javascript And XML（异步JavaScript和XML）是一种交互式网页应用的网页开发技术。

用通俗的话说，就是当需要数据处理或更新的时候，不采用整个网页页面重载的方法，而是采用网页某部分更新，也就是让后台和服务器做少量的数据交换。

我对异步的理解是，原来页面不受影响，需要更新的数据做小部分的请求交换，这两个部分是异步的，可以同时进行。

下面看一下慕课网对ajax的基础教程：

1.load方法异步请求数据

$(xx).load(url, [data] , [callback])

url为加载服务器的地址，返回后的数据放置到xx中；【data】参数是请求时发送的数据，可选；callback是执行的回调函数。

特别注意的是，loadb不能跨域请求，也就是url要同域，如果要跨域请求，需要把其复制下来到本地搭建的服务器里面。

看一下再慕课网这个例子http://www.imooc.com/code/338

这里用的url就是同域http://www.imooc.com/data/fruit_part.html，如果要在本地测试是不行的。

  
  
<script type="text/javascript">
$( function () {
$( "#btnShow").bind( "click", function () {
var $ this = $( this);
$( "ul")
.html( "<img src='Images/Loading.gif' alt=''/>")
.load( "http://www.imooc.com/data/fruit_part.html", function() {
$ this.attr( "disabled", "true");
});
})
});
</script>
  
  

这里看到，对$("ul")添加两个动作，一个是显示一张加载的图片，之后请求过来更新数据，在请求完毕回来加载后，这张图片就被替换了。但是在实际上这个请求的速度很快，基本都看不到加载图片的。之后load里的函数表明，加载完数据后，执行一个回调函数，使得按钮不可用。

这个就是load方法。

2.getJSON方法异步加载JSON

这个方法是通过Ajax异步请求后获得json格式的文件，同样带data参数和回调函数。

首先看下each用法  .each(数据，回调函数名字（数据的索引，当前索引的数据项）{}

  
  
<script type="text/javascript">
$( function () {
$( "#btnShow").bind( "click", function () { //绑定点击事件
var $ this = $( this);
$.getJSON( "http://www.imooc.com/data/sport.json", function(data){ //接口url成功后执行回调函数，其中data是返回数据
$ this.attr( "disabled", "true");
$.each(data, function (index, sport) { //这里的data就是传进来的返回的数据，进行一个遍历，从index=0开始，每一项给它命名称为sport
if(index== 3)
$( "ul").append( "<li>" + sport[ "name"] + "</li>"); //添加一个index==3的sport的这个项的name
});

});
})
});
</script>
  
  

下面几个方法都是差不多的语法，其中的function（data）中的data就是请求后返回的数据：

3.getScript()异步加载并执行js文件

用法如上，只是请求之后会加载并执行服务器中的javascript格式的文件。

4.get()方法以GET方式从服务器获取数据

$.get(url,[callback]);

5.post()方法以POST方式从服务器获取数据

$.post(url,[data],[callback])

调用$.post()方法时，第一个参数为请求服务器的路径，第二个参数为请求进上传的参数，参数格式为key/value方式。

在调用 $.post()方法向服务器发送数据时，如果要接收返回的数据，需要添加该方法中的第三个参数，即回调函数，通过该函数中的参数获取返回值。

6.serialize()可以将表单中有name属性的元素值进行序列化，生成URL编码字符串，这个字符串可以放在URL后门做传递的参数。

  
  
<script type="text/javascript">
$( function () {
$( "#btnAction").bind( "click", function () { //点击btn之后，相应序列化事件
$( "#litest").html($( "form").serialize()); //把form里的有name属性的元素序列化，结果返回到litest中
})
})
</script>
  
  

出来的结果，以&分隔：

Text1=%E5%A5%A5id&Select1=0&Checkbox1=on

7.ajax()方法加载服务器数据

调用格式是 $.ajax([settings])

其中的settings是配置对象，有很多参数，下面用我做过的一个例子来举例说明：

  
  
$(document).ready(function ()
{
$('#send_ajax').click(function (){ //点击一个按钮，执行下面的代码
var params=$('input').serialize(); //序列化表单的值，赋给params变量
$.ajax({
url:'ajax_json.php', //后台处理程序php
type:'post', //数据发送方式post
dataType:'json', //接受数据格式json数据
data:params, //要传递的数据 序列化后的变量
success:update_page//回传函数(这里是函数名)即成功后执行update_page函数，可以传参（data）,即服务器返回的数据作为参数
});
});

});
  
  

看一下php的处理

  
  
$city=$_POST['city']; //这里的city是刚刚序列化input里面有name为city的值
$rtn = $city //把post接收到的city赋给rtn
return $rtn; //return到前台，即那个返回的data
  
  

8.ajaxSetup()方法设置全局默认选项

其意思是，当有共同的settings的时候，可以在全局中先设置好，之后每一个ajax就会通用这些设置。

  
  
<script type="text/javascript">
$( function () {
$.ajaxSetup({
type: "post", //同样用post方式
success: function(data){ //所有的ajax的回调函数都是这个，附加输出你被返回的data
$( "ul").append( "<li>你输入的<b> "
+ $( "#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$( "#btnShow_1").bind( "click", function () {
$.ajax({ //这里则是其特定的设置，比如data和url
data: { num: $( "#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$( "#btnShow_2").bind( "click", function () {
$.ajax({
data: { num: $( "#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
  
  

9ajaxStart()和ajaxStop()

ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())