AJAX异步传输

最新推荐文章于 2022-08-16 08:30:09 发布

原创最新推荐文章于 2022-08-16 08:30:09 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #asynchronous #javascript #function #服务器

AJAX 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了AJAX技术的基本概念，解释了其如何通过异步请求实现局部页面更新，从而提升用户体验。文章详细阐述了AJAX的工作原理及其实现步骤，并通过一个简单的示例展示了如何使用JavaScript进行异步数据交换。

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="#" 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

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