zoukankan      html  css  js  c++  java
  • ajax——XMLHttpRequest

        XMLHttpRequest对象。能够让ajax程序在不又一次载入的页面的情况下更新页面数据,页面载入完毕后从server接受发生数据。这样既减轻了server负担又回顾了响应速度,缩短了用户的等待时间,让web程序更类似于传统的桌面应用。

    XMLHttpRequest对象4步用法:

    1.建立XMLHttpRequest对象。

        建立XMLHttpRequest对象时。要依据浏览器的不同版本号去建立,由于IE5.0和iE6.0,开发者就能够在WEB页面内部使用XMLHTTP ActiveX组件扩展自身的功能;而从IE7版本号以上以及其它厂商的浏览器,開始创建继承XML的代理类XMLHttpRequest,所以创建上会有不同。

             var xmlhttp;//定义全局变量   
    <span style="white-space:pre">	</span>//1.创建xmlhttprequest对象
                if (window.XMLHttpRequest) {
                    //firefox等其它浏览器、ie7、8及以上版本号适用
                        xmlhttp = new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    } else if (window.ActiveXObject) {
                        //ie5、6版本号版本号适用
                        var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                        for (var i = 0; i < activexName.length; i++) {
                            try {
                                    xmlhttp = new ActiveXObject(activexName[i]);
                                break;
                            } catch (e) {
    
                            }
                        }
                    }
                    if (xmlhttp==undefined || xmlhttp==null) {
                        alert("当前浏览器不支持创建xmlhttprequest对象");
                        return;
                    }

    2.注冊回调函数

                    //2.注冊一个回调方法
                    xmlhttp.onreadystatechange = callback;

    3.使用open方法设置和server交互的信息,并设置发送的数据。

    open方法中的也有get和post的提交方式。

    post的方式时。要设置它的头文件。而且须要发送时须要将參数写的send中

                    //GET方式交互
                    //3.设置和server交互的对应參数
                    xmlhttp.open("GET", "HtmlPage1.ashx?

    username=" + userName, true); ////设置server端发送的数据。启动和server的交互 xmlhttp.send(null);


                    //POST方式交互
                    //3.利用open,设置和server交互的对应參数
                    xmlhttp.open("POST", "HtmlPage1.ashx", true);
                    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");              //POST方式所须要添加的代码,头文件
                    //设置server端发送的数据。启动和server的交互。以及传递參数
                    xmlhttp.send("username=" + userName);

    4.在回调函数中推断交互是否完毕,响应是否正确,并依据须要获取server端返回的数据,更新页面内容。

                    //回调函数
                    function callback()
                    {
                        //5.推断和server器的交互是否完毕,server端是否正确返回了数据
                        if (xmlhttp.readyState == 4) {//表示server端的交互已经完毕
                            if (xmlhttp.status == 200) {//表示正确的返回了数据
                                //纯文本的方法接受方法
                                var message = xmlhttp.responseText;
                                //xml数据相应的dom对象的接受方法
                                //使用的前提是,server端须要设置
                                //记忆向div标签中加入文本内容
                                var div1 = document.getElementById("message");
                                div1.innerHTML = message;
                            }
                        }
                    }

    XMLHttpRequest的具体属性和方法:

    open() 指定server端交互的http方法(post or get)、url地址、是否异步等信息
    send() 向server发出请求。假设採用异步。该方法马上返回。其内容能够是null。dom对象。输入流。字符串
    setRequestjeader() 设置http的头文件,在open方法以后调用。

    getallResponseHeaders() 包括http的全部对应头文件信息。
    getResponseHeader() 返回http相应头文件里指定的键名header相应值。
    abort() 停止当前http请求,相应的xmlhttprequest对象复位到未初始化的状态
    readyState 异步操作的状态:未初始化(0),正在载入(1)。已载入(2)。交互(3)。已完毕(4)
    onreadystatechange() 请求状态改变的事件触发器。

    (可注冊函数)

    responseText server响应的文本内容。
    responseXML server响应的XML内容相应的DOM对象
    status server返回的HTTP状态码。200成功。
    statusText server返回状态码的文本信息

    总结:

        在Ajax应用程序中,XMLHttpRequest对象负责将用户信息以异步通信地发送到server端。并接收server响应信息和数据。




  • 相关阅读:
    管理经济学
    第五章 文件管理
    内存管理
    第三章 进程调度与死锁
    操作系统概论 第二章
    计算机系统
    企业与政府信息资源管理
    信息资源管理的标准与法规
    议论文
    如何从大量的 url 中找出相同的 url
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/7273230.html
Copyright © 2011-2022 走看看