Ajax学习笔记(1)

Ajax全称为Asynchronous Javascript and XML。一般用于页面数据交互响应，最大的好处是响应时无需刷新页面。

Ajax的优点：

　　1、不需要插件的支持。用户只需允许javascript在浏览器上执行。

　　2、强大的用户体验。这是ajax最大的优点，用户能在不刷新页面的情况下更新数据，使得Web应用程序能更为迅速地回应用户的操作。

　　3、提高Web程序的性能。传统模式中，数据提交是以表单form来实现的，数据获取是靠刷新全页面的内容。而Ajax模式只是通y过XMLHttpRequest对象向服务器端提交数据，即按需发送。

　　4、减轻服务器和带宽的负担。Ajax的工作原理相当于在客户端和服务器端之间多了一个中间层，使用户操作与服务器响应异步化。它在客户端创建一个Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，减轻服务器和带宽的负担。

Ajax的不足：

　　1、浏览器对XMLHttpRequest对象的支持度不足。IE5及以后的版本才支持XMLHttpRequest对象。

　　2、破坏浏览器的前进、后退按钮。在Ajax中“前进”、“后退”按钮的功能都会失效，虽然可以通过一定方法（锚点）使用户可以使用“前进”、“后退”按钮，但相比传统方法还是麻烦许多。

　　3、对搜索引擎的支持度不足。

Ajax的核心就是XMLHttpRequest对象。

传统javascript编写Ajax的例子：

先编写html文件：

<input type = "button" value = "AjaxSubmit" onclick = "Ajax();"/>
<div id = "resText"></div>

然后编写函数

function Ajax() {
  var xmlHttpReq = null;
  if(window.ActiveXObject) { //IE5、IE6是以ActiveXObject的方式
                                       //引入XMLHttpRequest对象的
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) { //除IE5、IE6以外的浏览器
                                                    //XMLHttpRequest是window的子对象
    xmlHttpReq = new XMLHttpRequest(); //实例化XMLHttpRequest对象
  }
  xmlHttpReq.open("GET",url,true); //调用open方法并采用异步方式
  xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数
  xmlHttpReq.send(null); //get方法所以可以发送null
}

function RequestCallBack() { //一旦readystate改变则调用该函数
  if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) { //当请求已经加载(readystate==4)并且响应成功(status==200)
    document.getElementById('resText').innerHTML = xmlHttpReq.responseText;
  }
}

jQuery中的Ajax

　　1、load()方法

　　　　load方法一般结构：

load(url,data,callback);

load方法参数解释

参数名称	类型	说明
url	String	请求HTTP页面的URL地址
data	Object	发送至服务器key/value的数据
callback	Function	请求完成时的回调函数，无论请求成功还是失败

　　　　一般使用方法：

// 当send按钮点击时将test.html的内容加载到id为resText的元素中
(document).ready(function() {
  $('#send').click = function() {
    $('#resText').load("test.html");
  }
});

// 当send按钮点击时将test.html里class为parent的内容加载到id为resText的元素中
(document).ready(function() {
  $('#send').click = function() {
    $('#resText').load("test.html .parent");
  }
});

// 无参数传递时是GET方式
$('#resText').load("test.html",function() {
  //.....
});

//有参数传递时是POST方式
$('#resText').load("test.html",{name: "kkk", age: "20"},function(){
  //.....
});

// 回调函数
$('#resText').load("test.html",function(responseText, textStatus, XMLHttpRequest){
  // responseText      请求返回的内容
  // textStatus         请求状态：success、error、notmodified、timeout
  // XMLHttpRequest  XMLHttpRequest对象
});