AJAX异步传输

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文件

var xmlHttp; function send_request() { if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } elseif(window.ActiveXObject) { xmlHttp = new ActiveXObject("Micosoft.XMLHTTP"); } } function ajax(url) { send_request(); xmlHttp.open("GET", "show.php?id="+url, true); xmlHttp.onreadystatechange = processRequest; xmlHttp.send(null); } function processRequest() { var process = xmlHttp.responseText; document.getElementById("show").innerHTML = process; }

 

2.创建index.php

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

 

3.创建show.php

<?php if($str = $_GET['id']) { for($i=0;$i<=10;$i++) { echo $str; } } ?>