Ajax的优势
1、不需要插件支持
2、优秀的用户体验
3、提高web程序的性能(传输数据的方式,按需发送)
4、减轻服务器和带宽的负担
Ajax的不足
1、浏览器对XMLHttpRequest对象支持度不足
2、破坏浏览器前进、“后退”的正常功能
3、对搜索引擎的支持不足
4、开发和调试工具的缺乏
Ajax的核心是XMLHttpRequest对象,它是通过Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。
$(function () { var xmlHttpReq = null; // 创建对象 // IE5,6是以ActiveXObject方式引入XMLHttpRequest if (window.ActiveXObject) { xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } // 其他浏览器XMLHttpRequest是window的子对象 else if (window.XMLHttpRequest) { xmlHttpReq = new XMLHttpRequest(); } xmlHttpReq.open("GET", "data.txt", true); xmlHttpReq.onreadystatechange = RequestCallBack; //当readyState值改变时,会激发onreadystatechange事件, //使用该属性来注册回调事件处理器 xmlHttpReq.send(null); //发送请求 function RequestCallBack() { if (xmlHttpReq.readyState == 4) { //请求完成加载 if (xmlHttpReq.status == 200) { //响应已经成功 $("#mes").html(xmlHttpReq.responseText); } } } });
jquery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()、$.post()方法,第3层是$.getScritp()和$.getJSON()方法。
1、load()方法
load(url [,data] [,callback])
a、载入HTML文档 :$("#resText").load("test.html");
b、筛选载入的HTML文档:$("#resText").load("test.html .para");
c、传递方式:如果没有参数则采用GET方式传递,反之,则会自动转换为POST方式
d、回调参数:该回调函数有三个参数,分别是
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){ // responseText: 请求返回的内容 // textStatus: 请求状态:success、error、notmodified、timeout四种 // XMLHttpRequest: XMLHttpRequest对象 })
tip:在load()方法中无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数就被触发
2、$get()和$pos()方法
load()方法通常用来从web服务器上获取静态的数据文件,而$get()或者$post()是传参数给服务器中的页面。
$get()和$pos()方法是jquery中的全局函数,而在此之前的jquery方法都是对jquery对象进行操作的。
$.get(url [,data] [,callback] [,type])
参数名称 | 类型 | 说明 |
url | String | 请求的HTML页的地址 |
data(可选) | Object | 发送至服务器的key/value数据会作为QueryString附加到请求URL中 |
callback(可选) | Function | 载入成功时回调函数(当为success)自动将请求结果和状态传递给该方法 |
type(可选) | String | 服务器返回内容的格式,包括xml,html,script,json,text和_default |
回调函数跟load()方法不同的是,只有当数据成功返回(success)后才被调用。
function(data,textStatus){ //data 返回的内容,可以是XML文档,JSON文件,HTML片段等 //textStatus 请求状态:success,error,notmodified,timeout 四种 }