码迷,mamicode.com
首页 > Web开发 > 详细

原生的AJAX写法,可以直接复制过来套用

时间:2015-07-24 20:07:53      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

方法一:

function createXMLHTTPRequest() {
                //1.创建XMLHttpRequest对象     
                //这是XMLHttpReuquest对象无部使用中最复杂的一步     
                //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码     
                var xmlHttpRequest;
                if (window.XMLHttpRequest) {
                    //针对FireFox,Mozillar,Opera,Safari,IE7,IE8     
                    xmlHttpRequest = new XMLHttpRequest();
                    //针对某些特定版本的mozillar浏览器的BUG进行修正     
                    if (xmlHttpRequest.overrideMimeType) {
                        xmlHttpRequest.overrideMimeType("text/xml");
                    }
                } else if (window.ActiveXObject) {
                    //针对IE6,IE5.5,IE5     
                    //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中     
                    //排在前面的版本较新     
                    var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
                    for (var i = 0; i < activexName.length; i++) {
                        try {
                            //取出一个控件名进行创建,如果创建成功就终止循环     
                            //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建     
                            xmlHttpRequest = new ActiveXObject(activexName[i]);
                            if (xmlHttpRequest) {
                                break;
                            }
                        } catch (e) {
                        }
                    }
                }
                return xmlHttpRequest;
            }



//post方法
            function post() {
                //创建AJAX原生环境后用变量接收
                var req = createXMLHTTPRequest();
                if (req) {
                    //传参方式,url,是否异步(asyn)
                    req.open("POST", "webAjax.ashx", true);
                    //post必须设置这个类型
                    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    //必须带这个传参,就算你要调用的方法不带参数,不管是get还是post有参传参,没参传空
                    req.send("");
                    //回调函数,当 readyState 等于 4 且状态为 200 时,表示响应已就绪,可以做数据操作了
                    req.onreadystatechange = function () {
                        if (req.readyState == 4) {
                            if (req.status == 200) {
                                //req.responseText可以返回后台的返回内容
                                alert("success");
                            } else {
                                alert("error");
                            }
                        }
                        
                    }
                }
            }



//get方法
            function get() {
                var req = createXMLHTTPRequest();
                if (req) {
                    req.open("GET", "AJAXTest.aspx", true);
                    req.onreadystatechange = function () {
                        if (req.readyState == 4) {
                            if (req.status == 200) {
                                alert(req.responseText);
                            } else {
                                alert("error");
                            }
                        }
                    }
                    req.send(null);
                }
            }

方法二:

 //以get方法为例
            var xmlhttp;
            function loadXMLDoc(url, cfunc) {
                //创建环境
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //创建回调函数
                xmlhttp.onreadystatechange = cfunc;
                //get方式发送数据
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }
            function myFunction() {
                //调用上述的AJAX方法,传入url和回调函数的实现方法(响应就绪时会执行)
                loadXMLDoc("/ajax/test1.txt", function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    }
                });
            }

 

原生的AJAX写法,可以直接复制过来套用

标签:

原文地址:http://www.cnblogs.com/llcdbk/p/4674108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!