原生Ajax:XMLHttpRequest对象

AJAX概念:

一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。用于创建快速动态网页的技术。

XMLHttpRequest 是 AJAX 的基础,并且所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

AJAX工作原理:

                             原生Ajax:XMLHttpRequest对象_第1张图片

AJAX基于Internert标准,并联合使用它们:

(1)XMLHttpRequest 对象 (异步的与服务器交换数据)。

(2)JavaScript/DOM (信息显示/交互)。

(3)CSS (给数据定义样式)。

(4)XML (作为转换数据的格式)。

示例:

第一步:创建XMLHttpRequest 对象

原生Ajax:XMLHttpRequest对象_第2张图片

第二步:向服务器发送请求请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法。具体参数,如下所示:

原生Ajax:XMLHttpRequest对象_第3张图片

使用方法:

(1)GET请求:


(2)POST请求:


注:如果post请求过程中有参数,需使用setRequestHeader() 来添加 HTTP 头。具体代码如下:


第三步:采用“onreadystatechange ”事件来监听状态变化,并获取服务器响应。


另外,服务器响应有两种形式: responseText 或 responseXML 。responseText代表获得字符串形式的响应数据。responseXML代表获得 XML 形式的响应数据。

XMLHttpRequest 对象的重要属性:

(1)readyState存有XMLHttpRequest 的状态,0~4。

         0——请求未初始化

         1——服务器连接已经建立

         2——请求已接受

         3——请求处理中

         4——请求已完成,且响应已就绪。

(2)status,HTTP的特定状态码:

100-199:信息性的标示用户应该采取的其他动作。

200-299:表示请求成功。

300-399:用于那些已经移走的文件,常常包括Location报头,指出新的地址。

400-499:表明客户引发的错误。

500-599:由服务器引发的错误。

具体实例:

(1)GET方法

原生Ajax:XMLHttpRequest对象_第4张图片

(2)POST方法

原生Ajax:XMLHttpRequest对象_第5张图片

你可能感兴趣的:(数据交互,ajax,原生,xmlhttprequest)