189 8069 5689

不使用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时,表示没有内容,如果是浏览器的话,页面不会发生改变

案例:

无刷新投票程序,在一个页面点击投票按钮,会请求服务器向一个文本文件中新增一票,但是页面不发生改变。

文件结构图:

不使用XMLHttpRequest对象如何实现Ajax效果

01-vote.html文件:

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




  
  
  无刷新投票界面
  


  

无刷新投票界面

     

    投票   

01-vote.php文件:

模拟投票效果,读取文本文件中的内容,给文本文件中的数字加1,然后重新写回文件

效果图:

不使用XMLHttpRequest对象如何实现Ajax效果

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

原理:

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

案例:

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

文档结构图:

不使用XMLHttpRequest对象如何实现Ajax效果

02-vote.html文件:

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




  
  
  无刷新投票界面
  



  

无刷新投票界面

     

    投票   

02-vote.php文件:

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

效果图:

和1方法中的效果图一样,此处不再给出

3、利用iframe的特性

原理:

iframe元素会创建包含另外一个文档的内联框架,什么意思?就是当前浏览器访问的页面中会包含里一个页面。当我们要请求服务器的时候,可以让这个内部页面去请求服务器,而主界面不会发生跳转和刷新现象。

案例:

以用户注册为例

文件结构图:

不使用XMLHttpRequest对象如何实现Ajax效果

01-reg.html文件:

主要是一个表单和一个iframe标签,并且设置了iframe标签为不可见:width="0" height="0" frameborder="0"




  
  
  无刷新注册界面
  


  

无刷新用户注册界面

     

       用户名:
    邮箱:
             

01-reg.php文件:

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

parent.document.getElementById("regres").innerHTML="信息不完整"';//在主界面输出"信息不完整"
  exit;
}
echo '';//在主界面输出"注册成功"
?>

效果图:

不使用XMLHttpRequest对象如何实现Ajax效果

以上是“不使用XMLHttpRequest对象如何实现Ajax效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站栏目:不使用XMLHttpRequest对象如何实现Ajax效果
网页链接:http://cdxtjz.com/article/pjhscc.html

其他资讯