zoukankan      html  css  js  c++  java
  • 初识AJAX技术

    1. 简介:

    AJAX(阿贾克斯),是一种网页开发技术。AJAX是异步的Javascript和XML的简写,是一种实现异步请求的技术。

    为什么要使用AJAX?传统的页面刷新技术是重新加载整个页面,这样做有一个很大的缺点就是:如果只需要改变当前页面的一小部分内容,确重新加载整个页面,是很耗时间、效率的。AJAX就是为了实现部分网页刷新,在不用重新加载整个页面的情况下与服务器交换数据。

    使用AJAX的优点是:节省带宽,提高响应速度。

    使用AJAX也有缺点,最大的缺点就是可能让后退按钮失去作用。例如:在一个文本框里获得服务器数据后,就比之前的页面多了文本框里的数据,当我们点击他跳到下一个页面,返回时,希望还能看到文本框里的数据,但浏览器只能加载之前的静态页面,也就是看不到文本框里的数据了。解决的方法是:使用一个隐藏的iframe来保存使用了AJAX技术元素的内容,当出现后退情况时,就报内容读取到对应的元素上,恢复上次的状态。

     

    2. 使用AJAX技术:

    AJAX的核心是XMLHttpRequest对象,使用该对象来与服务器交互,实现部分刷新的功能。

    注意:IE5,IE6使用的是ActiveXObject对象,而IE7+,FireFox等都是使用XMLHttpRequest对象。所以要创建一个XMLHttpRequest对象可以这样创建:

                var xmlhttprequest;

                if (window.XMLHttpRequest)

                    xmlhttprequest = new XMLHttpRequest();

                else if (window.ActiveXObject)

                    xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");

                else

                    alert("您的浏览器不支持AJAX技术");

     

    2.1 XMLHttpRequest对象的四大属性:

    onreadystatechange属性:为该属性指定一个函数指针。该函数会被异步调用,也就是当XMLHttpRequest对象的状态改变时会自动触发(当open()第三个参数为true时)

    readyState属性:保存了XMLHttpRequest的状态,根据这个值来判断处理。

    ·        0: 请求未初始化

    ·        1: 服务器连接已建立

    ·        2: 请求已接收

    ·        3: 请求处理中

    ·        4: 请求已完成,且响应已就绪

    status属性:状态码,表示该响应的状态。如200表示OK,404表示Not  Found。

    responseText(responseXML)属性:保存了服务器响应的数据。

     

    2.2 AJAX如何向服务器提出请求:

    使用XMLHttpRequest的open()和send()函数

    open(method,url,async) :第一个参数表示提交报文的方式,可以是Get/Post,通常是用Get提交,Get的速度较快,但如果要提交的数据过大就必须采用Post方式。  第二个参数表示文件在服务器上的位置 第三个参数表示是否采用异步方式,通常都设置为true,设置为true,上面赋值给onreadystatechange属性的函数才会异步执行;如果设置为false,则要等到服务器响应完成后才能执行其它操作。

    Send(string) 参数是正对Post的,表示要提交给服务器的数据。、

    如果要将string发送给服务器,还需要使用setRequestHeader(header,value)函数设置http报文的信息。

    例如:

    xmlhttp.open("POST","ajax_test.asp",true);

    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded";

    xmlhttp.send("fname=Bill&lname=Gates");

     

    3. ASP.NET的一个小例子:

     

    <head>
        <title>使用ajax技术实现部分网页刷新技术</title>
        <script type="text/javascript">
            function GetTime() {
                var xmlhttprequest;
                if (window.XMLHttpRequest)
                    xmlhttprequest = new XMLHttpRequest();
                else if (window.ActiveXObject)
                    xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
                else
                    alert("您的浏览器不支持AJAX技术");
    
                xmlhttprequest.onreadystatechange = function () {   //异步执行,会触发几次
                    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                        document.getElementById("time").value =xmlhttprequest.responseText;
                    }
                }
                xmlhttprequest.open("GET", "AJAXResponse.ashx", true);
                xmlhttprequest.send();
        }
        </script>
    </head>
    <body>
    <form name="form" action="AJAXResponse.ashx">
    用户:<input type="text" name="user" onblur="GetTime()" /><br />
    时间:<input type="text" id="time" name="time"/>
    </form>
    </body>

    AJXXResponse.ashx的代码很简单,就是获得当前服务器时间并写入响应流中。

     

    string strTime = DateTime.Now.ToString();
            context.Response.Write(strTime);

    当user编辑框失去焦点时,time编辑框就会获得服务器端的时间。

    使用HttpWatch观察,当user编辑框失去焦点后,服务器只给客户端发送时间,并不会再发送整个页面的html代码。

     

     

     

     

     

     


  • 相关阅读:
    C++实现高斯滤波器
    移动通信
    最简单的DLL
    C/C++ 编译和链接过程
    Servlet 详解
    对 Java 集合的巧妙利用
    Java 泛型
    Java 字符编码与解码
    HTTP 400 错误
    a 标签的四种样式
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3181773.html
Copyright © 2011-2022 走看看