Ajax 速成

Ajax 速成: 2008/12/23 22:21:17 发布:walf_man

Ajax 速成代码，教你在短时间内学会Ajax的使用。

只需用js中的代码，你就能很快开发出自己的Ajax相关网页。

ajax.js

var _XMLHTTP = XHai_XMLHttpRequest();

// 建立对象 XMLHttpRequest
function XHai_XMLHttpRequest(){
var XMLHttp = false;
if(window.XMLHttpRequest){
  XMLHttp = new XMLHttpRequest();
  if(XMLHttp.overrideMimeType){
   XMLHttp.overrideMimeType('text/xml');
  }
}else if(window.ActiveXObject){
  try{
   XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{
    XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e){}
  }
}
return XMLHttp;
}

// POST方式提交表单
function pSendForm(form){
LanDing(1);   // 显示等待信息
var poststr=""
var url = form.action;
for(i=0;i<form.length;i++){
  poststr += form[i].name+"="+escape(form[i].value)+"&";
}
_XMLHTTP.open("POST",url,true);
_XMLHTTP.setRequestHeader("Content-Length",poststr.length);
_XMLHTTP.setRequestHeader("content-type","application/x-www-form-urlencoded;");
_XMLHTTP.onreadystatechange = function (){
if(_XMLHTTP.readyState==4){
  if(_XMLHTTP.status==200){
   var response=unescape(_XMLHTTP.responseText);   // 获得返回数据
   document.getElementById("showdata").innerHTML = response;
   LanDing(0);   // 隐藏等待信息
  }
}}
_XMLHTTP.send(poststr);
}

// 链接
function GoTo(url){
LanDing(1);   // 显示等待信息
_XMLHTTP.open("GET",url,true);
_XMLHTTP.onreadystatechange = function (){
if(_XMLHTTP.readyState==4){
  if(_XMLHTTP.status==200){
   var response=unescape(_XMLHTTP.responseText);   // 获得返回数据
   document.getElementById("showdata").innerHTML = response;
   LanDing(0);   // 隐藏等待信息
  }
}
}
_XMLHTTP.send(null);
}

function LanDing(n){
if(n==1){
document.getElementById("landing").style.display = "";
}else{
document.getElementById("landing").style.display = "none";
}
}

test.htm

<!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" content="text/html; charset=gb2312" />
<title>速成Ajax</title>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
<div style="width:300px; height:auto; float:left;">
POST 提交表单<br />
<form name="form1" action="1.asp" method="post" onsubmit="pSendForm(this);return false">
    <input type="text" name="title" /><br />
    <textarea cols="35" rows="5" name="content"></textarea><br />
    <input type="submit" name="submit" value="提交" />
</form>
</div>
<div style="width:300px; height:auto; float:left;">
GET 链接<br />
<br />
<a href="javascript.GoTo('1.asp')">点击此链接</a>
</div>
<div id="landing" style="width:200px;height:auto;margin:10px; color:#00F;display:none;clear:both">数据处理中，请稍候...</div>
<div style="width:500px;margin-top:50px;clear:both">下面是返回的数据内容：</div>
<div id="showdata" style="width:500px; height:100px; border:1px solid #000; clear:both"></div>
</body>
</html>

1.asp

<%@LANGUAGE="VBscript" CODEPAGE="936"%>
<%
'' 不缓存
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
'' 编码
Response.Charset="GB2312"

if request.Form("submit")<>"" then
response.Write "这是表单提交的内容：<br />"
response.Write request.Form("title")&"<br />"
response.Write request.Form("content")
else
response.Write "这是用点击链接的："&now()
end if
%>

PHP 的

1.php

<?
// 不缓存
header("Expires: 0");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
// 编码
header('Content-Type:text/html;charset=GB2312');

if($_POST["submit"]!=null){
echo "这是表单提交的内容：<br />";
echo $_POST["title"]."<br />";
echo $_POST["content"];
}else{
echo "这是用点击链接的：".date("Y-m-d H:i:s");
}
?>

来源URL：http://www.60108.cn/open.asp?id=19

网络超市

发表评论: