第二十八讲 Ajax技术

来源:互联网 发布:cf淘宝 编辑:程序博客网 时间:2024/04/30 06:02
主要内容
    1. 了解什么是Ajax        
        1. 如,Ajax 在百度,谷歌等搜索引擎的输入框的智能无刷新提示功能。
        2. 如,Ajax 在谷歌中的地图城市坐标双击无刷新显示城市地图的应用
        3. Ajax: Asynchronous And XML 取首字符而得名
            异步:发送请求后不等返回结果,由回调函数处理结果
            JS: 向服务器发起请求,获取返回结果,更新页面
            XML: 封装数据

        4. 用途:使用JS从服务器获取数据而不必刷新整个页面。


    2. 了解Ajax技术的优势
    3. 使用XmlHttpRequest开发Ajax程序

    //判断浏览对象是IE还是其它
    var xml; //全局变量,接收浏览对象
    function Ajax(){
        if(window.ActiveXObject) //如果是IE浏览器
            xml=new ActiveXObject("Microsoft.XMLHTTP");//创建IE浏览器对象
        else if(window.XMLHttpRequest)//如果不是IE浏览器
            xml=new XMLHttpRequest();
        xml.open("get","ValidUser.aspx?userId="+变量+"randomInfo="+Math.random(),true);//"randomInfo="+Math.random()解决IE的缓存BUG
        //open方法参数
        //get/post表示发送方式
        //第二个参数是目标地址
        //第三个参数是true为异步,flase为同步,一般使用异步
        xml.send(null);//向服务器发送请求,一般是Null如果没有需要带的数据。
        //等待服务器返回结果
        xml.onreadystatechange=CallBack;
    }
    //检测,跟踪服务器的数据变化
    function CallBack()
    {
        if(xml.readyState==4)//0表示初始化4表示服务器已经将数据发送到客户端了。
        {
            if(xml.status == 200)//状态码,标识数据是否是成功的
            {
                document.getElementById("").innerHTML = xml.ResponseText;//获取异步数据
            }
        }
        else
        {
            document.getElementById("").innerHTML = "正在读取数据......";
        }
    }


    还有两个重要的方法
    response.Flush();//向客户端发送当前所有缓冲的输出
    response.close();//关闭 到客户端的套接字连接

    Ajax的核心功能就是异步无刷新获取后台服务器数据。

    VS2010内的AJAX控件
0 0
原创粉丝点击