js基础知识示例—js ajax请求

vvvbird

于 2017-09-27 14:38:33 发布

阅读量477

点赞数

CC 4.0 BY-SA版权

分类专栏：程序人生

本文链接：https://blog.youkuaiyun.com/vvvbird/article/details/78112610

程序人生专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个简单的Ajax实现案例，通过JavaScript发起异步GET请求到test.php文件，并在页面上显示响应结果。该示例展示了如何创建XMLHttpRequest对象、设置回调函数以及处理服务器返回的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function  Ajax(){
    var xmlHttpReq =null;
    if(xmlHttpReq.ActiveXObject){
        xmlHttpReq=new ActiveXObject('Microsoft.XMLHTTP');
    }else if(windows.XMLHttpRequest){
        xmlHttpReq=new XMLHttpRequest();
    }
    if(xmlHttpReq!==null){
        xmlHttpReq.open('GET','test.php',true);
        xmlHttpReq.onreadystatechange=RequestCallback;
        xmlHttpReq.send();
    }
    function  RequestCallBack() {
       if(xmlHttpReq.readyState==4){
           if(xmlHttpReq.status==200){
               document.getElementById('resText').innerHTML=xmlHttpReq.responseText;
           }
       }
    }
}


</script>
</head>
<body>
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText" ></div>
</body>
</html>