1.Ajax介绍
AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间,它使用异步数据进行转换,并允许网页向服务器索取少量信息而非整个网页。
AJAX 关键词:
JavaScript脚本和可扩展标记语言(XML)
WEB浏览器技术
开放式WEB标准
浏览器以及独立平台
更好更快的网络应用程序
XML以及HTTP请求
AJAX不是单一的技术,而是四种技术的集合:javascript,css,dom,xmlhttprequest。因此,AJAX中最新的术语是:XMLHTTPRequest对象。使用该对象发送请
AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间,它使用异步数据进行转换,并允许网页向服务器索取少量信息而非整个网页。
AJAX 关键词:
JavaScript脚本和可扩展标记语言(XML)
WEB浏览器技术
开放式WEB标准
浏览器以及独立平台
更好更快的网络应用程序
XML以及HTTP请求
AJAX不是单一的技术,而是四种技术的集合:javascript,css,dom,xmlhttprequest。因此,AJAX中最新的术语是:XMLHTTPRequest对象。使用该对象发送请
求和处理相应。
传统的网络应用程序会将输入的信息提交给服务器(使用HTML表单)。在服务器通过代码后,将会把一个全新的完整的页面传送给用户。由于用户每
传统的网络应用程序会将输入的信息提交给服务器(使用HTML表单)。在服务器通过代码后,将会把一个全新的完整的页面传送给用户。由于用户每
次提交输入信息的时候服务器都将传回一个新的页面,传统的网络应用程序通常运行缓慢且使用不便。
使用AJAX,网页应用程序能不经重新下载整个网页就发送并重新获得数据。这是通过发送XMLHTTPRequest请求和使用JS对网页进行部分修改来实现的
使用AJAX,网页应用程序能不经重新下载整个网页就发送并重新获得数据。这是通过发送XMLHTTPRequest请求和使用JS对网页进行部分修改来实现的
。
2.AJAX实例
客户端:
<html>
<head>
<script type="text/javascript">
//首先创建一个XMLHttpRequest对象:由于XMLHttpRequest不是一个W3C标准,在IE中把XMLHttpRequest实现为一个ActiveX对象,其他的浏览器把它实现为一
<head>
<script type="text/javascript">
//首先创建一个XMLHttpRequest对象:由于XMLHttpRequest不是一个W3C标准,在IE中把XMLHttpRequest实现为一个ActiveX对象,其他的浏览器把它实现为一
个本地JavaScript对象。因此需要判断一下
var xmlHttp;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
//客户端需要触发的Ajax事件
function getClassKeys()
{
var className=document.getElementById("ClassName").value;
//创建一个XMLHttpRequest实例
createXMLHttpRequest();
//设置URL值,即去服务器端的那个文件获取信息
var url="server.asp?className="+className;
//使用open()方法建立调用,设置使用其他的HTTP方法(GET,POST,HEADER)
xmlHttp.open("GET",url,true);
//处理饭后是调用handleStateChange函数,在客户端做相应的处理。
xmlHttp.onreadystatechange=handleStateChange;
//通过send调用触发。
xmlHttp.send(null);
}
function handleStateChange(){
//察看服务器端返回的值正常后
if(xmlHttp.readyState==4){
//alert(xmlHttp.status);
if(xmlHttp.status==200){
//xmlHttp.responseText取得服务器端返回的数据(html,xml,或字符串等)
var reback = xmlHttp.responseText;
//取回的值添加给divid
document.getElementById("divid").innerHTML = reback;
}
}
}
</script>
</head>
<body>
<div id="divid"></div>
</body>
</html>
var xmlHttp;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
//客户端需要触发的Ajax事件
function getClassKeys()
{
var className=document.getElementById("ClassName").value;
//创建一个XMLHttpRequest实例
createXMLHttpRequest();
//设置URL值,即去服务器端的那个文件获取信息
var url="server.asp?className="+className;
//使用open()方法建立调用,设置使用其他的HTTP方法(GET,POST,HEADER)
xmlHttp.open("GET",url,true);
//处理饭后是调用handleStateChange函数,在客户端做相应的处理。
xmlHttp.onreadystatechange=handleStateChange;
//通过send调用触发。
xmlHttp.send(null);
}
function handleStateChange(){
//察看服务器端返回的值正常后
if(xmlHttp.readyState==4){
//alert(xmlHttp.status);
if(xmlHttp.status==200){
//xmlHttp.responseText取得服务器端返回的数据(html,xml,或字符串等)
var reback = xmlHttp.responseText;
//取回的值添加给divid
document.getElementById("divid").innerHTML = reback;
}
}
}
</script>
</head>
<body>
<div id="divid"></div>
</body>
</html>
服务器端
服务端页面被JS所调遣,是一名为"server.asp"的ASP文件,页面是用VBS来针对IIS所写的。它可以被轻松的写成PHP或是一些其他的服务语言,它只是检查了
名字组并将相吻合的名字返回给客户端:
<%
Response.Buffer = True
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.Charset="GB2312"
Server.ScriptTimeOut=999999999
Dim Conn
//取得客户端传过来的参数
f_class =Trim(Request.QueryString("className")
If f_class = "" Then
f_class = "all"
End If
On Error Resume Next
<%
Response.Buffer = True
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.Charset="GB2312"
Server.ScriptTimeOut=999999999
Dim Conn
//取得客户端传过来的参数
f_class =Trim(Request.QueryString("className")
If f_class = "" Then
f_class = "all"
End If
On Error Resume Next
//要返回给客户端的字符串
dim GetClassDiv
GetClassDiv= ""
dim f_obj_rs
Set f_obj_rs= server.CreateObject("adodb.recordset")
f_obj_rs.Open "Select * from tablename where ClassName ='"& f_class &"' and isLock=0 ORDER BY Name COLLATE Chinese_PRC_CS_AS_KS_WS",Conn,1,1
do while Not f_obj_rs
if f_char = f_obj_rs("Name") then
GetClassDiv= GetClassDiv& "<option value="""& f_obj_rs("G_Name")&""" selected>"& f_obj_rs("G_Name")&"</option>"
Else
GetClassDiv= GetClassDiv& "<option value="""& f_obj_rs("G_Name")&""">"& f_obj_rs("G_Name")&"</option>"
End if
f_obj_rs.movenext
Loop
GetClassDiv= GetClassDiv
Response.Write(GetClassDiv)
f_obj_rs.close:set f_obj_rs= nothing
%>
dim GetClassDiv
GetClassDiv= ""
dim f_obj_rs
Set f_obj_rs= server.CreateObject("adodb.recordset")
f_obj_rs.Open "Select * from tablename where ClassName ='"& f_class &"' and isLock=0 ORDER BY Name COLLATE Chinese_PRC_CS_AS_KS_WS",Conn,1,1
do while Not f_obj_rs
if f_char = f_obj_rs("Name") then
GetClassDiv= GetClassDiv& "<option value="""& f_obj_rs("G_Name")&""" selected>"& f_obj_rs("G_Name")&"</option>"
Else
GetClassDiv= GetClassDiv& "<option value="""& f_obj_rs("G_Name")&""">"& f_obj_rs("G_Name")&"</option>"
End if
f_obj_rs.movenext
Loop
GetClassDiv= GetClassDiv
Response.Write(GetClassDiv)
f_obj_rs.close:set f_obj_rs= nothing
%>