Ajax笔记

什么是AJAX?

AJAX:”Asynchronous JavaScript and XML”

中文意思：异步JavaScript和XML。

指一种创建交互式网页应用的网页开发技术。

AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。

不是指一种单一的技术，而是有机地利用了一系列相关的技术：

web标准( Standards-Based Presentation )XHTML+CSS的表示,

使用 DOM( Document Object Model )进行动态显示及交互,

使用 XML 和 XSLT 进行数据交换及相关操作,

使用 XMLHttpRequest 进行异步数据查询、检索.

简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合.

那，什么是交互式?

普通的网页请求回执过程

 

 

AJAX优点

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。

这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。

AJAX应用可以仅向服务器发送并取回必需的数据，并在客户端采用JavaScript处理来自服务器的响应

因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%），结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据，这使得Web应用程序更为迅捷地响应用户交互，并避免了在网路上发送那些没有改变的信息。

AJAX优点

Ajax在本质上是一个浏览器端的技术

Ajax技术之主要目的在于局部交换客户端及服务器间之数据

这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)

与服务器之间的沟通，完全是透过Javascript 来实行

使用XMLHttpRequest 本身传送的资料量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序

AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

XMLHttpRequest对象

接着介绍XMLHttpRequest对象，因为Ajax应用程序的中心就是它。同时，对于许多数网页开发的实际问题中，它也是最广泛适用的解决方案。

我们还将介绍该对象的GET和POST方法的使用。同时探讨用户使用此对象常见的错误，例如当试图让页面在所有服务器上都能运行时遇到的一些问题。

 

XMLHttpRequest对象最初是作为IE5中的一个ActiveX控件出现的，随后Mozilla 1.0、Netscape7、Safari1.2和Opera7.60都将它纳入自身。

XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

XMLHttpRequest对象的作用在于，允许用脚本程序通过HTTP连接到服务器，而不是通过HTTP请求响应模型与服务器通信

。 简而言之：它可以异步从服务器端获取txt或者xml数据

创建XMLHttpRequest对象

同步使用XMLHttpRequest对象

按照下面模式，可以同步地XMLHttpRequest对象：

创建对象； - new (叫助手过来)

创建请求； - open (告诉他要去做的事情)

发送请求； - send (去吧)

一、先来创建XMLHttpRequest对象

在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：

var xhr = new XMLHttpRequest();

在IE5/6中代码为：

var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

注意，JavaScript区分大小写。

 

  function createXmlHttp() {//创建xhr对象
                var xhobj = false;
                try {
                    xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
                } catch (e) {
                    try {
                        xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
                    } catch (e2) {
                        xhobj = false;
                    }
                }
                if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
                    xhobj = new XMLHttpRequest();
                }
                return xhobj;
            }

创建XMLHttpRequest对象

XMLHttpRequest对象的方法

                方法                               说明

     abort                                       取消请求

    open                          需要使用多个参数，第一个设置方法属性，第二个设置目标URL,第                                        三个指定是同步（false）还是异步（true）发送请求

send                              发送请求到服务器

setRequestHeader           添加自定义Http头到请求

getAllResponseHeaders    获取HTTP响应头的整个列表

 

getResponseHeader          仅获取指定的HTTP响应头

 

创建XMLHttpRequest对象

二、为XMLHttpRequest对象设置请求参数 1.设置参数： xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true); 2.POST方式：xhr.open("POST", "GetAreasByAjax.aspx", true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 3.设置浏览器不使用缓存xhr.setRequestHeader("If-Modified-Since", "0");

三、发送请求：(分别对应GET和POST) xhr.send(null);//GET方式 xhr.send("isAjax=1&na=123");//POST方式

 

是不是少了什么？请求发送出去后会有响应回来，那我怎么知道请求已经返回了呢？

 

 function createXmlHttp() {//创建xhr对象
                var xhobj = false;
                try {
                    xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
                } catch (e) {
                    try {
                        xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
                    } catch (e2) {
                        xhobj = false;
                    }
                }
                if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
                    xhobj = new XMLHttpRequest();
                }
                return xhobj;
            }