js-ajax相关基础知识整理

ajax的核心是xmr对象，要调用的第一个方法是open()，他接受3个参数：要发送的请求类型("get","post")、请求的URL和表示是否异步发送请求的布尔值。

xhr("get",url,false);

调用open()方法并不会真正发送请求，而是启动一个请求已备发送，要发送特定请求，必须像下面这样调用send（）方法

xhr.send(null);这个null对于某些浏览器是必须的。调用send（）方法后，请求就会被分派到服务器。在收到响应后，响应的数据会自动填充xhr对象那个的属性，相关属性如下:

responseText:作为响应主体被返回的文本。

responseXML:如果响应的内容类型是:"text/html"或"application/xml",这个属性中将保存包含响应数据的xmldom文档。

status:响应的http状态(200表示成功,304表示请求的资源并没有修改 ，可以直接使用浏览器中缓存的版本)，为了收到适当的响应，应该像下面这样检查上述两张状态代码：

statusText：http状态说明(ok,fail)。

  if((xmlHttpReg.status>=200 && xmlHttpReg.status<300 )|| xmlHttpReg.status==304){
                   // console.log(xmlHttpReg.responseText);
                document.getElementById("resText").innerHTML = xmlHttpReg.responseText;
                document.getElementById("box1").innerHTML = xmlHttpReg.status;

            }else{
                  console.log("fail"+xmlHttpReg.status)
            }

根据返回的状态码，可以显示服务端返回的内容，我们建议通过status来决定下一步操作。

上面通过的是同步请求，如果要发送异步请求，我们需要检测readyState属性，该属性表示请求响应过程的当前活动阶段，这个属性可取的值如下：

0：未初始化，尚调用open（）方法

1：启动，已经调用open()方法，但尚未调用send（）方法;

2：发送，已经调用send（）方法，但尚未接收到响应。

3：接收，已经接受到部分响应数据

4：完成，接受到全部数据，而且已经可以在客户端使用了，如下所示：

  if(xmlHttpReg.readyState==4) {
                if ((xmlHttpReg.status >= 200 && xmlHttpReg.status < 300 ) || xmlHttpReg.status == 304) {

                    document.getElementById("resText").innerHTML = xmlHttpReg.responseText;
                    document.getElementById("box1").innerHTML = xmlHttpReg.status;
                   // console.log(xmlHttpReg.responseXML);

                } else {
                    console.log("fail" + xmlHttpReg.status)
                }
            }

只要readyState属性值由一个值变成另外一个值，都会触发onreadystatechange事件。

get请求最常用与向服务器查询某些信息，可以将字符串参数追加到url末尾，以便将信息发送到服务器，判断url后面的参数如下代码

 function addURLParam(url,name,value){

                url += (url.indexOf("?")==-1? "?":"&");
                url +=encodeURIComponent(name)+"="+encodeURIComponent(value);  
                return url;

            }
            var url = "b.txt",
                url  = addURLParam(url,"name","zoumm");
            xmlHttpReg.open("get", url, true);
           // xmlHttpReg.setRequestHeader("myheader","myvalue");
            xmlHttpReg.send(null);
            xmlHttpReg.onreadystatechange = doResult; //设置回调函数

 post通常用于向服务器发送应该被保存的数据，post请求应该把数据作为请求的主体提交，

详细代码：

<script type="text/javascript">

window.onload = function(){
    ajax();
}
    function ajax() {
        //先声明一个异步请求对象
        var xmlHttpReg = null;
        if (window.ActiveXObject) {//如果是IE

            xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");

        } else if (window.XMLHttpRequest) {

            xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
        }

        //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
        if (xmlHttpReg != null) {
            //get请求
            function addURLParam(url,name,value){

                url += (url.indexOf("?")==-1? "?":"&");
                url +=encodeURIComponent(name)+"="+encodeURIComponent(value);
                return url;

            }
            var url = "xml.xml",
                    url  = addURLParam(url,"name","zoumm");
            xmlHttpReg.open("get", url, true);//1"http://freegeoip.net/json?callback=handLeResponse
            // xmlHttpReg.setRequestHeader("myheader","myvalue");
            xmlHttpReg.send(null);
            xmlHttpReg.onreadystatechange = doResult; //设置回调函数

        }

        //回调函数
        //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应

        //设定函数doResult()
        function doResult() {
            if(xmlHttpReg.readyState==4) {
                if ((xmlHttpReg.status >= 200 && xmlHttpReg.status < 300 ) || xmlHttpReg.status == 304) {
                    var arrp= document.getElementsByName("num"),
                            arrSum= document.getElementsByName("snum"),
                        xLength=xmlHttpReg.responseXML.documentElement.getElementsByTagName("row");

                    for(var i=0;i<xLength.length;i++){
                              var  xGETAttri =xLength[i].getAttribute("object"),
                                   yGETAttri =xLength[i].getAttribute("curyl");
                                   arrp[i].innerHTML =xGETAttri;
                                   arrSum[i].innerHTML =yGETAttri;
                                   console.log( yGETAttri);

                    }


                } else {
                    console.log("fail" + xmlHttpReg.status)
                }
            }

        }


    }


</script>