Chinaunix首页 | 论坛 | 博客
  • 博客访问: 423709
  • 博文数量: 117
  • 博客积分: 5235
  • 博客等级: 大校
  • 技术积分: 1775
  • 用 户 组: 普通用户
  • 注册时间: 2007-09-12 15:51
文章分类

全部博文(117)

文章存档

2012年(9)

2011年(2)

2010年(21)

2009年(13)

2008年(72)

我的朋友

分类:

2008-12-10 16:11:44

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"]."!

";
?>

阅读(2312) | 评论(0) | 转发(0) |
0

上一篇:有时间可以看看

下一篇:mysql 日期与时间

给主人留下些什么吧!~~