原生 javascript ajax 实例演示

最新推荐文章于 2023-08-10 15:04:46 发布

cvper

最新推荐文章于 2023-08-10 15:04:46 发布

阅读量3.3k

点赞数 2

分类专栏： JavaScript 文章标签： javascript ajax 实例 post get

本文链接：https://blog.csdn.net/cvper/article/details/79160266

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

（对低版本的 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 ：（不传递参数）当我点击页面中的按钮时，获取后台数据，

然后显示在标签 <p>中；

index.html 代码：

<!doctype html>
<html>
     <head>
          <meta charset="utf-8">
          <title>ajax POST GET </title>
     </head>
     <body>
        <p id="def">nothing</p>
        <button id="abc">ajax</button>
        <script>
               //取得 id=abc 的按钮;
               var btn=document.getElementById("abc");

               //取得 id=def 的段落标签<p>;
               var def=document.getElementById("def");

               //点击按钮时执行函数
               btn.οnclick=function(){

                  //ajax第一步
                  var request=new XMLHttpRequest();

                  //ajax第二步,第一个参数GET,第二个是我们要找谁要数据，
                  //第三个是异步还是同步，true代表异步，不要同步；
                  request.open("GET","data.php",true);

                  //第三步，send()里面空着
                  request.send();

                  //第四部 发送请求出发下面这个函数
                  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;
                          }
                      }
                  }
               }	  
        </script>
     </body>
</html>

data.php代码：

<?php
   //我们假装已经从数据库取得了字符串"坚持学习..."
   //用变量$str 表示字符串
   //php中变量前面加个$;
   $str="坚持学习就会成功！";

   //向index.html返回数据
   //inde.html中 request.responseText==这里的$str;
   echo $str;
?>

结果演示：点击按钮之前

点击按钮之后：

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

然后显示在标签 <p>中；

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

即把：

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

 
 换成 

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

   其它的全部一样； 
 

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

然后显示在标签 <p>中；

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

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

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

即把：

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

 
 换成 

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

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

那么data.php也要变化：

data.php代码:

 
  <?php 
 
  //通过 $_GET 获取 id; 
 
  $ 
  id 
  =$ 
  _GET 
  [ 
  'id' 
  ]; 
 
  //向index.html返回数据 
 
  //inde.html中 request.responseText==这里的$str; 
 
  echo 
   
  $ 
  id 
  ; 
  //又把id返回给前台，绕了一个圈数据又回去了， 
 
  ? 
  >

运行之后，点击按钮：

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

然后显示在标签 <p>中；

这里的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代码：

 
  <?php 
 
  //通过 $_POST 获取 id; 
 
  $ 
  id 
  =$ 
  _POST 
  [ 
  'id' 
  ]; 
 
  //向index.html返回数据 
 
  //inde.html中 request.responseText==这里的$str; 
 
  echo 
   
  $ 
  id 
  ; 
  //又把id返回给前台，绕了一个圈数据又回去了， 
 
  ? 
  >

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

有问题欢迎留言；

cvper

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
原生 javascript ajax 实例演示

（对低版本的 ie 不作兼容处理了，太过时，不知道谁还用）本次演示采用原生javascript + php 实现ajax的 post 和 get 功能; 对php不了解的同学不用担心，就两三行代码，而且我会详细说明；好了，下面开始：第一步：如果想要运行起来，那么还是需要开启服务器的，这里推荐使用 wampserver，下载相应的
复制链接

扫一扫

专栏目录