Ajax基础:get和post请求方式的实现 柔情只为你懂 2022-11-30 01:34 167阅读 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
还没有评论,来说两句吧...