Ajax异步请求

最新推荐文章于 2025-09-05 11:31:06 发布

原创最新推荐文章于 2025-09-05 11:31:06 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #异步

本文详细介绍了如何使用Ajax技术实现网页中的页面局部刷新，包括创建Ajax对象、发起请求、处理请求状态和显示结果的过程。

在网页中如何实现页面局部刷新，JavaScript提供了一种方法，Ajax（ Asynchronous JavaScript and XML ”（异步的 JavaScript 与 XML 技术），指的是一套综合了多项技术的浏览器端网页开发技术。

/*创建Ajax*/
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
} /*发起请求*/
function startRequest(url,param) {
    createXMLHttpRequest();
    try {

        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.open("POST", url, true);
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send(param);

    }
    catch (e) {
        alert("xmlHttp Fail");
    }
}
/*判断是否请求成功*/
function handleStateChange() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200 || xmlHttp.status == 0) {
            showResult();
        }
    }
}
/*处理数据和显示*/
function showResult(){
  alter(xmlHttp.responseText);
}
/*发起一个HTTP请求*/
function httpRequest（）{
 /*发起post请求，参数用&连接*/
 var param ="type=" + subtype + "&content=" + subcontent;
 /*如果是get请求，参数可以直接带在后面*/
 /*var uri="http://xiyoumobile.com/PhoneAnswer/PhoneAPI/AdminAddSubject.aspx?type="+subtype + "&content=" + subcontent;*/
 var uri = "http://xiyoumobile.com/PhoneAnswer/PhoneAPI/AdminAddSubject.aspx";
 startRequest(uri,param);
}

上面方法，通过封装后可以通过startRequest(uri,param)，方法直接发起HTTP的post或get请求，请求成功后再showResult()函数中解析请求的结果。