jQuery框架的ajax理解运用

一．Ajax 概述
Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。jQuery 对 Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容 性。

二．load()方法
.load()方法可以参数三个参数：url(必须，请求 html 文件的 url 地址，参数类型为 String)、 data(可选，发送的 key/value 数据，参数类型为 Object)、callback(可选，成功或失败的回调 函数，参数类型为函数 Function)。

//HTML <inputtype="button"value="异步获取数据"/>  <div id="box"></div>//jQuery $('input').click(function(){    $('#box').load('test.html'); //添加到box里});//如果想对载入的 HTML 进行筛选，那么只要在 url 参数后面跟着一个选择器即可。 $('input').click(function(){     $('#box').load('test.html.my'); });

二.post（）和get（）方法
如果是服务器文件，比如.php。一般不仅需要载入数据，还需要向服务器提交数据，那 么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式：get 和 post。

在 Ajax 数据载入完毕之后，就能执行回调函数 callback，也就是第三个参数。回调函数 也可以传递三个可选参数：response（请求返回）、Status（请求状态)、xhr （XMLHttpRequest 对象）。

//jQuery  post/get方法$('input').click(function(){    $.post('a.php',{          //第一个参数url（get方法，把post改成get）       url:'baidu'            //第二个参数date    },function(response,status,xhr){     //第三个参数回调函数            alert('返回的值为：'+response+   //结果为哈哈哈                 '，状态为：'+status +      //结果为success                 '，状态是：'+xhr.statusText);   //结果为OK        });    })//php接收 post/get 方法    if($_POST['url']=='baidu'){   //POST改成GET        echo'哈哈哈';    }    else{        echo'错误';    }//get方法，改掉对应的地方

注意：status 得到的值，如果成功返回数据则为：success，否则为：error。
如果成功返回数据，那么 xhr 对象的 statusText 属性则返回’OK’字符串。除了’OK’的状态 字符串，statusText 属性还提供了一系列其他的值，如下：

第三个回调函数，一般来说只传递response一个参数就可以。

三.getScript() 和 getJSON()
有时我们希望能够特定的情况再加载 JS 文件，而不是一开始把所有 JS 文件都加载了。这时使用$.getScript()方法。

//点击按钮后再加载 JS 文件 $('input').click(function(){     $.getScript('test.js');   });

$.getJSON()方法是专门用于加载 JSON 文件的，使用方法和之前的类似。

$('input').click(function({    $.getJSON('test.json',function(response,status, xhr){            alert(response[0].url);    }); });

四. ajax() 方法
$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于ajax()方法的封装。 这个方法只有一个参数，传递一个各个功能键值对的对象。

$('input').click(function(){     $.ajax({ type:'POST',    //这里可以换成 GET    url:'a.php',     data:{ url:'baidu' },     success:function(response,stutas,xhr){        $('#box').html(response);     }    });});

五.表单序列化
使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对 大量表单元素时，会把表单元素内容序列化为字符串，然后再使用 Ajax 请求。

//html<form>    用户名：<input type="text" name='user'/>    密码： <input type="text" name='password' />          <input type="button" value="提交" /></form><div id="box"></div>//jquey$('form input[type=button]').click(function (){     $.ajax({         type:'POST',         url:'a.php',         data:$('form').serialize(),         success:function(response,status,xhr){             $('#box').html(response);           }     });});//PHPecho $_POST['user'].'-'.$_POST['password'];

学习不容易，总结出来又是九点了。