申明:一定要打开服务器再在服务器域名下输入以下文件的地址,否则不能完成AJAX的传输
以下列举出的所有文件均放在同一级目录下(同一个文件夹下),否则自行修改路径。
Get方法:
1. 有两种组合:一种是文件1+文件2;另一种是附件1+文件2。内容其实都一样,一种是按照W3school.com.cn的写法,另一种是在某本书中看到的(大同小异)。只是稍微的进行了些封装。
文件1:jsAjaxGetW3.html (w3school的写法)
<html>
<head>
<title></title>
<script type = "text/javascript">
// AJAX方法, 被自定义封装在该函数中
function ajaxFunction( url )
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest(); // 实例化对象
}
catch( e )
{
// Internet Explorer
try
{
xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP" );
}
catch ( e )
{
try
{
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
catch( e )
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange = function()
{
if( xmlHttp.readyState == 4 && xmlHttp.status == 200 )
{
document.getElementByIdx_x_x_x( 'sub' ).value = xmlHttp.responseText;
}
}
xmlHttp.open( "GET", url, true );
xmlHttp.send( null );
}
function chg()
{
var value = document.getElementByIdx_x_x_x( 'sel' ).value;
if( '' != value )
{
//alert( value );
ajaxFunction( './get.php?data='+value ); // 注意在后缀.php之后加传值是先用?分隔再添加数据
}
}
</script>
</head>
<body>
<select id = "sel" name = "sel" onchange = "chg();">
<option value ="">请选择</option>
<option value = "welcome">欢迎</option>
<option value = "hello">你好</option>
<option value = "ok">好的</option>
</select>
<input type = "text" id = "sub" value = "name" />
</body>
</html>
文件2:get.php
<?php
$data = $_GET['data'];
//输出
echo $data;
?>
附加文件:写法不同的Get传值
<html>
<head>
<title></title>
<script type = "text/javascript">
var httpRequest = false;
function createRequest( url )
{
httpRequest = false;
if( window.XMLHttpRequest )
{
httpRequest = new XMLHttpRequest();
if( httpRequest.overrideMimeType )
{
httpRequest.overrideMimeType( "text/xml" );
}
}
else if( window.ActiveXObject )
{
try
{
httpRequest = new ActiveXObject( "Msxml2.XMLHTTP" );
}
catch( e )
{
try
{
httpRequest = new ActiveXObject( "Microsoft.XMLHTTP" );
}
catch( e )
{
}
}
}
if( !httpRequest )
{
alert( 'Can\'t create XMLHTTP instance' );
return false;
}
httpRequest.onreadystatechange = alertContents; // 立即执行数据回收
httpRequest.open( "GET", url, true );
httpRequest.send();
}
function alertContents()
{
if( httpRequest.readyState == 4 )
{
if( httpRequest.status == 200 )
{
//alert( httpRequest.responseText );
document.getElementByIdx_x_x_x( 'sub' ).value = httpRequest.responseText;
}
else
{
alert( 'Page error' );
}
}
}
function chg()
{
var value = document.getElementByIdx_x_x_x( 'sel' ).value;
if( '' != value )
{
//alert( value );
createRequest( './get.php?data='+value );
}
}
</script>
</head>
<body>
<select id = "sel" name = "sel" onchange = "chg();">
<option value ="">请选择</option>
<option value = "welcome">欢迎</option>
<option value = "hello">你好</option>