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;
?>