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文件
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
- 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
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
- <mce:script type="text/javascript" src="ajax.js" mce_src="ajax.js"></mce:script>
- <a href="#" mce_href="#" onclick="ajax('a')">a</a>
- <a href="#" mce_href="#" onclick="ajax('b')">b</a>
- <a href="#" mce_href="#" onclick="ajax('c')">c</a>
- <div id="show"></div>
3.创建show.php
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
- <?php
- if($str = $_GET['id']) {
- for($i=0;$i<=10;$i++) {
- echo $str;
- }
- }
- ?>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。