日期:2014-05-16  浏览次数:20708 次

felayman---jquery___ajax
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>jquery的ajax</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        /*
         在学jquery_ajax前,我们需要直到javascript中ajax对象的一些属性和方法
         ajax的核心是XMLHttpRequest对象
         XMLHttpRequest对象的所有属性
         1.onreadystatechange    指定当readyState属性改变时的事件处理句柄
         2.readyState            返回当前请求的状态
         3.status                返回当前请求的http状态码.
         4.statusText            返回当前请求的响应行状态
         5.responseBody          将回应信息正文以unsigned byte数组形式返回
         6.responseStream        以Ado Stream对象的形式返回响应信息
         7.responseTest          将响应信息作为字符串返回
         8.responseXML           将响应信息格式化为Xml Document对象并返回
         XMLHttpRequest对象的所有方法
         1.abort()               取消当前请求
         2.getAllResponseHeader()获取响应的所有http头
         3.getResponseHeader()   从响应信息中获取指定的http头
         4.open()                创建一个新的http请求,并指定此请求的方法、URL以及验证信息
         5.send()                发送请求到http服务器并接收回应
         6.setRequestHeader()    单独指定请求的某个http头
         */
        /*
         1.实例化一个XMLHttpRequest对象
         */
        function getXmlHttp() {
            if (window.XMLHttpRequest) { // Mozilla、Safari等浏览器
                return new XMLHttpRequest();
            } else if (window.ActiveXObject) { // IE浏览器
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        alert("您的浏览器不支持AJAX");
                    }
                }
            }
        }
        /*
         从普通txt文本中获取内容
         */
        //获取XMLHttpRequest对象
        //xmlHttp = getXmlHttp();
        //创建和服务器的连接
        //  xmlHttp.open("get","hello.txt",false);
        //向服务器发送请求并接收回应
        //xmlHttp.send(null);
        //alert(xmlHttp.responseText);//会弹出hello.txt里的内容
        /*
         需要注意的是,我们必须把XMLHttpRequest的open方法的参数必须搞清楚
         官方文档上是这样的原型:
         XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
         参数解释:
         1.bstrMethod        http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感
         2.bstrUrl           请求的URL地址,可以为绝对地址也可以为相对地址
         3.varAsync          布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用onreadystatechange属性指定的回调函数
         4.bstrUser          如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口
         5.bstrPassword      验证信息中的密码部分,如果用户名为空,则此值将被忽略
         如果我们将上述代码中的第三个参数改为true的话,会发现,我们得不到服务器hello.txt文本的信息,因为采用
         异步传输的方法的话,必须要指定当readyState属性改变时的事件
         */
        /*
         下面我们使用异步方式从服务器hello.php中获得数据,php代码很简单,如下:
         <?php
         echo 'hello,php';
         ?>
         */
        //xmlHttp.open("get","hello.php",true);
        //这里的getTextFromPhp只是一个函数句柄
        // xmlHttp.onreadystatechange = getTextFromPhp;
        ///xmlHttp.send(null);
        //function getTextFromPhp(){
        // if (xmlHttp.readyState == 4){
        //会弹出hello,php,说明错哦从服务器端获取到了数据
        // alert(xmlHttp.responseText);
        // }
        //  };
        /*
         我们将上述的代码再稍微修改下,带上参数给hello.php,并让php文件返回我们
         输入的内容
         */
        function ajax(){
            var xmlHttp = getXmlHttp();
            var content = document.getElementById("name").value;
            var bstrUrl = "hello.php";
            bstrUrl = bstrUrl+"?param="+content;
            var bstrMethod = "GET";
            var varAsync = true;
            xmlHttp.open(bstrMethod,bstrUrl,varAsync);
            xmlHttp.onreadystatechang