原生Ajax实践

Posted 2021-04-15 程序猿知识库

基本概念

GET：

• 参数在url中显示，通过URL或cookie传输。

• 发送数据长度有限制。

• 一般为了获取数据。

POST：

• 参数数据主要通过body传输。

• 发送数据量大。

• 一般是上传并修改数据。

代码实践

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<script>
    // 01 : 创建XMLHttpRequest对象，我们先进行封装一个方法，调用的时候直接返回这个对象。
    function CreateXHRObj(){
        if (typeof XMLHttpRequest != "undefined"){
            return new XMLHttpRequest();
        } else if (typeof ActiveXObject != "undefined"){
            if (typeof arguments.callee.activeXString != "string"){
                var versions = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'], i, len;
                for (i=0,len=versions.length; i < len; i++){
                    try {
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch (ex){
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        } else {
            throw new Error("No XHR object available.");
        }
    }

    // 02 : GET 方式请求：
    function GetMethod() {
        var xhr = CreateXHRObj();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                    alert(xhr.responseText);
                } else {
                    alert("Request was unsuccessful: " + xhr.status);
                }
            }
        };
        xhr.open("get", 'test.jsp', true);
        xhr.send(null);
    }

    // 03: 封装一个表单序列化serialize的接口，用于POST请求使用
    function serialize(form){
        var parts = [], field = null, i, len, j, optLen, option, optValue;
        for (i=0, len=form.elements.length; i < len; i++){
            field = form.elements[i];
            switch(field.type){
                case "select-one":
                case "select-multiple":

                    if (field.name.length){
                        for (j=0, optLen = field.options.length; j < optLen; j++){
                            option = field.options[j];
                            if (option.selected){
                                optValue = "";
                                if (option.hasAttribute){
                                    optValue = (option.hasAttribute("value") ? option.value : option.text);
                                } else {
                                    optValue = (option.attributes["value"].specified ? option.value : option.text);
                                }
                                parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                            }
                        }
                    }
                    break;
                case undefined: 
                case "file": 
                case "submit": 
                case "reset": 
                case "button": 
                        break;
                case "radio":
                case "checkbox":
                    if (!field.checked){
                        break;
                    }
                default:
                    if (field.name.length){
                        parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                    }
            }
        }
        return parts.join("&");
    }

    // 04: POST 方式请求：
    function PostMethod() {
        var xhr = CreateXHRObj();
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4){
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                    alert(xhr.responseText);
                } else {
                    alert("Request was unsuccessful: " + xhr.status);
                }
            }
        };
        xhr.open("post", "test.jsp", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        var form = document.getElementById(id);
        xhr.send(serialize(form));
    }
</script>

参考资料：
https://blog.csdn.net/longyin0528/article/details/80504249
https://blog.csdn.net/qq_30101879/article/details/77916622