ajax可以说的上当今很火的技术啦.
在村子里经常看到有人问xajax的技术,说实话,我觉得那东西太麻烦,用起来太费事.
ajax本身实现的机制不是很难,难的应该是在后期的javascript处理返回的responseText,responseXml
ajax本身的操作过程无外是:
1.构建一个xmlHTTP对像
2.通过xmlHTTP的同步或是异步方式发送数据(大部分都是异步方式)
3.如果是异步方式检查xmlHttp的状态变化
4.当状态变到readyState==4,而且status==200说明发送数据成功
5.这时候再通过javascript处理xmlHTTP的responseText或是responseXml(这两者是同时存在的)
下面来实现这个过程
1.构建一个xmlHTTP的对像
CODE:function createRequest(){
if(typeof XMLHttpRequest!="undefined") {
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){
var xmlHttp_ver = false;
var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
if(!xmlHttp_ver){
for(var i=0;i<xmlHttp_vers.length;i++){
try{
new ActiveXObject(xmlHttp_vers[i]);
xmlHttp_ver = xmlHttp_vers[i];
break;
}catch(oError){;}
}
}
if(xmlHttp_ver){
return new ActiveXObject(xmlHttp_ver);
}else{
throw new Error("Could not create XML HTTP Request.");
}
}else{
throw new Error("Your browser doesn't support an XML HTTP Request.");
}
}
注意：xmlHttp_vers 应该从版本高的往版本低的写，这样建立对像的数据调用的是你机子上安装过的最高版本的MSXML2.XmlHttp
第二步发送数据
这里主要是调用xmlHttp的open方法和send方法来处理
xmlHTTP的方法可以到www.xmlhttp.cn查看（我以前发过一个chm的，但因为版权被村长删除啦，谁要是想要，回信，我发一下）
下面是用post的方法发送数据
CODE:var xmlHttp;
xmlHttp = createRequest();
function sendPostRequest()
{
var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
var url = "show.php";//要发送到的URL
var queryString = "shownum" + "=" + shownum;
//向服务端发送请求
xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
xmlHttp.onreadystatechange = showData;//异步方式处理，当状态改变时会调用onreadystatechange属性指定的回调函数showData
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时，这里可以写成xmlHttp.send(NULL);
}
第三步
当状态改变时会调用onreadystatechange属性指定的回调函数showData，来来检查状态变化
xmlHTTP.readyState 和xmlHTTP.status 可以去查手册，看一下就知道
CODE:function showData()
{
var msg=document.getElementById("status");
//第４步
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//只有当readyState为4并且status为200时，才表示符合要求
//下面这一句话，就相当于上面说的第５步，处理返回的结果
msg.innerHTML = xmlHttp.responseText;
}
}
else
{
switch(xmlHttp.readyState)
{
case 0:
msg.innerHTML="未初始化...";
break;
case 1:
msg.innerHTML="加载中...";
break;
case 2:
msg.innerHTML="连接完成...";
break;
case 3:
msg.innerHTML="交换数据...";
break;
default:
break;
}
}
}
到这里就一次xmlhttp发送异步调用数据也就算完成啦
完整的代码是
CODE:<html>
<head>
<title>
ajax
</title>
<script language="javascript">
function createRequest(){
if(typeof XMLHttpRequest!="undefined") {
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){
var xmlHttp_ver = false;
var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
if(!xmlHttp_ver){
for(var i=0;i<xmlHttp_vers.length;i++){
try{
new ActiveXObject(xmlHttp_vers[i]);
xmlHttp_ver = xmlHttp_vers[i];
break;
}catch(oError){;}
}
}
if(xmlHttp_ver){
return new ActiveXObject(xmlHttp_ver);
}else{
throw new Error("Could not create XML HTTP Request.");
}
}else{
throw new Error("Your browser doesn't support an XML HTTP Request.");
}
}
var xmlHttp;
function sendPostRequest()
{
xmlHttp = createRequest();
var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
var url = "show.php";//要发送到的URL
var queryString = "shownum" + "=" + shownum;
//向服务端发送请求
xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
xmlHttp.onreadystatechange = showData;//异步方式处理，当状态改变时会调用onreadystatechange属性指定的回调函数showData
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时，这里可以写成xmlHttp.send(NULL);
}
function showData()
{
var msg=document.getElementById("status");
//第４步
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//只有当readyState为4并且status为200时，才表示符合要求
//下面这一句话，就相当于上面说的第５步，处理返回的结果
msg.innerHTML = xmlHttp.responseText;
}
}
else
{
switch(xmlHttp.readyState)
{
case 0:
msg.innerHTML="未初始化...";
break;
case 1:
msg.innerHTML="加载中...";
break;
case 2:
msg.innerHTML="连接完成...";
break;
case 3:
msg.innerHTML="交换数据...";
break;
default:
break;
}
}
}
</script>
</head>
<body>
<div>要发送的数据：<input name="shownum" id="shownum" type="text"><input type="button" name="search" value="发送" onClick="sendPostRequest()"></div>
<div id="status"></div>
</body>
</html>
同一目录下要有一个show.php
内容为
CODE:<?php
$shownum = $_POST["shownum"];
echo $shownum;
?>
在村子里经常看到有人问xajax的技术,说实话,我觉得那东西太麻烦,用起来太费事.
ajax本身实现的机制不是很难,难的应该是在后期的javascript处理返回的responseText,responseXml
ajax本身的操作过程无外是:
1.构建一个xmlHTTP对像
2.通过xmlHTTP的同步或是异步方式发送数据(大部分都是异步方式)
3.如果是异步方式检查xmlHttp的状态变化
4.当状态变到readyState==4,而且status==200说明发送数据成功
5.这时候再通过javascript处理xmlHTTP的responseText或是responseXml(这两者是同时存在的)
下面来实现这个过程
1.构建一个xmlHTTP的对像
CODE:function createRequest(){
if(typeof XMLHttpRequest!="undefined") {
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){
var xmlHttp_ver = false;
var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
if(!xmlHttp_ver){
for(var i=0;i<xmlHttp_vers.length;i++){
try{
new ActiveXObject(xmlHttp_vers[i]);
xmlHttp_ver = xmlHttp_vers[i];
break;
}catch(oError){;}
}
}
if(xmlHttp_ver){
return new ActiveXObject(xmlHttp_ver);
}else{
throw new Error("Could not create XML HTTP Request.");
}
}else{
throw new Error("Your browser doesn't support an XML HTTP Request.");
}
}
注意：xmlHttp_vers 应该从版本高的往版本低的写，这样建立对像的数据调用的是你机子上安装过的最高版本的MSXML2.XmlHttp
第二步发送数据
这里主要是调用xmlHttp的open方法和send方法来处理
xmlHTTP的方法可以到www.xmlhttp.cn查看（我以前发过一个chm的，但因为版权被村长删除啦，谁要是想要，回信，我发一下）
下面是用post的方法发送数据
CODE:var xmlHttp;
xmlHttp = createRequest();
function sendPostRequest()
{
var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
var url = "show.php";//要发送到的URL
var queryString = "shownum" + "=" + shownum;
//向服务端发送请求
xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
xmlHttp.onreadystatechange = showData;//异步方式处理，当状态改变时会调用onreadystatechange属性指定的回调函数showData
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时，这里可以写成xmlHttp.send(NULL);
}
第三步
当状态改变时会调用onreadystatechange属性指定的回调函数showData，来来检查状态变化
xmlHTTP.readyState 和xmlHTTP.status 可以去查手册，看一下就知道
CODE:function showData()
{
var msg=document.getElementById("status");
//第４步
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//只有当readyState为4并且status为200时，才表示符合要求
//下面这一句话，就相当于上面说的第５步，处理返回的结果
msg.innerHTML = xmlHttp.responseText;
}
}
else
{
switch(xmlHttp.readyState)
{
case 0:
msg.innerHTML="未初始化...";
break;
case 1:
msg.innerHTML="加载中...";
break;
case 2:
msg.innerHTML="连接完成...";
break;
case 3:
msg.innerHTML="交换数据...";
break;
default:
break;
}
}
}
到这里就一次xmlhttp发送异步调用数据也就算完成啦
完整的代码是
CODE:<html>
<head>
<title>
ajax
</title>
<script language="javascript">
function createRequest(){
if(typeof XMLHttpRequest!="undefined") {
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){
var xmlHttp_ver = false;
var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
if(!xmlHttp_ver){
for(var i=0;i<xmlHttp_vers.length;i++){
try{
new ActiveXObject(xmlHttp_vers[i]);
xmlHttp_ver = xmlHttp_vers[i];
break;
}catch(oError){;}
}
}
if(xmlHttp_ver){
return new ActiveXObject(xmlHttp_ver);
}else{
throw new Error("Could not create XML HTTP Request.");
}
}else{
throw new Error("Your browser doesn't support an XML HTTP Request.");
}
}
var xmlHttp;
function sendPostRequest()
{
xmlHttp = createRequest();
var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
var url = "show.php";//要发送到的URL
var queryString = "shownum" + "=" + shownum;
//向服务端发送请求
xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
xmlHttp.onreadystatechange = showData;//异步方式处理，当状态改变时会调用onreadystatechange属性指定的回调函数showData
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时，这里可以写成xmlHttp.send(NULL);
}
function showData()
{
var msg=document.getElementById("status");
//第４步
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//只有当readyState为4并且status为200时，才表示符合要求
//下面这一句话，就相当于上面说的第５步，处理返回的结果
msg.innerHTML = xmlHttp.responseText;
}
}
else
{
switch(xmlHttp.readyState)
{
case 0:
msg.innerHTML="未初始化...";
break;
case 1:
msg.innerHTML="加载中...";
break;
case 2:
msg.innerHTML="连接完成...";
break;
case 3:
msg.innerHTML="交换数据...";
break;
default:
break;
}
}
}
</script>
</head>
<body>
<div>要发送的数据：<input name="shownum" id="shownum" type="text"><input type="button" name="search" value="发送" onClick="sendPostRequest()"></div>
<div id="status"></div>
</body>
</html>
同一目录下要有一个show.php
内容为
CODE:<?php
$shownum = $_POST["shownum"];
echo $shownum;
?>
作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：http://jackxiang.com/post/316/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！
最后编辑： jackxiang 编辑于2007-12-17 14:10
[道听途说]好像那个叫solaris的＆suse搞了个3D桌面
[Php5手册阅读笔记]PHP5阅读笔记之类的概念评论列表
