一、AJAX概述

切莫应用 AJAX 的网页,如果假定更新内容,需要重载整个页面。

AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和
XML)用于异步通讯,通过当后台和服务器进行少量底数据交换,在匪重载整个网页的情景下,对网页局部实现异步刷新。

 

二、AJAX核心

JavaScript 中应用 XMLHTTPRequest 对象(XHR)实现 AJAX
请求。使用此目标之前,先了解一下它们的性质和方:

属性 描述
readyState

表示 XMLHttpRequest 对象的状态:

0:未初始化状态。已创建 XMLHTTPRequest 对象。

1:准备发送状态。已调用 open 方法,send 方法尚未调用。

2:已经发送状态。send 方法已经调用,尚未开始接受数据。

3:正在接收状态。已经接收到 HTTP 响应头信息,但是响应体还没有完全接收到。

4:完成响应状态。响应数据接受完成。

onreadystatechange    

当 readyState 值(XMLHTTPRequest 对象状态)发生改变时的响应事件。

responseText

服务器响应的文本内容。

responseXML

服务器响应的 XML 内容。

status

服务器响应的 HTTP 状态码。200:OK。304:资源未修改。404:页面未找到。500:服务器错误。

statusText

服务器响应的 HTTP 状态文本。OK、资源未修改、页面未找到、服务器错误等。

 

方法 描述

open(method,url,

asynch,username,

password)

指定和服务器端交互的HTTP方法,URL地址,即其他请求信息;

Method:表示http请求方法,一般使用"GET","POST"。

url:表示请求的服务器的地址。

asynch:表示是否异步(ture),默认为 true。

后边两个可以不指定。

username 和 password 分别表示用户名和密码,提供 HTTP 认证机制需要的用户名和密码。

setRequestHeader(header,

value)

设置请求头。header: 头名称。value: 头的值。

getResponseHeader(header) 获取指定 header 的响应头信息。
getAllResponseHeaders() 获取所有响应头信息。
send(content)

向服务器发出请求,如果采用异步方式,该方法会立即返回。

content:POST请求时以字符串或 formData 对象传进去,GET请求时不填参数或设为 null 。

abort()

中止请求。XMLHTTPRequest 对象恢复到状态0(未初始化)。

 

三、AJAX步骤

相似步骤如下:

  1. 实例化 XMLHTTPRequest 对象(注意 IE 兼容性)
  2. 绑定监听事件(onreadystatechange 属性,判断即便绪用 readState 属性 ==
    4,判断响应成功用 status 属性 == 200,获取响应用 responseText 或
    responseXML 属性。
  3. 树立请求(open() 方法,注意最后一个参数为 ture(因为凡 AJAX ))
  4. 设置请求头(setRequestHeader() 方法,仅限于POST)
  5. 出殡请求(send() 方法,POST 请求时于 send() 方法添加提交参数)

 

四、AJAX实现

// 第一步,创建 XMLHTTPRequest 对象
var xhr = window.XMLHTTPRequest ? (new XMLHTTPRequest()) : (new ActiveXObject('Microsoft.XMLHttp'));
if(!xhr){
    alert('创建 XMLHTTPRequest 对象失败!');
    return false;
}
// 第二步,绑定回调函数
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status = 200){ // 请求就绪 && 响应成功
        var data = xhr.responseText; // 如果是 XML 数据,用 responseXML 属性获取       
        // DOM 操作
    }
}
// 第三步,建立请求
xhr.open("POST", url, true); // 参数三默认为 true(异步),可以不填
// 第四步,设置请求头(仅限于POST)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 第五步,发送请求
xhr.send('fname=michael&&lname=jordan'); // 参数是POST请求体

此地,强调以下四点(引用自 廖雪峰的官方网站 ,第
4 漫长小发改)

  1. 由此检测 window 对象是不是有 XMLHttpRequest
    属性来确定浏览器是否支持标准的
    XMLHttpRequest。注意,不要因浏览器的 navigator.userAgent
    来检测浏览器是否支持有 JavaScript
    特性,一凡是盖这字符串本身可以以假乱真,二是通过IE版本判断JavaScript特性将非常复杂。

  2. 当创建了XMLHttpRequest对象后,要优先安装 onreadystatechange
    的回调函数。在回调函数中,通常我们只是需要经 readyState === 4
    判断请求是否好,如果既形成,再冲 status === 200
    判断是否是一个成功的响应。

  3. XMLHttpRequest 对象的 open() 方法有3只参数,第一独参数指定是 GET
    或者 POST,第二个参数指定 URL
    地址,第三单参数指定是否使用异步,默认是true,所以可以无写。注意,千万不要拿第三个参数指定为false,否则浏览器将停止响应,直到AJAX请求完成。如果这要耗时
    10 秒,那么 10 秒内而见面发觉浏览器处于“假死”状态。

  4. 末调用 send() 方法才真的发送请求。GET 请求不需要参数(或者
    null),POST 请求需要把 body 部分因字符串或者 FormData 对象传进。

 

五、jQuery中的AJAX

直白用 JS 写 AJAX 步骤有些麻烦。jQuery 中查封装了 AJAX 的迅速方法。 

$.ajax(url,[settings])          // 执行异步 HTTP (Ajax) 请求
$('选择器').load(url,[data],[callback])   // 从服务器加载数据,把返回 HTML 放入匹配元素
$.get(url,[data],[fn],[type])   // GET 请求加载数据
$.getJSON(url,[data],[fn])  // GET 请求加载 JSON 编码数据
$.getScript(url,[callback]) // GET 请求 JavaScript 文件,并执行
$.post(url,[data],[fn],[type])  // POST 请求加载数据

更多jQuery 的 AJAX 请参考 jQuery
的国语手册,实例请参考
http://www.cnblogs.com/jayleke/archive/2012/08/10/2633174.html

 

六、推荐阅读

于详细的 AJAX 介绍,并且文末涉及了 CORS
跨域:廖雪峰的官方网站-AJAX

 

七、扩展阅读

AJAX
请求不可避免的干到一定量独问题:第一是AJAX以何种格式来交换数据(通常是JSON);第二凡跨域需求是怎么化解的(通常是JSONP)。这首稿子有通俗易懂的分解:【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

既然 AJAX
请求涉及了跨域,那么什么是跨域?跨域的兑现方式而生出怎么样(JSONP、CORS、服务器跨域、postmessage
……
)?推荐看看这篇稿子:跨域请求的几乎种植实现方式

再有就是是GET 请求时会读取缓存,解决智是于 url
后面加加一个随意数,或者用 jQuery 的 $.ajaxSetup({cache: false});
等,详细请圈即首文章: 解决jquery load,get
方法缓存数据问题

 

相关文章

网站地图xml地图