什么是AJAX:AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
AJAX – 创建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
XMLHttpRequest 对象用于和服务器交换数据。
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
实例:(向服务器获取当前时间)
- 新建一个php文件,命名为ajaxtest1.php,代码如下:
<?php echo "成功了!".gettime(); function gettime(){ date_default_timezone_set("Asia/Hong_Kong"); $time=Date("Y-m-d H:i:s"); return $time; } ?>
- 新建一个HTML网页,命名为ajaxreq.html,向服务器发送请求,代码如下:
<html> <head><title>代码狗www.daimadog.com|AJAX基础教程一</title> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("ajaxq").innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST","ajaxtest1.php",true); xmlhttp.send(); } </script> </head> <body> <center> <button type="button" onclick="loadXMLDoc()">请求时间</button> <div id="ajaxq"></div> </center> </body> </html>
- 将上述两个文件上传至支持php的空间,即可查看效果。
演示效果请看:
原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/tech/webdev/241381.html