当前位置:Gxlcms > JavaScript > ajax入门教程之30分钟实例演示

ajax入门教程之30分钟实例演示

时间:2021-07-01 10:21:17 帮助过:10人阅读

在所有的教程中,不管是网上的资料还是书籍上。都说,想要学会ajax,需要提前学会html+css+javascript就行了,然后很多前端初学者们就开始学,结果发现照着例子写了半天愣是没啥反应,最终果断放弃~【推荐教程:AJAX视频教程

其实……你们没有搭建后台环境啊,亲~

1.先搭建一个后台环境吧?比如php

对于我们~前端的初学者来说,哪有这么多精力时间去精学PHP啊,对吧?所以呢,推荐一个php环境搭建:phpstudy,只要下一步下一步的安装就OK了。

我将PHPStudy安装到了D盘,所以进入D盘找到phpstudy文件夹里面的WWW文件夹

WWW文件夹就相当于我们电脑上的服务器了,以后写的所有东西,全部放到WWW文件夹中。

在我们的WWW文件夹下面创建两个文件,index.html和handle.php

让我们测试一下,在刚才新建的index.html中随便写点代码。打开浏览器,输入localhost敲击回车,如果能打开刚才写的网页,那么就说明我们搭建成功

如果失败,可能是端口冲突,也有可能是phpstudy木有运行~自己查一查调试一下

2.让我们用PHP写一个简单的后台应用吧~

index.html
<body>
<form action="index.html" method="GET">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form> 
</body>

不知道你们表单学的咋样,所以唠叨两句:GET代表我们要使用的传输方式,对应的还有POST;

input标签当中的id对应的是label标签当中的for属性;

input标签当中的name属性,一会要对接PHP使用;

handle.php

<meta charset="utf-8">
<!--其实我的这个写法有点取巧了,先凑合着看-->
<?php 
$student=array(
    array("name"=>"张三","sex"=>"男","age"=>"20"),
    array("name"=>"李丽","sex"=>"女","age"=>"19"),
    array("name"=>"王二","sex"=>"男","age"=>"21")
    );
$str="没有找到这个学生";
$name=$_GET["name"];
foreach ($student as $value) {
    if($value["name"]==$name){
        $str=$value["name"].",".$value["index"].",".$value["sex"].",".$value["age"];
        break;
    };
};
echo $str;
 ?>

3.换成Ajax的写法!

index.html

html:

<h1>请输入姓名:</h1>
<input type="text" id="name">
<button onclick="submit()">提交</button>
<div id="text"></div>

javascript:

function submit(){
        
        var name=document.getElementById('name').value
               var text=document.getElementById('text')
        var XHR=new XMLHttpRequest();
               XHR.open("GET","handle.php?name="+name);
               XHRsend();
               XHR.onreadystatechange=function(){
            text.innerHTML=XHR.responseText
        }

注意:

如果有人把源代码中的 text.innerHTML=XHR.responseText 改成了 alert(XHR.responseTXT),你将会发现,命令将会被执行多次。这个时候,就要稍微的改一下代码了:(原因,在文章后面你会找到)

   ......
    XHR.onreadystatechange=function(){
             if(XHR.readyState==4){alert(XHR.responseText)};
                                     }
   ......

4.例子已经成功了,那我们就正式进入学习吧~

ajax的优势

在我们的第一个例子当中,是通过submit按钮提交到php后台,然后再进行数据的处理操作。

这种操作呢,有一个弊端,就是需要把一整页的数据同时提交到后台。

举个栗子

如果我们在一个网站进行注册,填写完了昵称,密码,性别,年龄等信息,提交过去之后,后台告诉你昵称已被使用,OK我们将昵称,密码,性别,年龄等,通通重写,等再次提交过去,又告诉你昵称依然已被使用。这时候你起了一个非常非常LOW的名字,心想,这回不会再出问题了吧?结果提交过去之后,后台告诉你,你的密码过短需再次重新填写信息。恩~放弃了吧!

如果使用ajax技术呢?我们可以将数据逐条的提交到后台,也可以随时随地的提交。比如说,你填写完昵称,后台立马告诉你昵称被用,OK,改了就是喽~。

AJAX的使用

1.创建AJAX

  var XHR=new XMLHttpRequest();

2.向服务器发送请求

XHR.open("GET","handle.php",true);
XHR.send();

open里面有三个参数,分别为数据传输方式,传输文件,是否异步

当我们的传输方式为POST的时候,就会用上send(),如果是GET方式,推荐在send里面写上参数null

3.GET vs POST

一句话:get更快,post更强

4.服务器响应 —— 你把值传过去了,咋也得传回来点什么吧?

微信截图_20190125131205.png

XHR.responseText;
XHR.responseXML;

5.响应事件——什么时候才能返回数据嘞?

onreadystatechange 事件
两个属性:
readyState
status
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
XHR.onreadystatechange=function(){
                console.log(XHR.readyState)
                console.log(XHR.responseText)

微信截图_20190125131332.png

以上就是ajax入门教程之30分钟实例演示的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行