Ajax基础：get和post请求方式的实现

柔情只为你懂 2022-11-30 01:34 239阅读 0赞

## Ajax简介 ##

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

## 实现步骤 ##

**1.创建ajax对象**

xhr = new XMLHttpRequest();//标准

**2.准备发送**

//open()的三个参数,（1）请求方式（get或post），（2）请求地址，（3）同步或者异步标志位，默认是true表示异步，false表示同步
    xhr.open('get','url',true);

**3.执行发送动作**

xhr.send(null);//get请求这里需要添加null参数，post请求为所传参数

**4.指定回调函数：就是接收服务器响应的数据函数**

xhr.onreadystatechange = function(){ 
     //onreadystatechange：为状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
         if(xhr.readyState == 4){ 
         //readyState：为请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
             if(xhr.status == 200){ 
             //服务器的HTTP状态码，如：404 = "文件末找到" 、200 ="成功" ，等等
                 alert(xhr.responseText);
             }
         }
     }

## Ajax之get和post两种请求方式的实现 ##

因为html页面要向后端请求数据，所以需要在后端搭建环境，来响应前端的请求，我在后端使用的编程语言是php，代码如下所示。  
**后端服务器01ajax.php文件代码为**

<?php
    //判断请求方式
    if(!empty($_POST)){ 
    $uname=$_POST[username];//获取页面传过来的值
    }
    else{ 
    	$uname=$_GET[username];
    }
    //打印输出
    echo $uname."你好！";
    ?>

注意：php返回给前端网页数据只能用echo打印的方式，前端html页面才能获取，用return返回前端接收不到数据。  
**get请求方式的实现**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ajax的get请求方式的实现</title>
        <script type="text/javascript">
        window.onload = function(){ 
            var btn = document.getElementById('btn');
            btn.onclick = function(){ 
            //获取用户名
                var username = document.getElementById('username').value;
                // 1、创建XMLHttpRequest对象
                   var xhr = new XMLHttpRequest();
                // 2、准备发送
                //如果是get请求那么请求参数必须在url中传递，encodeURI()用来对中文参数进行编码，防止乱码。
                var param = 'username='+username+"&type=get";
                xhr.open('get','01ajax.php?'+encodeURI(param),true);
                // 3、执行发送动作
                xhr.send(null);//get请求这里需要添加null参数
                // 4、指定回调函数
                xhr.onreadystatechange = function(){ 
                //xhr.readyState == 4为请求完成
                    if(xhr.readyState == 4){ 
                    //xhr.status == 200服务器响应成功
                        if(xhr.status == 200){ 
                        //接收服务器响应信息
                        var data=xhr.responseText;
                        //弹出打印信息
                            alert(data);
                        }
                    }
                }
                
            }
        }
        </script>
    </head>
    <body>
        <form>
            用户名：
            <input type="text" name="username" id="username">
            <input type="button" value="提交" id="btn">
        </form>
    </body>
    </html>

**实现效果为：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center]

**post请求方式的实现**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Ajax的post请求方式的实现</title>
        <script type="text/javascript">
        window.onload = function(){ 
            var btn = document.getElementById('btn');
            btn.onclick = function(){ 
                var uname = document.getElementById('username').value;
                // 1、创建XMLHttpRequest对象
                    var xhr = new XMLHttpRequest();//标准
                // 2、准备发送
                //post请求参数通过send传递，不需要通过encodeURI()转码,必须设置请求头信息。
                var param = 'username='+uname+"&type=post";
                xhr.open('post','01ajax.php',true);
                //设置头信息
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                // 3、执行发送动作
                xhr.send(param);//post请求参数在这里传递，并且不需要转码
                // 4、指定回调函数
                xhr.onreadystatechange = function(){ 
                    if(xhr.readyState == 4){ 
                        if(xhr.status == 200){ 
                            alert(xhr.responseText);
                        }
                    }
                }
                
            }
        }
        </script>
    </head>
    
    <body>
        <form>
            用户名：
            <input type="text" name="username" id="username">
            <input type="button" value="提交" id="btn">
        </form>
    </body>
    
    </html>

**实现效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 1]

## Ajax使用json（数据交换格式）实现多数据的获取 ##

**JSON是什么**  
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。

任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。它的格式为：

var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串

**JSON 和 JS 对象互转**  
要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({ a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

## JSON运用实例：查询学生信息 ##

**PHP代码**

<?php 
        if(!empty($_POST)){ 
        $ID=$_POST[ID];
        }
        else{ 
        	$ID=$_GET[ID];
        }
        $stu = array();
        $stu['001'] = array('ID'=>'001','name'=>'吴天','class'=>'1班','score'=>'90'); 
        $stu['002'] = array('ID'=>'002','name'=>'响妮','class'=>'3班','score'=>'60'); 
        $stu['003'] = array('ID'=>'003','name'=>'艾霓','class'=>'2班','score'=>'70'); 
        $stu['004'] = array('ID'=>'004','name'=>'李勇','class'=>'4班','score'=>'50');  
        // 这里的array_key_exists用来判断数组中没有对应键
        if(array_key_exists($ID,$stu) == 1){ 
            $flag= $stu[$ID];//这里根据参数获取传过来对应ID的信息
            echo json_encode($flag);//将数组转成JSON格式，并输出
        }else{ 
            echo '{"flag":0}';
        }
     ?>

**JavaScript交互数据显示到页面代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>AjaxJSON数据应用</title>
        <script type="text/javascript">
        window.onload = function(){ 
            var btn = document.getElementById('btn');
            btn.onclick = function(){ 
                var ID = document.getElementById('ID').value;
                // 1、创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();//标准
                // 2、准备发送
                //如果是get请求那么请求参数必须在url中传递
                //encodeURI()用来对中文参数进行编码，防止乱码
                var param = 'ID='+ID;
                xhr.open('get','student.php?'+encodeURI(param),true);
                // 3、执行发送动作
                xhr.send(null);//get请求这里需要添加null参数
                // 4、指定回调函数
                xhr.onreadystatechange = function(){ 
                    if(xhr.readyState == 4){ 
                        if(xhr.status == 200){ 
                        //通过JSON.parse()方法，将传过来的json格式数据转化为JS对象，
    						var data=JSON.parse(xhr.responseText);
    						var info=document.getElementById("info");
    						var tag='';
    						if(data.flag==0){ 
    							tag="<li>抱歉，未查到学号为："+ID+"相关信息"+"</li>"
    						}
    						else{ 
    							 tag="<li>"+data.ID+":学号的信息如下:"
    							 +"</li><li>姓名："+data.name+
    							 "</li><li>班级："+data.class+
    							 "</li><li>平均成绩："+data.score+
    							 "</li>";
    						}
    					   info.innerHTML=tag;
                        }
                    }
                }
                
            }
        }
        </script>
    </head>
    <body>
        <form>
            请输入查询学生的ID：
            <input type="text" name="ID" id="ID">
            <input type="button" value="提交" id="btn">
    		<ul id="info">
    			
    		</ul>
        </form>
    </body>
    </html>

**实现效果**  
输入正确的学号  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 2]  
输入不存在的学号：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/573c93b53ee74cd3bb693fd38fc5180e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/62e82dedbed7496d999feff41e66c312.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/f3e6e5af4a6a45a584f65da892bd5f0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/53db8a4572654a5085d554b0ff3486ff.png