AJAX技术入门

    AJAX：Asynchronous Javascript And XML，所以说，AJAX就是指异步的JavaScript和XML。

对比AJAX和传统网页

传统的网页如果需要更新内容，必须重载整个网页。

AJAX：使用了AJAX技术后，可以在后台和服务器进行少量的数据交换，使网页实现异步更新。也就是可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX的核心是JavaScript和XMLHttpRequest，XMLHttpRequest使用户通过JavaScript向服务器提出请求并处理响应。

创建XMLHttpRequest对象的步骤：

1.建立XMLHttpRequest对象

2.注册回调函数

3.使用open方法设置和服务器端交互的基本信息

4.设置发送的数据，开始和服务器端交互

5.在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容

具体代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">function submit() {    //1.创建XMLHttpRequest    if (window.XMLHttpRequest) {        //IE7,IE8,FireFox,Morilla,Safari,Opera        xmlhttp = new XMLHttpRequest();        if (xmlhttp.overrideMimeType) {            xmlhttp.overrideMimeType("text/xml");        }    }else if (window.ActiveXObject) {        //IE6,IE5        var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP"];        for (var i = 0; i < activexName.length; i++) {            try {                xmlhttp = new ActiveXObject(activexName[i]);                break;            } catch (e) {            }        }    }    if (xmlhttp==undefined||xmlhttp==null) {        alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");        return;    }    //2.注册回调方法    xmlhttp.onreadystatechange = callback;    //记忆一个固定用法，获取文本框中用户输入的内容    var userName = document.getElementById("UserName").value;    //3.设置和服务器端交互的相应参数    //使用get方式异步交互    xmlhttp.open("GET", "AJAX?name=" + userName, true);    //4.设置向服务器端发送的数据，启动和服务器端的交互    xmlhttp.send(null);    ////3.post方式设置和服务器端交互的相应参数    //xmlhttp.open("POST", "AJAX", true)    //xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    ////4.设置向服务器端发送的数据，启动和服务器端的交互    //xmlhttp.send("name"+userName);    //回调方法    function callback() {        //5.判断和服务器端的交互是否完成，服务器端是否正确返回了数据        if (xmlhttp.readyState==4) {            //表示和服务器端的交互已经完成            if (xmlhttp.status==200) {                //表示服务器的相应代码是200，正确返回了数据                var message = xmlhttp.responseText;                //记忆向div标签中填充文本内容的方法                var div = document.getElementById("message");                div.innerHTML = message;            }        }    }}</span>

    AJAX技术为我们编写网页提供了一种新思路。