AJAX介绍

官网地址：http://www.w3.org/TR/XMLHttpRequest/

 

1、AJAX是什么？

AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)；

AJAX不是一种新的编程语言，而是一种使用现有标准的新方法；

AJAX是与服务器交换数据并更新部分页面的艺术，在不重新加载整个页面的情况下。

 

AJAX是一种在无须重新加载整个页面的情况下，能够更新部分页面的技术。

AJAX是一种用于创建快速动态网页的技术。

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

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

Google Suggest

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

2、从一段源代码开始

Html代码:

<div id="resText"><h2>这是结果显示地</h2></div>

<button type="button" onclick="loadByGet();">LoadByGet</button>
<button type="button" onclick="loadByPost();">LoadByPost</button>
<button type="button" onclick="loadSync();">LoadSync</button>

Js代码:

//创建一个XMLHttpRequest对象
function getXmlHttpRequest() {
    var xmlHttpRequest = null;
    //IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest对象的
    if (window.ActiveXObject) {
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    //除IE5 IE6以外的浏览器XMLHttpRequest是Window的子对象
    } else if (window.XMLHttpRequest) { 
        xmlHttpRequest = new XMLHttpRequest();//实例化一个XMLHttpRequest
    }
    return xmlHttpRequest;
}
        
function loadByGet() {
    var xmlHttpRequest = getXmlHttpRequest();
    //使用get方式，同步获取数据
     xmlHttpRequest.open("GET", "/Service/XmlHttpRequest.ashx?method=Get", false);
    xmlHttpRequest.send();

    document.getElementById("resText").innerHTML = xmlHttpRequest.responseText;
}
function loadByPost() {
    var request = getXmlHttpRequest();
    //使用post方式，同步获取数据
     request.open("POST", "/Service/XmlHttpRequest.ashx", false);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send("method=Post");

    document.getElementById("resText").innerHTML = request.responseText;
}

//异步获取数据
function loadSync() {
    var xmlHttp = getXmlHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("resText").innerHTML = xmlHttp.responseText;
        }
    };
    xmlHttp.open("GET", "/Service/XmlHttpRequest.ashx?method=Get", true);
    xmlHttp.send();
}