本文实例讲述了Ajax原理与应用。分享给大家供大家参考,具体如下:
Ajax原理:页面不刷新的情况下,利用XMLHttpRequest对象发送HTTP请求,然后根据返回的内容进行相应的业务逻辑
使用Ajax的步骤:
(1)创建XMLHttpRequest对象
(2)发送http请求
(3)根据服务器返回的内容进行相应的操作
一步一步来说哈!
1、创建XMLHttpRequest对象
先看看w3c给出的信息
也就是说,如果要使用XMLHttpRequest对象还必须考虑浏览器的兼容型,因此可以封装一个方法来创建XMLHttpRequest对象。
1
2
3
4
5
6
7
8
9
10
|
//创建XMLHttpRequest对象 function createXhr(){ var xhr = null ; if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); //谷歌、火狐等浏览器 } else if (window.ActiveXObject){ xhr = new ActiveXObject( "Microsoft.XMLHTTP" ); //ie低版本 } return xhr; } |
2、发送Http请求
Http简述:
学过http请求的同学应该都知道,一个简单的请求应该包含这几部分内容,分别请求方法、主机、路径、协议版本等。
Telnet发送http请求截图:
Ajax中的Http请求:
在这里只用给出请求方法、路径。但是还有一个是请求方式,分为同步和异步,先不说同步和异步的差别,true表示异步,false表示同步。
1
2
|
xhr.open( 'GET' , './05-ajax-vote.php' , true ); //确定请求的路径 xhr.send( null ); //发送请求,携带数据为空 |
案例:
Ajax异步投票程序
文件结构图:
05-ajax-vote.html文件:
点击投票按钮,调用vote函数,然后穿件xhr对象,发送http请求,此处使用的是异步,并且实现了状态回调函数,然后在里面判断投票是否成功。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!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> //创建XMLHttpRequest对象 function createXhr(){ var xhr = null ; if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); //谷歌、火狐等浏览器 } else if (window.ActiveXObject){ xhr = new ActiveXObject( "Microsoft.XMLHTTP" ); //ie低版本 } return xhr; } //ajax投票 function vote(){ //1、创建xhr对象 var xhr = createXhr(); //2、确定请求方法、路径、请求方式为异步 xhr.open( 'GET' , './05-ajax-vote.php' , true ); //3、发送请求 xhr.send( null ); //4、异步方式设置回调 xhr.onreadystatechange = function (){ //如果准备状态为4,表示执行结束 if ( this .readyState == 4){ //根据服务端返回的标识来提示用户投票是否成功 if (xhr.responseText == '1' ){ alert( '投票成功' ); } else { alert( '投票失败' ); } } } } </script> <body> <h1>无刷新投票界面</h1> <img src= "./lin.jpg" /> <p> <a href= "javascript:void(0);" rel= "external nofollow" onclick= "vote();" >投票</a> </p> </body> </html> |
05-ajax-vote.php文件:
以随机数的形式来模拟投票是否成功,如果成功则往05-ajax-vote-res.txt文件中增1,并返回表示1,失败则返回表示0。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?php /** * ajax投票程序 * @author webbc */ if (rand(0,10) > 4){ echo '0' ; //返回“投票失败”标识 } else { $number = file_get_contents ( './05-ajax-vote-res.txt' ); $number ++; file_put_contents ( './05-ajax-vote-res.txt' , $number ); echo '1' ; //返回“投票成功”标识 } ?> |
效果图:
同步和异步的区别:
同步:当xhr对象发送请求后,此时本页面脚本执行被中断,会等待该请求(05-ajax-vote.php)执行结束,才会回到断点继续执行发送请求后的操作。
异步:当xhr对象发送请求后,不需要等待发出的请求(05-ajax-vote.php)被执行结束,而是接着从发送请求的语句的后续继续执行
注意:如果采用异步方式请求某地址,如果要使用该地址返回的内容,则必须要设置状态回调函数,在回调函数中操作从服务器返回的内容,该回调函数会在该请求完成后被执行。
- AJAX – onreadystatechange 事件
- AJAX 数据库
- AJAX XML
- AJAX 简介
- Ajax对xml信息的接收和处理操作实例分析
- 解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
- 在layer弹出层中通过ajax返回html拼接字符串填充数据的方法
- Ajax报错400的参考解决办法
- ajax异步读取后台传递回的下拉选项的值方法
- ajax获得json对象数组 循环输出数据的方法
- Ajax实现三级联动效果
- ajax实现excel报表导出
- Ajax实现文件上传功能(Spring MVC)
- 使用ajax跨域调用springboot框架的api传输文件
- AJAX实现JSON与XML数据交换方法详解
- 利用Ajax实现智能回答的机器人示例代码
- AJAX浅析数据交换的实现
- 一文掌握ajax、fetch和axios的区别对比
- 关于Ajax的疑难杂症详解
- 面试必备之ajax原始请求