AJAX——入门

一、简介

         AJAX=Anchronous JavaScript and XML(异步的JavaScript和XML)，是一种用于创建快速动态网页的技术。

         AJAX通过在后台与服务器进行少量数据交换，在无需重新加载整个页面的情况下，能够更新部分网页的技术。

 

与传统网页对比：传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页。

 

二、XmlHttpRequest对象

 

       AJAX的核心是JavaScript对象XmlHttpRequest。所有现代浏览器均支持XMLHttpReques对象（IE5和IE6使用ActiveXObject）。

       XMLHttpRequest用于在后台与服务器交换数据。

 

1.建XMLHttpRequest对象：

        //创建XMLHttpReques对象的语法
        variable = new XMLHttpRequest();

        //老版本的Internet Explorer（IE5和IE6）使用ActiveX对象
        variable = new ActiveXObject("Micriosoft.XMLHTTP");

        //为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象。
        //如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject；
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

 

2.XMLHttpRequest对象和服务器交换数据：

	//将请求发送到服务器，使用XMLHttpRequest对象open()和send()方法。
        //GET方式      
        xmlhttp.open("GET", "test1.txt", true);
        xmlhttp.send();
        //POST方式
        xmlhttp.open("POST", "test.asp", true);
        xmlhttp.send();

说明：

open(method,url,async)：规定请求的类型、URL以及是否异步处理请求

method：请求的类型：GET或POST

         1.与POST相比,GET更简单也更快，并且在大部分情况下都能用。

         2.在以下情况中，使用POST请求：

            无法使用缓存文件（更新服务器上的文件或数据库）

            向服务器发送大量数据（POST没有数据量限制）

            发送包含未知字符的用户是，POST比GET更稳定也更可靠

url:文件在服务器上的位置。该文件可以使任何类型的文件，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php(在传回响应之前，能够在服务器上执行该任务)

      为避免得到的是缓存的结果，向URL添加一个唯一的ID，如下：

	xmlhttp.open("get","test1.asp?t="+Math.random(),true);
        xmlhttp.send();

 

async：true(异步)或false(同步)

当使用async=true时，请规定在响应出于onreadystatechange事件中的就绪状态时执行的函数;

	xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getelementById("myDIV").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","test.txt",true);
        xmlhttp.send();

三、响应

 如需获得来自服务器的响应，请使用XMLHttpRequest对象的responsText或responseXML属性 。

  responseText：获得字符串形式的响应数据。

  responseXML：获得XML形式的响应数据。

	//responseText属性返回字符串形式的响应
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        //responseXML属性返回XML，需要解析
        xmlDoc = xmlhttp.responseXML;
        txt = "";
        x = xmlDoc.getElementsByTagName("ARTIST");
        for (i = 0; i < x.length; i++) {
            txt = txt + x[i].childNodes[0].nodeValue + "<br/>";
        }
        document.getElementById("myDiv").innerHTML = TXT;

 

AJAX学习网站：http://www.w3school.com.cn/ajax/index.asp