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

本文的例子讲述了在不使用XMLHttpRequest对象的情况下实现Ajax效果的方法。分享给大家参考，如下：

前言：

之前接触Ajax的时候，只是用Jquery的api来达到Ajax效果，并没有仔细研究。最近在学习Ajax的原理，会不定期发表关于Ajax的文章。希望大家关注一下！

Ajax原则：

通过XMLHttpRequest发送HTTP请求，无需刷新页面。

主题：

但是，Ajax可以在不依赖XMLHttpRequest对象的情况下实现。我们可以使用Js请求后台服务器，而无需刷新或跳转页面。我总结了几种方法，会有例子说明如何使用。

方法：

(1)使用204 No Content状态码，当浏览器收到204时，页面不跳转(2)利用图片加载的特性完成请求(3)利用iframe的特性。

1.使用204状态码

原则：

当服务器发送响应状态码204时，意味着没有内容。如果是浏览器，页面不会改变

案例：

在不刷新投票程序的情况下，单击页面上的投票按钮会要求服务器将投票添加到文本文件中，但页面不会改变。

文件结构图：

01-vote.html文件：

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

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title no refresh voting interface/title link rel='样式表' href=''/流头h1不刷新投票界面/h1img src=' http:/lin.jpg'/p a href='。/01-vote . PHP ' rel=' external no follow ' vote/a/p/body/html 01-vote . PHP文件：

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

？Php/** *投票程序* @ authorwebbc */$ number=file _ get _ contents('。/01-vote-RES . txt ')；//读取文件内容$ number//add 1file _ put _ contents('。/01-vote-res.txt '，$ number)；//重写到文件//服务器发送响应头204，前端不会响应，这样前端就可以实现ajax效果头(‘HTTP/1.1 204 No Content’)；渲染：

2.利用图片加载功能完成http请求

原则：

当我们点击链接时，可以使用JS代码动态设置一张图片的src属性为需要请求的链接，这样浏览器就会请求链接，页面不会跳转。

案例：

以上述投票程序为例

文档结构图：

02-vote.html文件：

首先为A标签设置一个点击事件，然后用JS创建一个图片节点，并将其节点的src属性设置为需要请求的链接

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title no refresh voting interface/title link rel='样式表' href=' '/Headscript//voting function vote(){ var img=document . create element(' img ')；//创建img节点img . src=' 02-vote . PHP '；//设置src属性}/scriptbody h1无刷新投票界面/h1img src=' http:/Lin . jpg '/p a href=' JavaScript 3360 void()；'rel=' external no follow ' onclick=' vote()；'投票/a /p/body/html02-vote.php文件：

这个文件和01-vote.php之间的区别在于返回的状态代码不再被设置。

？Php/** *投票程序* @ authorwebbc */$ number=file _ get _ contents('。/02-vote-RES . txt ')；//读取文件$ number//add 1file _ put _ contents('。/02-vote-res.txt '，$ number)；//重写文件？渲染：

与方法1中的渲染一样，这里没有给出它们

3.使用iframe的特性

原则：

iframe元素创建一个包含另一个文档的内联框架。这是什么意思？也就是说，当前浏览器访问的页面将包括。当我们想要请求服务器时，我们可以让这个内部页面请求服务器，而不需要跳转或刷新主界面。

案例：

以用户注册为例

文件结构图：

01-reg.html文件：

主要是一个窗体和一个iframe标记，iframe标记设置为不可见：宽度=' 0 '高度=' 0 '框架边框=' 0 '

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title link rel='样式表' href=' '/headsdyh1没有刷新用户注册界面/h1！-存储注册返回信息-p id=' remars '/p form method=' post ' action=' 01-reg . PHP ' target=' reg ' username:input type=' text ' name=' username '/br/Mailbox:input type=' text ' name=' email '/br/input type=' submit ' value=' register '/form！-不可见的iframe标记-iframe宽度=' 0 '高度=' 0 ' frame border=' 0 ' name=' reg '/iframe/body/html 01-reg . PHP文件：

接受Post数据，判断一个是否为空。如果是，主界面显示“信息不完整”，否则显示“注册成功”。因为是举例，我就简单的把判断写在这里。

？Php/** *注册程序* @ authorwebbc */header(' content-type : text/html；charset=utf-8 ')；//设置编码if(trim($ _ post[' username '])==' ' | | trim($ _ post[' email '])==' '){//如果username或邮箱为空，则echo ' script parent . document . getelementbyid(' remars ')。//在主界面输出‘不完整信息’退出；} echo ' script parent . document . getelementbyid(' retries ')。innerhtml='注册成功'/script '；//在主界面输出‘注册成功’？渲染：

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

我希望这篇文章对ajax编程有所帮助。