ajax如何使用

　　介绍

这篇文章给大家分享的是有关ajax如何使用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

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

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

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

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

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

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

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

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

index . html 　　& lt; body> 　　action=& lt;形式“index.html"方法=癎ET"比; 　　& lt;标签=皀ame"祝辞姓名& lt;/label> 　　& lt;输入类型=皌ext"id=皀ame"name=皀ame"比; 　　& lt;输入类型=皊ubmit"值=https://www.yisu.com/zixun/碧峤?>

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

输入标签当中的id对应的是标签标签当中为属的性;

输入标签当中的名字属性,一会要对接PHP使用;

处理。php 

 
 3。换成Ajax的写法! 
 
索引。html: html 
 
 
  & lt; h2>请输入姓名:& lt;/h2>
　　& lt;输入类型=皌ext"id=皀ame"比;
　　& lt;按钮>函数提交(){
　　
　　var name=. getelementbyid(& # 39;名字# 39;)value
　　var文本=. getelementbyid(& # 39;文本# 39;)
　　var XHR=new XMLHttpRequest ();
　　XHR.open (“GET"“handle.php ? name=?名字);
　　XHRsend ();
　　onreadystatechange=函数(){
　　text.innerHTML=XHR.responseText
　　}

注意:

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

…… 　　onreadystatechange=函数(){ 　　如果(XHR.readyState==4){警报(XHR.responseText)}; 　　} 　　…

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

ajax的优势

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

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

举个栗子

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

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

ajax的使用

1。创建AJAX

var XHR=new XMLHttpRequest ();

2。向服务器发送请求

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

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

当我们的传输方式为文章的时候,就会用上发送(),如果是得到方式,推荐在发送里面写上参数空

ajax如何使用