AJAX— 异步传输

AJAX异步传输

AJAX— 异步传输

AJAX浏览器与服务器异步传输数据，通过异步请求大大减少数据信息访问量，通俗：AJAX对局部刷新而不是对整个页面刷新，AJAX使得程序更快，更友好。

AJAX处理过程分为四步：

1.创建XMLHttpRequest,将目标URL设置在XMLHttpRequest

2.向XMLHttpRequest设置一个回调函数

3.异步发送XMLHttpRequest请求

4.服务器响应并调用回调函数把数据显示出来

 

AJAX异步代码

 

1.创建ajax.js文件

 

1. var xmlHttp;  
2.   
3. function send_request() {  
4.     if(window.XMLHttpRequest) {  
5.         xmlHttp = new XMLHttpRequest();  
6.     } elseif(window.ActiveXObject) {  
7.         xmlHttp = new ActiveXObject("Micosoft.XMLHTTP");  
8.     }  
9. }  
10.   
11. function ajax(url) {  
12.     send_request();  
13.     xmlHttp.open("GET", "show.php?id="+url, true);  
14.     xmlHttp.onreadystatechange = processRequest;  
15.     xmlHttp.send(null);  
16. }  
17.   
18. function processRequest() {  
19.     var process = xmlHttp.responseText;  
20.     document.getElementById("show").innerHTML = process;  
21. }  

 

2.创建index.php

1. <mce:script type="text/javascript" src="ajax.js" mce_src="ajax.js"></mce:script>  
2. <a href="#" mce_href="#" οnclick="ajax('a')">a</a>  
3. <a href="#" mce_href="#" οnclick="ajax('b')">b</a>  
4. <a href="#" mce_href="#" οnclick="ajax('c')">c</a>  
5. <div id="show"></div>  

 

3.建show.php

 

1. <?php   
2. if($str = $_GET['id']) {  
3.     for($i=0;$i<=10;$i++) {  
4.         echo $str;  
5.     }  
6. }  
7. ?>  

 

转载于:https://www.cnblogs.com/bethel511/p/3805387.html