您好!欢迎访问家园网-www.jy.wang!

家园网

请逐行逐句逐词讲解下面Javascript中的一段代码: 异步提交

网络 作者:本站 点击:

请逐行逐句逐词讲解下面Javascript中的一段代码:    


function createRequest(url,username) {//初始化对象并发出XMLHttpRequest请求
        http_request = false;                       //初始化
        if (window.XMLHttpRequest) {                //谷歌、火狐等浏览器
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                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) {
            alert("不能创建XMLHTTP实例!");
            return false;
        }
        http_request.onreadystatechange = alertContents; //指定响应方法
        //发出HTTP请求
        http_request.open("POST", url, true);               //设置进行异步请求目标URL和请求方法
        http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        http_request.send("username="+username);            //向服务器发送请求
    }


讲解:


1. 函数定义与参数解析

function createRequest(url,username) {
  • 功能‌:创建XMLHttpRequest对象的工厂函数

  • 参数‌:

    • url:后端接口地址(如'checkName.php')

    • username:待验证的用户名字符串

2. 浏览器兼容性处理

http_request = false;
if (window.XMLHttpRequest) {  // 现代浏览器检测
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
        http_request.overrideMimeType("text/xml");
    }
} else if (window.ActiveXObject) {  // IE6/7检测
    try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
    }
}
  • 兼容策略‌:

    • 现代浏览器:直接创建XMLHttpRequest实例

    • IE6/7:尝试两种ActiveXObject构造函数(Msxml2优先)

3. 错误处理

if (!http_request) {
    alert("不能创建XMLHTTP实例!");
    return false;
}
  • 防御性编程‌:当所有尝试创建XHR对象都失败时终止执行

4. 请求配置

http_request.onreadystatechange = alertContents;  // 响应处理器
http_request.open("POST", url, true);             // 异步POST请求
http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http_request.send("username="+username);          // 发送表单数据
  • 关键配置‌:

    • 设置异步请求(async=true)

    • 指定Content-Type为表单编码

    • 将参数格式化为username=xxx的字符串

5. 缺陷说明

  1. 未定义alertContents‌:该函数未在代码中实现

  2. 缺乏响应处理‌:未处理服务器返回的数据

  3. 过时API‌:现代开发应使用fetch API替代

  4. 安全风险‌:未对url参数进行安全校验

标签: