JavaScript原生Ajax

     用Jquery的ajax，用的比较多，以至于JavaScript的ajax，都忘得差不多了！

1、先获取XMLHttpRequest对象，这是ajax的基础.

                /*获取XMLHttpRequest对象 主流浏览器兼容（IE、Firefox、Chrome）*/
                function getXMLHttpRequest() {
                    if (typeof XMLHttpRequest == "undefined") {
                        XMLHttpRequest = function () {
                            try {
                                return new ActiveXObject("Msxmls.XMLHTTP.6.0");
                            } catch (e) {
                            }
                            try {
                                return new ActiveXObject("Msxmls.XMLHTTP.3.0");
                            } catch (e) {
                            }
                            try {
                                return new ActiveXObject("Msxmls.XMLHTTP");
                            } catch (e) {
                            }
                            return false;
                        };
                    }
                    return new XMLHttpRequest();
                }    
            

2、使用XMlHttpRequest对象,进行异步,下面是Post方式

            function ajaxIsPost() {
            /*获取XMLHttpRequest对象(通用)*/
            var request = getXMLHttpRequest();
            if (request) {
                /*参数一 主要是指定"post"或者"get"方式提交，参数二指向页面地址或者方法 ，参数三是否用异步(asyns):true(异步)或false(同步)*/
                request.open("post", "GetData.ashx", true);
                /*向请求添加HTTP头*/
                request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                /*每当readyState 属性改变时，就会调用onreadystatechange*/
                request.onreadystatechange = function () {
                    /*可看具体含义*/
                    if (request.readyState == 4 && request.status == 200) {
                        var msg = request.responseText;  //获得字符串形式响应的数据
                        if (msg == "ok") {
                            window.open("HtmlPage1.html", "_blank");//Js的方式 打开一个窗口
                        }
                    }
                };
                request.send("data=" + "hello"); //以post方式提交数据
            }
        }              
        

3、使用XMlHttpRequest对象,进行异步,下面是Get方式

          function ajaxIsGet() {
            var btn = document.getElementById("btnSubmit");
            btn.onclick = function () {
                var request = getXMLHttpRequest();
                if (request) {
                    request.open("get", "AjaxIsGetMethodSubmit.ashx?key=" + "12", true);
                    request.onreadystatechange = function () {
                        if (request.readyState == 4 && request.status == 200) {
                            var txt = request.responseText;
                            if (txt != "" && txt != "undefined") {
                                alert(txt);
                            }
                        }
                    }
                    request.send(null);
                }
            };
        }
        

4、最后调用

         window.onload = function () {
            ajaxIsPost();  //调用post方式进行异步
            ajaxIsGet();   //调用get方式进行异步
            };
        

           XMLHttpRequest重要的属性：

属性	描述
readyState	0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200:交易成功(OK) 201:提示知道新文件的URL(Created) 202:接受和处理、但处理未完成(Accepted) 203:返回信息不确定或不完整(Non-Authoritative Information) 204:请求收到，但返回信息为空(No Content) 304:该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制(NOT MODIFIED) 400:错误请求，如语法错误(Bad Request) 401:请求授权失败(Unauthorized) 402:保留有效ChargeTo头响应(Payment Required) 403:请求不允许(由于服务器上文件或目录的权限设置导致资源不可用)(Forbidden) 404:没有发现文件、查询或URl(没有找到指定的资源)(Not Found) 500——服务器产生内部错误(Internal Server Error) 501——服务器不支持请求的函数(Not Implemented)

上面status属性的状态及描述只是部分,全部的比较多，只列下常见的。

Post方式与Get方式区别:

Get是将数据放在url地址栏中,如？key="12"，如果有多个参数的话，可以后跟&value=hello,get方式提交数据，本身没有长度限制，只是浏览器进行了限制，如果使用ajax的方式在后台获取数据，可考虑get数据的限制；get页面可以被搜索引擎抓取;

Post本身没有数据的限制，实际运用的时候，还是会有部分的限制，这就要看服务器处理数据的能力，如IIS版本不一样，限制数据量大小也不一样；post可以进行文件提交;