最简单的ajax例子

最新推荐文章于 2021-11-01 16:00:32 发布

龙卷风之家

最新推荐文章于 2021-11-01 16:00:32 发布

阅读量510

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest function asynchronous callback xhtml

本文链接：https://blog.csdn.net/xgx1985xgx/article/details/6578530

版权

Ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

ajax函数以及html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<title>Simple XMLHttpRequest</title>   
       
<script type="text/javascript">   
var xmlHttp;    
   
function createXMLHttpRequest() {    
    if (window.ActiveXObject) {    
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    
    }    
    else if (window.XMLHttpRequest) {    
        xmlHttp = new XMLHttpRequest();    
    }    
}    
       
function startRequest() {    
    createXMLHttpRequest();   
    alert(xmlHttp);
    xmlHttp.onreadystatechange = handleStateChange;    
    xmlHttp.open("GET", "http://localhost:8080/examples/index.jsp", true);    
    xmlHttp.send(null);    
}    
       
function handleStateChange() {    
alert("d");
    if(xmlHttp.readyState == 4) {    
        if(xmlHttp.status == 200) {    
            alert("The server replied with: " + xmlHttp.responseText);    
        }    
   
}    
}    
</script>   
</head>   
   
<body>   
    <form action="#">   
        <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/>   
    </form>   
</body>   
</html>

其中http://localhost:8080/examples/index.jsp的代码如下



ajax将会获取到下面的值：
<%

out.println("</company>");

%>

另增加一个有回调方法的ajax例子：

var xmlHttp;   
/**XMLHttpRequest  */  
function createXMLHttpRequest(){   
   if(window.XMLHttpRequest) {     
        xmlHttp = new XMLHttpRequest();         
    } else if (window.ActiveXObject) {      
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");      
    } else {      
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");      
    }        
}   
/**ajax 执行方法 传入要访问后台地址，该方法会将返回结果传给callback()方法*/  
function executeAjax(url){   
  
   createXMLHttpRequest();   
   xmlHttp.abort() ;   
   xmlHttp.open("post",url,true);   
   xmlHttp.onreadystatechange = function(){   
     if(xmlHttp.readyState==4){   
          if(xmlHttp.status==200) {   
              callback(xmlHttp.responseText);   
          }   
     }   
   };    
   xmlHttp.send(null);   
}   
  
function executeAjaxFun(url,fun){   
   createXMLHttpRequest();   
   xmlHttp.abort();   
   xmlHttp.open("post",url,true);   
   xmlHttp.onreadystatechange = function(){   
     if(xmlHttp.readyState==4){   
          if(xmlHttp.status==200) {   
              fun(xmlHttp.responseText);   
          }   
     }   
   };    
   xmlHttp.send(null);   
}