这篇文章主要介绍了不使用XMLHttpRequest对象实现Ajax效果的方法,结合具体实例形式分析了三种不使用XMLHttpRequest对象实现Ajax功能的相关实现与操作注意事项,需要的朋友可以参考下

本文实例讲述了不使用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 rel="stylesheet" href="">
</head>
<body>
  <h1>无刷新投票界面</h1>
  <img src="./lin.jpg"/>
  <p>
    <a href="./01-vote.php" rel="external nofollow" >投票</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 rel="stylesheet" href="">
</head>
<script>
  //投票函数
  function vote(){
    var img = document.createElement('img');//创建img节点
    img.src = '02-vote.php';//设置src属性
  }
</script>
<body>
  <h1>无刷新投票界面</h1>
  <img src="./lin.jpg"/>
  <p>
    <a href="javascript:void();" rel="external nofollow" onclick="vote();">投票</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" height="0" frameborder="0"

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

01-reg.php文件:

接受Post数据,判断是否有一个为空,如果有则在主界面显示“信息不完整‘',否则显示“注册成功”,由于是例子的原因,我这里就简单的进行了写判断。

<?php
/**
 * 注册程序
 * @author webbc
 */
header('Content-type:text/html;charset=utf-8');//设置编码
if(trim($_POST['username']) === '' || trim($_POST['email']) === ''){//如果用户名或邮箱都为空
  echo '<script>parent.document.getElementById("regres").innerHTML="信息不完整"</script>';//在主界面输出"信息不完整"
  exit;
}
echo '<script>parent.document.getElementById("regres").innerHTML="注册成功"</script>';//在主界面输出"注册成功"
?>

效果图:

更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作总结》、《PHP+ajax与应用小结》及《asp.net ajax总结专题》

希望本文所述对大家ajax程序设计有所帮助。

最新资讯
神州车闪贷如此处理还款逾期:不告知把车直接开走

神州车闪贷如此处理还

随着不少融资租赁公司进入车贷市场,一些“抵押贷款”摇
iPhone 11不被看好 中国销量却暴涨:只因价格便宜

iPhone 11不被看好 中

iPhone 11系列在上市后却再度受到热捧,特别是中国市场
P2P路在何方?湖南出手后 山东也将取缔不合规网贷

P2P路在何方?湖南出手

继湖南省之后,10月18日,山东省地方金融监督管理局在其官
雷军在乌镇测5G网速:下载速度达425Mbps 5G全覆盖

雷军在乌镇测5G网速:下

雷军发布微博称:“到了乌镇,听说这里5G全部覆盖,马上掏出
三星S10和Note 10现指纹识别漏洞 最早下周推送补丁

三星S10和Note 10现指

据CNBC报道,三星就Galaxy S10和Galaxy Note 10系列手机
王思聪股权遭冻结 真要回万达上班了?

王思聪股权遭冻结 真

如今投资事业不顺,难道王思聪真的要回家继承千亿资产了
最新文章
Ajax原理与应用案例快速入门教程

Ajax原理与应用案例快

这篇文章主要介绍了Ajax原理与应用案例,结合实例形式
Ajax提交post请求案例分析

Ajax提交post请求案例

这篇文章主要介绍了Ajax提交post请求,结合具体案例形
Ajax返回值类型与用法实例分析

Ajax返回值类型与用法

这篇文章主要介绍了Ajax返回值类型与用法,结合实例形
不使用XMLHttpRequest对象实现Ajax效果的方法小结

不使用XMLHttpRequest

这篇文章主要介绍了不使用XMLHttpRequest对象实现Ajax
关于Ajax跨域问题及解决方案详析

关于Ajax跨域问题及解

这篇文章主要给大家介绍了Ajax跨域问题以及解决方案的
Ajax请求跨域问题解决方案分析

Ajax请求跨域问题解决

这篇文章主要介绍了Ajax请求跨域问题解决方案,结合具