首页 > 开发 > AJAX > 正文

不使用XMLHttpRequest对象实现Ajax效果的方法小结

2020-06-04 12:49:47
字体:
来源:转载
供稿:网友

本文实例讲述了不使用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++;//加1file_put_contents('./01-vote-res.txt',$number);//重写到文件中//服务器发送响应头204,前端不会响应,使前端达到ajax效果header('HTTP/1.1 204 No Content');?>

效果图:

这里写图片描述

2、利用图片加载的特性来完成http请求

原理:

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

案例:

还是以上文中提到的投票程序为例

文档结构图:

这里写图片描述

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表