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可以进行文件提交;

posted @ 2013-03-03 18:27  秋壶冰月  阅读(1273)  评论(0编辑  收藏