不利用XMLHttpRequest工具实现Ajax结果的要领小结

我以前打仗Ajax的时候,只是用Jquery的api来实现Ajax结果,对其并没有细细研究,最近在进修Ajax的道理,会不按时的宣布关于Ajax的文章,但愿各人存眷!

Ajax道理:

在页面不刷新的环境下,操作XMLHttpRequest发送HTTP请求。

主题:

可是不依靠XMLHttpRequest工具,也是可以实现Ajax结果的,我们可以用Js实现对靠山处事器的请求,同时不带来页面的刷新或跳转。我总结了几种要领,会有实例来说明如何利用的。

要领:

(1)操作204 No Content状态码,当欣赏器收到204时,页面不作跳转
(2)操作图片加载的特性来完成请求
(3)操作iframe的特性

1、操作204状态码

道理:

当处事器发送响应状态码204时,暗示没有内容,假如是欣赏器的话,页面不会产生改变

案例:

无刷新投票措施,在一个页面点击投票按钮,会请求处事器向一个文本文件中新增一票,可是页面不产生改变。

文件布局图:

01-vote.html文件:

主要就是一个表单,一个按钮,按钮的链接为要请求的链接

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>无刷新投票界面</title> <link href=""> </head> <body> <h1>无刷新投票界面</h1> <img src="https://www.jb51.net/article/lin.jpg"/> <p> <a href="https://www.jb51.net/article/01-vote.php" >投票</a> </p> </body> </html>

01-vote.php文件:

模仿投票结果,读取文本文件中的内容,给文本文件中的数字加1,然后从头写回文件

<?php /** * 投票措施 * @author webbc */ $number = file_get_contents('./01-vote-res.txt');//读取文件内容 $number++;//加1 file_put_contents('./01-vote-res.txt',$number);//重写到文件中 //处事器发送响应头204,前端不会响应,使前端到达ajax结果 header('HTTP/1.1 204 No Content'); ?>

结果图:

这里写图片描写

2、操作图片加载的特性来完成http请求

道理:

当我们点击链接时,可以操作JS代码来动态配置某张图片的src属性为要请求的链接,这样欣赏器就会去请求该链接,而页面也不会跳转。

案例:

照旧以上文中提到的投票措施为例

文档布局图:

02-vote.html文件:

首先给a标签配置一个单击事件,然后操作JS建设一个图片节点,配置其节点的src属性为要请求的链接

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>无刷新投票界面</title> <link href=""> </head> <script> //投票函数 function vote(){ var img = document.createElement('img');//建设img节点 img.src = '02-vote.php';//配置src属性 } </script> <body> <h1>无刷新投票界面</h1> <img src="https://www.jb51.net/article/lin.jpg"/> <p> <a href="javascript:void();">投票</a> </p> </body> </html>

02-vote.php文件:

这个文件和01-vote.php的区别就是不再配置返回的状态码。

<?php /** * 投票措施 * @author webbc */ $number = file_get_contents('./02-vote-res.txt');//读取文件 $number++;//加1 file_put_contents('./02-vote-res.txt',$number);//从头写回文件 ?>

结果图:

和1要领中的结果图一样,此处不再给出

3、操作iframe的特性

道理:

iframe元素会建设包括别的一个文档的内联框架,什么意思?就是当前欣赏器会见的页面中会包括里一个页面。当我们要请求处事器的时候,可以让这个内部页面去请求处事器,而主界面不会产生跳转和刷新现象。

案例:

以用户注册为例

文件布局图:

01-reg.html文件:

主要是一个表单和一个iframe标签,而且配置了iframe标签为不行见:width="0" frameborder="0"

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>无刷新注册界面</title> <link href=""> </head> <body> <h1>无刷新用户注册界面</h1> <!--存放注册返复书息--> <p></p> <form method="post" action="01-reg.php" target="reg"> 用户名:<input type="text" /><br/> 邮箱:<input type="text" /><br/> <input type="submit" value="注册" /> </form> <!--不行见的iframe标签--> <iframe frameborder="0"></iframe> </body> </html>

01-reg.php文件:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsdfwy.html