ajax的开发与应用

来源：互联网发布：东兴证券软件下载编辑：程序博客网时间：2024/05/11 15:16

以下是一个Ajax例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Demo</title>
<script type="text/javascript" language="JavaScript">
function ajax(){
if( window.XMLHttpRequest ){
this.request = new XMLHttpRequest(); //
}else{
this.request = new ActiveXObject("Microsoft.XMLHTTP");
}
this.request.open( 'POST','ajax.php',true );
// this.request.open( 'GET','ajax.php?r='+document.getElementById('r').value+'&&r2='+document.getElementById('r2').value,true );
this.request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
this.request.send('r='+document.getElementById('r').value+'&&r2='+document.getElementById('r2').value);

var obj = this.request;

this.request.onreadystatechange = function(){

if( obj.readyState >= 4 ){
if( obj.status == 200 ){
document.getElementById('div').innerHTML = obj.responseText;
}

}
}

}
</script>
</head>
<body>
<div id="div" style="border:1px solid red; width:100%; height:300px;">这里要显示什么内容呢？</div>
姓名：<input type="text" name="r" id="r" /><br/>
地址：<input type="text" name="r2" id="r2" />
<input type="button" value="提交" onClick="ajax()" />
</body>
</html>

ajax.php

<?php
header("Content-type: text/html; charset=utf-8");
//print_r($_POST);
echo '姓名：'.$_POST['r'].'<br/>';
echo '年龄：'.$_POST['r2'].'<br/>';
echo '时间：'.date("Y-m-d H:i:s", time() );

0 0