AJax学习笔记

 AJax编程步骤：（以提交表单中两个数据相乘的积为例）

JS编程简单步骤：

 <script language="javascript">  
    //按钮“开始计算”响应函数，判断输入域情况后调用send_request函数。  
    function doCaculate() {  
        var f = document.form1;  
        if((f.number_1.value!="")&&(f.number_2.value!="")) {  
            document.getElementById("feedback").innerHTML = "正在计算，请稍后......";  
            send_request("process.jsp?number_1="+f.number_1.value+"&number_2="+f.number_2.value);  
        }  
        else if(f.number_1.value=="") document.getElementById("feedback").innerHTML = "乘数不能为空。";  
        else if(f.number_2.value=="") document.getElementById("feedback").innerHTML = "被乘数不能为空。";  
    }  
    var http_request = false;
     
    //向服务器发起XMLHTTP请求。  
    function send_request(url) {//初始化、指定处理函数、发送请求的函数  
        http_request = false;  
        //开始初始化XMLHttpRequest对象  
        if(window.XMLHttpRequest) { //Mozilla 浏览器  
            http_request = new XMLHttpRequest();  
            if (http_request.overrideMimeType) {//设置MiME类别  
                http_request.overrideMimeType('text/xml');  
            }  
        }  
        else if (window.ActiveXObject) { // IE浏览器  
            try {  
                http_request = new ActiveXObject("Msxml2.XMLHTTP");  
            } catch (e) {  
                try {  
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");  
                } catch (e) {}  
            }  
        }  
        if (!http_request) { // 异常，创建对象实例失败  
            window.alert("不能创建XMLHttpRequest对象实例.");  
            return false;  
        }  
        http_request.onreadystatechange = processRequest;  
        // 确定发送请求的方式和URL以及是否同步执行下段代码  
        http_request.open("GET", url, true);  
        http_request.send(null);  
    }  
    // 处理返回信息的函数  
    function processRequest() {  
        var f = document.form1;  
        if (http_request.readyState == 4) { // 判断对象状态  
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息  
                var returnStr = http_request.responseText;  
                if(returnStr.indexOf("Error")==-1) {  
                    f.result.value = returnStr;  
                    document.getElementById("feedback").innerHTML = "";  
                }  
                else {  
                    f.result.value = "";  
                    document.getElementById("feedback").innerHTML = returnStr;  
                }  
            } else { //页面不正常  
                alert("您所请求的页面有异常。");  
            }  
        }  
    }  
</script>

 

总结：红色表示三个JS方法之间是怎样衔接的.

以下是一些注意点。

第一，本例中使用的http的GET方法，你也可以使用POST，但是要设定Content-Type值，即http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")，这个方法用来设置了MIME类型。还有一点要注意，这些方法最好都大写，否则在firefox下将没有作用。

第二，http_request.open ('GET', url, true)。该方法会建立与服务器的链接，‘GET'指明了http调用方法；url指明了调用的url；true指明了该调用是异步处理，可以省略，默认为'true'。

第三，xmlObj.send(para)向服务器发出请求。是以POST向服务器发出request，其参数格式为:name=namevalue&so=on。