1. what is ajax
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
AJAX 是一种在 2005 年由 Google 推广开来的编程模式。
AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。
通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。
AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。
通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
2. XMLHttpRequest 对象
ajax的核心。
2.1 创建
<script type="text/javascript">
function GetXmlHttpObject()
{
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;
}
</script>
2.2 XMLHttpRequest 对象的三个重要的属性
2.2.1 onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。用一个函数名来赋值。
2.2.2 readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
状态 描述
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）
2.2.3 responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据,字符串。
//obj.innerHTML=xmlHttp.responseText;来接收，一般在服务器端的输出已经是HTML代码
2.2.4 ResponseXML 属性
ResponseXML 属性返回 XML 文档对象，可使用 W3C DOM 节点树的方法和属性来检查和解析该对象。
//var xmlDoc=xmlHttp.responseXML.documentElement;来接收获取一个documentElement对象,下面即是getElement*函数的事了。
2.2 重要方法
2.2.1 GET style
xmlHttp.open("GET","time.php",true);
//对于php，参数取得$_GET["arg_name"]
xmlHttp.send(null);
2.2.2 POST style
xmlHttp.open("POST","time.php",true);
//对于php，参数取得$_POST["arg_name"]
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("name=jack");
2.3 用户定义函数(处理readyState的0,1,2,3,4状态)
xmlHttp.onreadystatechange=myFunction;
function myFunction(){
if(xmlHttp.readyState==4){
document.myForm.time.value=xmlHttp.responseText;
}
}
3. 服务器端
返回数据即为服务器端向标准输出输出的内容。如在php中:
echo "hello!";
print "hello!";
//hello！即为返回的数据
4. 一个可用代码
将用户输入内容显示为:Hello 输入的内容
//HTML 文件
<html>
<head>
<script type="text/javascript">
function GetXmlHttpObject()
{
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 ajaxFunction(str){
//alert(str);
var xmlHttp=GetXmlHttpObject();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById("time").innerHTML=xmlHttp.responseText;
}
};
var url="time.php";
var args="content=";
args += str;
//url += "?content=";
//url += str;
//alert(url);
//xmlHttp.open("GET",url,true);
//xmlHttp.send(null);
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send(args);
}
</script>
</head>
<body>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction(this.value);"/>
时间: <span id="time"></span>
</form>
</body>
</html>
//PHP 文件
<?php
print "Hello ".$_POST["content"]."!";
?>
|
