1.回顾传统Ajax开发步骤
1 ①：创建xmlHttpRequest对象 2 var xmlHttp = creatHttpRequest(); 3 ②：绑定回调函数 4 xmlHttp.onreadystatechange = function(){……} 5 ③：建立连接 6 xmlHttp.open(“GET”,”url”); 7 ④：发送数据 8 xmlHttp.send(null) //GET请求 9 如果是POST请求需要设置编码格式： 10 xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); 11 xmlHttp.send(“key=value?key=value”) 12 ⑤：书写回调函数 13 if(readyState == 4){ 14 if(status ==200){ 15 …… 16 //操作xmlHttp.responseText主要针对返回HTML片段和json 17 //操作xmlHttp.responseXML主要针对返回XML片段。 18 } 19 }
2.jQuery的Ajax开发
jQuery提供了最底层的Ajax调用方法：$.ajax
1 $.ajax{ 2 type:”POST” 3 url: “some.php” 4 data: "name=John&location=Boston", 5 success: function(msg){ 6 alert( "Data Saved: " + msg ); 7 } 8 }
// 因为使用比较繁琐，所以在实际开发中，应用很少
为了简化Ajax开发，jQuery提供了对$.ajax（）进一步的封装方法$load、$get、$post。这三个方法不支持跨域，$getJSON、$getScript支持跨域。
①：load方法
load方法是jQuery中最为简单和常用的Ajax方法，处理HTML片段此方法最为合适。
语法
$("jquery对象").load("url","data") ;
url：Ajax访问服务器地址
data：请求参数
返回内容HTML片段 ，自动放入$("jquery对象")innerHTML 中(如果返回的数据需要处理，我们可以使用get或者post)
load()方法的传递参数根据参数data来自动自定。如过没有参数的传递，采用GET方式传递，否则采用POST方式
比如校验用户名是否存在
$(function(){
// 为用户名添加离焦事件
$("input[name='username']").blur(function(){
// 获得当前输入 username
var username = $(this).val();
// 提交Ajax校验
$("#info").load("/Ajax/checkUsername" , {'username': username});
});
});
<form>
<!-- div display:block 自动换行效果 span display:inline; 不会换行 -->
用户名 <input type="text" name="username" /> <span id="info"></span> <br/>
密码 <input type="password" name="password"/><br/>
<input type="submit" value="注册" />
</form>
②：get方法和post方法
语法 ：
$.get/$.post("url","parameter",function(data){...});
url Ajax访问服务器地址
parameter 代表请求参数
function 回调函数 data 代表从服务器返回数据内容
这里data代表各种数据内容 ： HTML片段、JSON、XML
如果传递参数给服务器使用 $.post , 不需要传参数 可以使用 $.get