Ajax基础
前几天用到了Ajax，突然感觉有点生疏了，于是上网查询资料把这一块知识补全。
ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），Ajax可以实现页面的无刷新。
Ajax操作一般可以分为五步：
1——创建Ajax对象
由于浏览器对XMLHttpRequest对象的支持不足，只能被IE5.0及以后的版本支持，所以创建对象的时候需要对浏览器进行区别，具体代码如下：
try{
//先尝试使用标准的方式创建（Firfox,Ie8,Chrome）
xhr=new XMLHttpRequest();
}catch (e){
//出现异常说明是IE7 以前额版本，则使用ActiveXObject创建
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
2——设置状态变化回调函数
//设置状态变化回调函数 xhr=new onreadystatechange=resCallback;//本次的回调函数是resCallback;
function resCallback(){
//判断请求是否成功完成并且成功返回
if(xhr.readyState==4&& xhr.status==200){
var resDiv=document.getElementById("result");
var old=resDiv.innerHTML;
resDiv.innerHTML=old+xhr.responseText+"<br/>";
}
}
//设置请求方式和URL xhr.open("GET","showTime.jsp");
3——发送请求
//发送请求
xhr.send(null);
4——接收返回值
这一步是在回调函数里面执行
5——根据返回值操作页面节点对象
--__以下是本次案例的全部代码：
<body> <input type="button" value="获取时间" onclick="getTime()"/> <div id="result">这里将显示时间，但是不会刷新全部页面</div> </body>
<script> var xhr; function getTime(){
try{
//先尝试使用标准的方式创建（Firfox,Ie8,Chrome）
xhr=new XMLHttpRequest();
}catch (e){
//出现异常说明是IE7 以前额版本，则使用ActiveXObject创建
xhr=new ActiveXObject("Microsoft.XMLHTTP")//设置状态变化回调函数
xhr=new onreadystatechange=resCallback;//本次的回调函数是resCallback;
function resCallback(){
//判断请求是否成功完成并且成功返回
if(xhr.readyState==4&& xhr.status==200){
var resDiv=document.getElementById("result");
var old=resDiv.innerHTML;
resDiv.innerHTML=old+xhr.responseText+"<br/>";
}
}
//设置请求方式和URL xhr.open("GET","showTime.jsp");
</script>
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); //这段代码是在JQueryAPI上Copy的，$.ajax中请求参数和$.post/$.get的参数不一样，$.ajax的参数数据要求是Key和Value型的而post和get只需参数的name和参数值
dataType—服务器返回的数据类型 ：。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。
随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
async： 俗称Ajax的开关，当这个属性值是true的时候，这次请求就是一个异步请求，当属性值是false的时候该请求就是同步请求，需要注意的是：同步请求会锁住浏览器直到这 个请求完成后用户才能在页面做其他的操作。
context object
这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：
$.ajax({
url: "test.html",
context: document.body,//让回调函数内this指向这个对象这里是body对象
success: function(){
$(this).addClass("done");
}});
Jquery中的Ajax有很多属性，这里只是基础，以下几种下次再说。
