JS 最简单的AJAX实例, GET 和 POST 方法

申明：一定要打开服务器再在服务器域名下输入以下文件的地址,否则不能完成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>

JS 最简单的AJAX实例, GET 和 POST 方法

猜你喜欢