AJAX技术的详解及应用
2007-05-09 20:20
567 查看
以下原贴:老鹰
<一>方法
一、创建 XMLHttpRequest 对象
定义：
根据浏览器的不同，创建XMLHttpRequest的方法也不相同，但大致可分为两类：
1、Microsft IE浏览器
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
和
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
2、处理 Mozilla 和非 Microsoft 浏览器
xmlHttp = new XMLHttpRequest();
应用：
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //先有Msxml2.XMLHTTP来创建IE游览器上的对象
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //如果上面的创建失败，则有此句来创建
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { //如果上面的全失败（非IE浏览器）
xmlHttp = new XMLHttpRequest(); //这是上面的均失败后适用于非IE浏览器
}
二、发送
xmlHttp.open(method,url,synchronization)
xmlHttp.send([argv])
open()方法中的三个参数：1、method是指传递参数的方法：Get或Post
2、url是指服务端文件的地址
3、synchronization有两个值是指是否同步：true或false。true表示同步，false表示不同步
send()方法中的参数：argv是指发送的参数，一般如果是以Get 发送的话，那么这里可以为null
应用：
xmlHttp.open("get","abc.asp?name=glede",true);
xmlHttp.send(null);
三、XmlHttpRequest对象属性
1、onreadystatechange 每次状态改变所触发事件的事件处理程序
2、readyState 对象状态值： 0 = 未初始化（uninitialized） 1 = 正在加载（loading） 2 = 加载完毕（loaded） 3 = 交互（interactive） 4 = 完成（complete）
3、responseText 从服务器进程返回的数据的字符串形式
4、responseXML 从服务器进程返回的DOM兼容的文档数据对象
5、status 从服务器返回的数字代码，比如404（未找到）或200（就绪）
6、statusText 伴随状态码的字符串信息
应用：
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseText; //获取XMLHTTP返回的值
}
}
}
<二> 实例：
1、用AJAX实现无刷新更新新闻：
//原创者：老鹰
function ajax(URL,DivId,IntervalDate)//参数URL为地址,DivId为DIV的ID，IntervalDate为间隔时间
{
window.setInterval("CreateXMLHTTP('"+URL+"','"+DivId+"')",IntervalDate);
}
//XMLHTTP连接,接受参数url为地址，DivId为DIV的id
function CreateXMLHTTP(url,DivId)
{
var xmlHttp = false;
//判断浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') //判断是不是Firefox浏览等
{
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType('text/xml');
}
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseText; //获取XMLHTTP返回的值
document.getElementById(DivId).innerHTML = message ;//把返回的值赋给对应的ID
}
}
}
xmlHttp.open("get",url,true);
//解决中文编码
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Content-Type","charset=gb2312");
xmlHttp.send(null);
}
2、用AJAX实现注册用户名检测
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>AJAX检测用户名</tile>
<script language="javascript>
//AJAX函数
//编写者：老鹰 QQ:22683485
//2007年5月
function checkUid()
{
url="validate.asp?uid="+document.form1.uid.value;
if (document.form1.uid.value.length>=1)
{
CreateXMLHTTP(""+url+"",'ShowUid');
}
}
function CreateXMLHTTP(url,DivId) //参数说明：url为地址，DivId为<div>的ID
{
var xmlHttp = false;
//判断浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') //判断是不是Firefox浏览等
{
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType('text/xml');
}
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseText; //获取XMLHTTP返回的值
document.getElementById(DivId).innerHTML = message ;//把返回的值赋给对应的ID
}
}
}
xmlHttp.open("get",url,true);
//解决中文编码
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Content-Type","charset=gb2312");
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="form1" method="post" action="?action=reg">
<div style="float:left;">
<input name="uid" type="text" id="uid" size="10" maxlength="15" >
</div>
<Div id="ShowUid" style="float:left"></Div>
<!-- 以下的内容省略 -->
</form>
</body>
</html>
validate.asp的内容：
<%
Response.charset="gb2312" '如果不加此句，客户端中文有可能显示为乱码
uid=Replace(uid,"'","''")
''''安全判断代码省略
''''连接数据库的代码就省略
uid=Request.QueryString("uid")
Sql="select uid from member where uid='"&uid&"'"
Set Rs=conn.Execute(Sql)
If Not (Rs.Eof Or Rs.Bof) Then
Response.Write("<font color=red>此用户名已存在，请另选用户名</font>")
Else
Response.Write("<font color=blue>恭喜您，此用户名未注册，您可以使用！</font>")
End If
Rs.Close:Set Rs=Nothing
%>
----------------------------------------文章原创：老鹰(QQ:22683485)-----------------------------------------------------------------------
<一>方法
一、创建 XMLHttpRequest 对象
定义：
根据浏览器的不同，创建XMLHttpRequest的方法也不相同，但大致可分为两类：
1、Microsft IE浏览器
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
和
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
2、处理 Mozilla 和非 Microsoft 浏览器
xmlHttp = new XMLHttpRequest();
应用：
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //先有Msxml2.XMLHTTP来创建IE游览器上的对象
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //如果上面的创建失败，则有此句来创建
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { //如果上面的全失败（非IE浏览器）
xmlHttp = new XMLHttpRequest(); //这是上面的均失败后适用于非IE浏览器
}
二、发送
xmlHttp.open(method,url,synchronization)
xmlHttp.send([argv])
open()方法中的三个参数：1、method是指传递参数的方法：Get或Post
2、url是指服务端文件的地址
3、synchronization有两个值是指是否同步：true或false。true表示同步，false表示不同步
send()方法中的参数：argv是指发送的参数，一般如果是以Get 发送的话，那么这里可以为null
应用：
xmlHttp.open("get","abc.asp?name=glede",true);
xmlHttp.send(null);
三、XmlHttpRequest对象属性
1、onreadystatechange 每次状态改变所触发事件的事件处理程序
2、readyState 对象状态值： 0 = 未初始化（uninitialized） 1 = 正在加载（loading） 2 = 加载完毕（loaded） 3 = 交互（interactive） 4 = 完成（complete）
3、responseText 从服务器进程返回的数据的字符串形式
4、responseXML 从服务器进程返回的DOM兼容的文档数据对象
5、status 从服务器返回的数字代码，比如404（未找到）或200（就绪）
6、statusText 伴随状态码的字符串信息
应用：
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseText; //获取XMLHTTP返回的值
}
}
}
<二> 实例：
1、用AJAX实现无刷新更新新闻：
//原创者：老鹰
function ajax(URL,DivId,IntervalDate)//参数URL为地址,DivId为DIV的ID，IntervalDate为间隔时间
{
window.setInterval("CreateXMLHTTP('"+URL+"','"+DivId+"')",IntervalDate);
}
//XMLHTTP连接,接受参数url为地址，DivId为DIV的id
function CreateXMLHTTP(url,DivId)
{
var xmlHttp = false;
//判断浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') //判断是不是Firefox浏览等
{
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType('text/xml');
}
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseText; //获取XMLHTTP返回的值
document.getElementById(DivId).innerHTML = message ;//把返回的值赋给对应的ID
}
}
}
xmlHttp.open("get",url,true);
//解决中文编码
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Content-Type","charset=gb2312");
xmlHttp.send(null);
}
2、用AJAX实现注册用户名检测
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>AJAX检测用户名</tile>
<script language="javascript>
//AJAX函数
//编写者：老鹰 QQ:22683485
//2007年5月
function checkUid()
{
url="validate.asp?uid="+document.form1.uid.value;
if (document.form1.uid.value.length>=1)
{
CreateXMLHTTP(""+url+"",'ShowUid');
}
}
function CreateXMLHTTP(url,DivId) //参数说明：url为地址，DivId为<div>的ID
{
var xmlHttp = false;
//判断浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') //判断是不是Firefox浏览等
{
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType('text/xml');
}
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message = xmlHttp.responseText; //获取XMLHTTP返回的值
document.getElementById(DivId).innerHTML = message ;//把返回的值赋给对应的ID
}
}
}
xmlHttp.open("get",url,true);
//解决中文编码
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Content-Type","charset=gb2312");
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="form1" method="post" action="?action=reg">
<div style="float:left;">
<input name="uid" type="text" id="uid" size="10" maxlength="15" >
</div>
<Div id="ShowUid" style="float:left"></Div>
<!-- 以下的内容省略 -->
</form>
</body>
</html>
validate.asp的内容：
<%
Response.charset="gb2312" '如果不加此句，客户端中文有可能显示为乱码
uid=Replace(uid,"'","''")
''''安全判断代码省略
''''连接数据库的代码就省略
uid=Request.QueryString("uid")
Sql="select uid from member where uid='"&uid&"'"
Set Rs=conn.Execute(Sql)
If Not (Rs.Eof Or Rs.Bof) Then
Response.Write("<font color=red>此用户名已存在，请另选用户名</font>")
Else
Response.Write("<font color=blue>恭喜您，此用户名未注册，您可以使用！</font>")
End If
Rs.Close:Set Rs=Nothing
%>
----------------------------------------文章原创：老鹰(QQ:22683485)-----------------------------------------------------------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web 2.0中AJAX技术应用详解
- Web 2.0中AJAX技术应用详解
- Web 2.0 中AJAX技术应用详解
- AJAX技术应用详解
- Web 2.0中AJAX技术应用详解
- Web 2.0中AJAX技术应用详解[转]
- Web 2.0中AJAX技术应用详解
- Web 2.0中AJAX技术应用详解
- Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】
- 40多个Ajax,DHTML和Javascript应用技术
- Ajax技术在办公自动化系统中的应用
- AJAX技术如何节省应用的带宽：多次交互，每次少量更新
- Ajax技术应用的站点
- PHP企业级应用缓存技术详解
- AJAX --- 一种创建交互式网页应用的网页开发技术
- Ajax简要应用说明及技术开发实例
- Ajax技术WEB开发__WEB2.0中AJAX应用的详解
- 双11直播技术强力后盾——阿里云导播服务功能详解与场景应用
- 【Ajax技术】JQuery的应用与高级调试技巧
- Ajax技术详解