AJAX异步传输

什么是AJAX

AJAX— 异步JavaScript和XML(Asynchronous JavaScript And XML)，是一种创建交互式网页应用的网页开发技术。

AJAX的作用

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

AJAX执行原理

AJAX处理过程分为四步：

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

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

3.异步发送XMLHttpRequest请求

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

 

AJAX异步代码

 

1.创建ajax.js文件

[javascript:showcolumns:firstline[0]] view plaincopy

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

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

 

2.创建index.php

[php:showcolumns:firstline[0]] view plaincopy

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

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

 

3.创建show.php

[php:showcolumns:firstline[0]] view plaincopy

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

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