jQuery学习笔记（四）

jQuery AJAX

AJAX技术的优点不用多说，有优秀的用户体验、提高Web程序的性能、减轻服务器和带宽的负担。

AJAX的也存在几项待完善的缺点：

（1）浏览器对XMLHttpRequest对象的支持度不足

AJAX的不足之处首先来自于浏览器。由于不同浏览器之间存在着差异，为了能让AJAX应用能在各个浏览器中正常运行，程序员必须花费大量精力来兼顾不同浏览器之间的差别。开发难度比普通Web开发高出很多。

（2）破坏浏览器前进、后退、按钮的正常功能

在AJAX中前进和后退按钮的功能都会失效，虽然可以通过一定的方法（添加锚点）来使用户可以使用该功能，但是这也同样提高了开发的复杂度。

（3）对搜索引擎的支持的不足

通常搜索引擎都是通过爬虫程序来对互联网上的海量数据来进行搜索整理的，但是爬虫程序现在还不能理解那些奇怪的JS代码以及由这些代码引起的页面内容的变化。

AJAX的XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象，它是AJAX实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。

AJAX的使用

（1）定义一个函数，通过函数来一部获取信息，如：

function Ajax(){

// ...

}

（2）声明一个空对象来装入XMLHttpRequest，如：

var xmlHttpReq = NULL；

（3）给XMLHttpRequest对象赋值，如：

if (window.ActiveXObject){       //IE5 IE6 是以ActiveXObject的方式引入XMLHttpRequest对象的

    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP")

} 

else if{      //除IE5 IE6以外的浏览器

    xmlHttpReq = new XMLHttpRequest();  

}

说明：IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的，而其他浏览器的XMLHttpRequest对象是window的子对象

（4）使用open()方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的URL，如：

xmlHttpReq.open("GET", "test.php", true)

说明：默认情况下，使用XMLHttpRequest对象发送的HTTP请求时异步进行的，但是可以显式地把async参数设置为true

（5）为XMLHttpRequest注册一个回调事件处理器。当readyState值改变时，会激发一个readydstatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器，如：

xmlHttpReq.onreadystatechange = RequestCallBack;

（6）使用send()方法发送该请求，由于请求使用的是HTTP的GET方式，所以可以在不指定参数或使用null参数的情况下调用send()方法，如：

xmlHttpReq.send(null)

说明：当请求状态改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。因此，在处理该响应之前，事件处理器应该检查readyState的值和HTTP状态。当请求完成加载（readState的值为4）并且响应已经成功（HTTP状态值为200）时，就可以调用一个JS函数来处理响应内容，如：

function RequestCallBack(){

    if(xmlHttpReq.readyState == 4){

         if(xmlHttpReq.status == 200 ){

            document.getElementById("resText").innerHTML = xmlHttpReq.responseText;

        }

    }

}

jQuery中的AJAX

jQuery对AJAX操作进行了封装，分为3层：

第1层（最底层）：$.ajax()

第2层：load()、$.get()、$.post()

第3层：$.getScript()、$.getJSON()

第一层

$.ajax()

$.ajax(options)

第二层

（1）load()

load(url [, data] [, callback])

url：请求HTML页面的URL地址；

data：发送至服务器的key/value数据；

callback：请求完成时的回调函数，无论请求成功或失败；

回调函数有3个参数，分别代表请求返回的内容、请求状态、XMLHttpRequest对象

（2）$.get()、$.post()

它们是jQuery中的全局函数，可以传递一些参数给服务器中的页面

$.get(url [, data] [, callback] [, type])

载入成功时回调函数自动将请求结果和状态传递给该方法，回调函数只有两个参数：data、textStatus

type是指服务器端返回内容的格式，包括xml、html、script、json、text、default

$.post()

GET和POST的区别

GET请求会将参数跟在URL后进行传递；而POST请求则是作为HTTP消息的实体内容发送给Web服务器。

GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）

GET方式请求的数据会被浏览器缓存起来，其他人可以从浏览器的历史记录中读取到这些数据，会带来严重的安全问题；POST相对来说能够避免。

GET方式和POST方式传递的数据在服务器端的获取也不同。

第三层

（1）$.getScript()

用于动态加载JS文件

（2）$.getJSON()

用于加载JSON文件