原生 javascript ajax 实例演示

（对低版本的 ie 不作兼容处理了，太过时，不知道谁还用）

 本次演示采用原生javascript + php 实现ajax的  post  和  get 功能;

 对php不了解的同学不用担心，就两三行代码，而且我会详细说明；

 好了，下面开始：

 第一步：如果想要运行起来，那么还是需要开启服务器的，这里推荐使用 wampserver，

               下载相应的版本即可，注意你的电脑是32位的还是64位的，例如我的电脑64位的

               那么我下载64位的即可，百度即可；

                                                    

                安装到d盘吧，安装完成桌面会有这个图标，如果没有，就去找找安装的软件，

                然后添加快捷到桌面即可；

                点击启动wampserver，当相应的图标从红色变到黄色再变到绿色，

                那说明一切ok;当然也有可能出现各种问题，比如显示你的电脑缺少这个东西，

                缺少那个东西，或者根本就不会变绿，而是一直是红色或者黄色，那就悲剧了，

                得慢慢解决了，这里不赘述，

                我就当你可以启动了，因为重点是ajax；

                打开浏览器，输入：localhost 或者127.0.0.1，如果有页面输出，

                那么安装是没问题的

                如果你只想看看如何实现，不想安装测试，那就进行下一步；

第二步： 找到wampserver 安装目录，如果你没安装成功，那就看看如何做吧，

             操作是进行不下去了

             （或者联系我，我帮你解决，给我留言即可）；比如我的：

                       

                 我安装在D盘下，我的软件起名wamp1，你的你默认是wamp，

                 打开这个文件夹，找到www文件夹；

                 在www文件夹下建立本次的项目：datacenter，随便起名字；

第三步：  在datacenter中新建两个文件，一个index.html  , 一个data.php，

               注意文件保存为utf-8编码方式；

                建好之后如何查看页面呢；

                打开浏览器，输入：localhost 或者127.0.0.1，选择你的项目，

                默认打开的是index.html文件；

                

              1.AJAX get    ：（不传递参数）当我点击页面中的按钮时，获取后台数据，

                                         然后显示在标签

中  ；

                 index.html 代码：

     
          
          
     
     
        
nothing
        ajax
        
     

                 data.php代码：

结果演示：点击按钮之前

                                           

点击按钮之后：

                            

              2.AJAX post  ：（不传递参数）当我点击页面中的按钮时，获取后台数据，

                                       然后显示在标签

中  ；

                 和上面的get方式的区别是把参数get 换成post 即可：

                 即把：

request . open ( "GET" , "data.php" , true );

换成

request . open ( "POST" , "data.php" , true );

其它的全部一样；

                 

              3.AJAX  get   ：（传递参数）   当我点击页面中的按钮时，获取后台数据，

                                        然后显示在标签

中  ；

                 传递参数是什么意思呢，就是发送请求的时候，顺便把一个东西传给后台，

                 然后 后台接收数据进行处理；

                 get 如何传递数据，再次修改index.html;

                 即把：   

request . open ( "GET" , "data.php" , true );

换成

request . open ( "GET" , "data.php?id=" + 123 , true );

这里我传递了一个id=123给后台

                 那么data.php也要变化：

                data.php代码:

                    

//通过 $_GET 获取 id;

$ id =$ _GET [ 'id' ];

//向index.html返回数据

//inde.html中 request.responseText==这里的$str;

echo $ id ; //又把id返回给前台，绕了一个圈数据又回去了，

? >

              运行之后，点击按钮：

             

              4.AJAX post  ：（传递参数）    当我点击页面中的按钮时，获取后台数据，

                                        然后显示在标签

中  ；

                 这里的post又是如何传递参数的呢；

                我们再次修改index.html中的ajax部分为：

 

btn . onclick = function (){

//ajax第一步

var request =new XMLHttpRequest ();

//ajax第二步,第一个参数GET,第二个是我们要找谁要数据，

//第三个是异步还是同步，true代表异步，不要同步；

request.open("POST","data.php",true);

//post传递参数加上这么个头部即可

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//第三步，post传递参数放在这里

request.send("id="+123);

//第四部 发送请求出发下面这个函数

request .onreadystatechange = function (){

//readyState 有这几种状态，我们只需要判断4就行;

// 0: 请求未初始化

// 1: 服务器连接已建立

// 2: 请求已接收

// 3: 请求处理中

// 4: 请求已完成，且响应已就绪

if ( request .readyState == 4 ){

//status 状态200 代表 ok

if ( request .status == 200 ){

//request.reponseText代表后台返回的数据

def . innerHTML = request .responseText;

}

}

}

}

                 data.php代码：

                  

//通过 $_POST 获取 id;

$ id =$ _POST [ 'id' ];

//向index.html返回数据

//inde.html中 request.responseText==这里的$str;

echo $ id ; //又把id返回给前台，绕了一个圈数据又回去了，

? >

               

  运行效果和上面都是一样的；

  有问题欢迎留言；