系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站！

组装电脑|监控安装|打印机 |投影机 |数据库 |CMS教程 |服务器设置 |网页制作 |网络编程 | 脚本专栏 |重装教程 | 如何安装系统？ |
网站导航

系统下载

Win10系统 Win8系统 Win7系统 WinXP系统 路由器

软件下载

电脑软件 安卓软件 安卓应用 安卓游戏

文章资讯

IT资讯 系统教程 软件教程 U盘教程 系统帮助

系统相关

系统主题 Win10激活工具 Win8激活工具 Win7激活工具

专题合集

软件合集 教程专题 安卓推荐
电脑配置
配置清单 品牌机 组装机 一体机 笔记本
软件
  • 软件
  • 文章
  • 安卓
搜 索

热搜：番茄花园 电脑公司 萝卜家园 深度技术 雨林木风

首页 XP系统 Win7系统 Win10系统 win11系统 在线装机 U盘启动 系统教程 IT资讯
Win8系统 Linux系统 Server系统 U PE教程 重装大师 装机精灵 网络知识 bios设置 电脑配置
当前位置：首页 > 网络编程 > AJAX相关 > 详细页面

Ajax原理与应用案例快速入门教程

时间：2020-02-03来源：电脑系统城作者：电脑系统城

本文实例讲述了Ajax原理与应用。分享给大家供大家参考，具体如下：

Ajax原理：页面不刷新的情况下，利用XMLHttpRequest对象发送HTTP请求，然后根据返回的内容进行相应的业务逻辑

使用Ajax的步骤：

（1）创建XMLHttpRequest对象
（2）发送http请求
（3）根据服务器返回的内容进行相应的操作

一步一步来说哈！

1、创建XMLHttpRequest对象

先看看w3c给出的信息

这里写图片描述 

也就是说，如果要使用XMLHttpRequest对象还必须考虑浏览器的兼容型，因此可以封装一个方法来创建XMLHttpRequest对象。


 
  1. //创建XMLHttpRequest对象
  2. function createXhr(){
  3. var xhr = null;
  4. if(window.XMLHttpRequest){
  5. xhr = new XMLHttpRequest();//谷歌、火狐等浏览器
  6. }else if(window.ActiveXObject){
  7. xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie低版本
  8. }
  9. return xhr;
  10. }
  11.  

2、发送Http请求

Http简述：

学过http请求的同学应该都知道，一个简单的请求应该包含这几部分内容，分别请求方法、主机、路径、协议版本等。

Telnet发送http请求截图：

这里写图片描述

Ajax中的Http请求：

在这里只用给出请求方法、路径。但是还有一个是请求方式，分为同步和异步，先不说同步和异步的差别，true表示异步，false表示同步。


 
  1. xhr.open('GET','./05-ajax-vote.php',true);//确定请求的路径
  2. xhr.send(null);//发送请求，携带数据为空
  3.  

案例：

Ajax异步投票程序

文件结构图：

这里写图片描述

05-ajax-vote.html文件：

点击投票按钮，调用vote函数，然后穿件xhr对象，发送http请求，此处使用的是异步，并且实现了状态回调函数，然后在里面判断投票是否成功。


 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>无刷新投票界面</title>
  7. <link rel="stylesheet" href="">
  8. </head>
  9. <script>
  10. //创建XMLHttpRequest对象
  11. function createXhr(){
  12. var xhr = null;
  13. if(window.XMLHttpRequest){
  14. xhr = new XMLHttpRequest();//谷歌、火狐等浏览器
  15. }else if(window.ActiveXObject){
  16. xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie低版本
  17. }
  18. return xhr;
  19. }
  20. //ajax投票
  21. function vote(){
  22. //1、创建xhr对象
  23. var xhr = createXhr();
  24. //2、确定请求方法、路径、请求方式为异步
  25. xhr.open('GET','./05-ajax-vote.php',true);
  26. //3、发送请求
  27. xhr.send(null);
  28. //4、异步方式设置回调
  29. xhr.onreadystatechange = function(){
  30. //如果准备状态为4，表示执行结束
  31. if(this.readyState == 4){
  32. //根据服务端返回的标识来提示用户投票是否成功
  33. if(xhr.responseText == '1'){
  34. alert('投票成功');
  35. }else{
  36. alert('投票失败');
  37. }
  38. }
  39. }
  40. }
  41. </script>
  42. <body>
  43. <h1>无刷新投票界面</h1>
  44. <img src="./lin.jpg"/>
  45. <p>
  46. <a href="javascript:void(0);" rel="external nofollow" onclick="vote();">投票</a>
  47. </p>
  48. </body>
  49. </html>
  50.  

05-ajax-vote.php文件：

以随机数的形式来模拟投票是否成功，如果成功则往05-ajax-vote-res.txt文件中增1，并返回表示1，失败则返回表示0。


 
  1. <?php
  2. /**
  3. * ajax投票程序
  4. * @author webbc
  5. */
  6. if(rand(0,10) > 4){
  7. echo '0';//返回“投票失败”标识
  8. }else{
  9. $number = file_get_contents('./05-ajax-vote-res.txt');
  10. $number++;
  11. file_put_contents('./05-ajax-vote-res.txt',$number);
  12. echo '1';//返回“投票成功”标识
  13. }
  14. ?>
  15.  

效果图：

这里写图片描述

同步和异步的区别：

同步：当xhr对象发送请求后，此时本页面脚本执行被中断，会等待该请求（05-ajax-vote.php）执行结束，才会回到断点继续执行发送请求后的操作。

异步：当xhr对象发送请求后，不需要等待发出的请求（05-ajax-vote.php）被执行结束，而是接着从发送请求的语句的后续继续执行

注意：如果采用异步方式请求某地址，如果要使用该地址返回的内容，则必须要设置状态回调函数，在回调函数中操作从服务器返回的内容，该回调函数会在该请求完成后被执行。

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

分享到：

相关信息

jSon和Ajax登录功能，ajax数据交互案例
Ajax返回值类型与用法实例分析
不使用XMLHttpRequest对象实现Ajax效果的方法小结
  • Ajax提交post请求案例分析
    Ajax提交post请求案例分析

    这篇文章主要介绍了Ajax提交post请求,结合具体案例形式分析了ajax提交post请求相关原理、用法及操作注意事项...

    2020-02-03

  • Ajax对xml信息的接收和处理操作实例分析
    Ajax对xml信息的接收和处理操作实例分析

    这篇文章主要介绍了Ajax对xml信息的接收和处理操作,结合实例形式分析了ajax针对xml结构信息的相关处理操作技巧,需要的朋友可以参考下...

    2020-02-03

热门系统总排行

装机必备

系统教程栏目

系统帮助 win12教程 监控安装 祥瑞电脑 重装大师 重装教程 bios 其它教程 软件教程 苹果MAC教程 Linux教程 Win2003教程 Win2008教程 U盘教程 WinXP教程 Win7教程 Win8教程 Win10教程 win11教程 打印机

栏目热门教程

人气教程排行

站长推荐

热门系统下载

软件发布| Tag标签| 版权声明| 网站地图| 软件专题| sitemap| 系统城一键重装系统QQ群

本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。

皖ICP备11004271号-6版权所有：固镇县祥瑞电脑科技销售部