基础AJAX

file1.php

<script type="text/javascript" defer>
var xmlHttp;
function fun(str){
    //1.给自定义变量赋一个XMLHttpRequest对象，IE浏览器和其他浏览器对象不同
    if(window.ActiveXObject){                            //IE浏览器
        xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
    }else if(window.XMLHttpRequest){                    //其他浏览器
        xmlHttp=new XMLHttpRequest();
    }

    //2.主要通过XMLHttpRequest对象的open方法实现异步执行,首先是POST方式
    //xmlHttp.open("POST","file2.php",true);    //open第三个参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器还可以在第四第五参数分别填写用户名，密码
    //xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        //如果用POST方式必须写此句
    //xmlHttp.onreadystatechange= doValue;        //监听readyState属性的值改变时调用回调函数，写法固定
    //xmlHttp.send("a1=is&a2=post");        //POST通过此方式往前传值

    xmlHttp.open("GET","file2.php?a1=is&a2=get",true);        //其次是GET方式
    xmlHttp.onreadystatechange= doValue;
    xmlHttp.send(null);        //如果使用GET传递这里参数必须是null或""，如果是别的值，依然按POST方式传递

}

function doValue(){
    if (xmlHttp.readyState == 4) {
        document.getElementById('div').innerHTML = "数据正在加载...";
        if (xmlHttp.status == 200) {
            
            //3.把执行完返回的结果赋给一个变量
            var result = xmlHttp.responseText;    //AJAX返回的只能为纯字符串，一些AJAX框架能返回其他类型的都是经过封装的
            //4.把返回结果写入指定标签之间的html代码部分
            document.getElementById('div').innerHTML=result;
        }
    }

}

/*
readyState属性取值 描述
0  描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 
2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 
3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。 
4  描述一种"已加载"状态；此时，响应已经被完全接收。

status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
值为从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
*/

</script>


<a href="#" onclick="fun('o')">o</a>
<a href="#" onclick="fun('t')">t</a>
<a href="#" onclick="fun('x')">x</a>
<div id="div"></div>

file2.php

<?php
$a1 = "";
$a2 = "";
if($_REQUEST['a1']) $a1 = $_REQUEST['a1'];
if($_REQUEST['a2']) $a2 = $_REQUEST['a2'];

echo $a1.$a2;
//ob_end_clean();//AJAX是在所有输出结束后再总结所有输出内容返回，此方法就是清除之前的所有输出
echo 1234567;
?>