首页> 基础笔记 >JS/JQ基础学习 >Ajax Ajax

JavaScript-AJAX技术:异步和同步

作者:小萝卜 2023-03-23 浏览 221

简介AJAX技术:异步和同步

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>AJAX实例</title>
    </head>
    <body>
        <!-- html注释 -->
        <h2>AJAX技术:异步和同步</h2>
        <button onclick="doAjax()">加载</button>
        <div id="did" style="width:300px;border:1px solid #ddd;"></div>
        <script type="text/javascript">
            function doAjax(){
                var info="hello PHP!";
                //1.创建xmlHttpRequest请求对象
                var xmlhttp;
                if(window.XMLHttpRequest){
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }else{
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                
                //2.初始化请求
                //xmlhttp.open("get","1.php",true);//异步
                xmlhttp.open("get","1.php",false); //同步
                
                //3.设置回调函数
                xmlhttp.onreadystatechange=function(){
                    //判断是否已经请求结束
                    if(xmlhttp.readyState==4){
                        //浏览器响应状态
                        if(xmlhttp.status==200){
                           //获取响应结果
                           info = xmlhttp.responseText;
                        }else{
                            alert("请求失败!");
                        }
                    }
                }
                
                //4.执行发送
                xmlhttp.send();
                
                document.getElementById("did").innerHTML=info;
                
            }
            
            
        </script>
    </body>
</html>
 
<?php 

	echo 'i love you very much';
	// var_dump($_GET);

 ?>
 

很赞哦! (0)

文章评论

    高端网站建设