ajax——XMLHttpRequest

2021-06-15 22:04

阅读:519

1.建立XMLHttpRequest对象。

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

         var xmlhttp;//定义全局变量   
	//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 

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;
                        }
                    }
                }


评论


亲,登录后才可以留言!