Ajax与页面动态请求基础
AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
下面是一个例子，使用Ajax页面不提交表单就可以通过javascript访问服务器来交换数据，并在不刷新页面的情况下修改页面内容：
demo.teml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>ajax Test</title>
<script type="text/javascript">
var xmlHttp = null; //声明XMLHttpRequest对象
function GetXmlHttpObject() { //该函数用于创建XMLHttpRequest对象
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function showCustomer(str) { //该函数由按钮的onclick事件调用
xmlHttp = GetXmlHttpObject(); //每次执行时要先创建XMLHttpRequest对象
if (xmlHttp == null) {
alert("您的浏览器不支持AJAX！");
return;
}
var url = "test.php?q=" + str + "&sid=" + Math.random(); //加入随机数种子防止缓存影响下次请求结果
xmlHttp.onreadystatechange = stateChanged; //设置回调函数；即准备状态改变时执行代码
xmlHttp.open("GET", url, true); //url参数格式 'test.php?key=value&key1=value1'
xmlHttp.send(null); //传递参数格式 ‘key=value&key1=value1’
}
function stateChanged() { //回调函数，浏览器自动调用
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) { //访问服务器成功
var result = xmlHttp.responseText;
var info = document.getElementById('info');
info.innerHTML = result; //动态修改页面
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="input1">
<input type="button" value="按钮" onclick="showCustomer(input1.value)">
<div id="info">
Hello
</div>
</body>
</html>test.php
<?php
//php通过$_GET数组访问ajax提交过来的表单信息，通过echo输出返回信息
echo('time:' . date("G:i:s") . '<br>q:' . $_GET['q'] . '<br>sid:' . $_GET['sid']);
?>效果：
这就是最简单Ajax实例
相关推荐
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
时光如瑾雨微凉 2020-07-19
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05