ajax 执行get方法,JS最简单的AJAX实例,GET和POST方法

申明：一定要打开服务器再在服务器域名下输入以下文件的地址,否则不能完成AJAX的传输

以下列举出的所有文件均放在同一级目录下(同一个文件夹下),否则自行修改路径。

Get方法：

1.

有两种组合：一种是文件1+文件2；另一种是附件1+文件2。内容其实都一样，一种是按照W3school.com.cn的写法，另一种是在某本书中看到的(大同小异)。只是稍微的进行了些封装。

文件1：jsAjaxGetW3.html (w3school的写法)

// 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之后加传值是先用?分隔再添加数据

}

}

onchange = "chg();">

="">请选择

"welcome">欢迎

"hello">你好

"ok">好的

value = "name" />

文件2：get.php

$data = $_GET['data'];

//输出

echo $data;

?>

附加文件：写法不同的Get传值

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

}

}

onchange = "chg();">

="">请选择

"welcome">欢迎

"hello">你好

"ok">好的

value = "name" />

Post 方法：文件1+文件2

文件1： jsAjaxPost.html