ajax,json学习笔记（二）XMLHttpRequest对象

原生的ajax通过XMLHttpRequest对象实现，就是我们看到的XHR

XHR对象（IE6不含）

1、构造

    var request;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    }else{
        request = new ActiveXObect("Microsoft.XMLHTTP");
    }

2、通过XMLHttpRequest发送请求

    消息头：open(method,url,async):(发送请求方法，请求地址，请求同步/异步）默认true)
        设置后可以调用http请求了
    消息主体：send(String)
        通过send发送请求
    一般post请求不通过send直接发请求
        open("post","create",true)
        request.setRequestHeader("Contend-type","application/x-www-form-urlencoded");
            // 写在open和send之间
        request.send("name=哈哈&sex=男");

    注：Contend-type：http://blog.csdn.net/blueheart20/article/details/45174399
         MediaType，即是Internet Media Type，互联网媒体类型；也叫做MIME类型
        在Http协议消息头中，使用Content-Type来表示具体请求中的媒体类型信息
     例如： Content-Type: text/html;charset:utf-8;

     常见的媒体格式类型如下：
    text/html ： HTML格式
        text/plain ：纯文本格式     
        text/xml ：  XML格式
        image/gif ：gif图片格式   
        image/jpeg ：jpg图片格式
        image/png：png图片格式
    以application开头的媒体格式类型：
    application/xhtml+xml ：XHTML格式
           application/xml     ： XML数据格式
           application/atom+xml  ：Atom XML聚合格式   
          application/json    ： JSON数据格式
           application/pdf       ：pdf格式
           application/msword  ： Word文档格式
           application/octet-stream ： 二进制流数据（如常见的文件下载）
           application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

       另外一种常见的媒体格式是上传文件之时使用的：
        multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式
     以上就是我们在日常的开发中，经常会用到的若干content-type的内容格式。

3、XMLHttpRequest取得响应

    监听readyState属性变化
        0：请求为初始化，open还没调用
        1：服务器连接已建立，open已经调用了
        2：请求被接收，接收到头信息
        3：请求处理中，接收到响应主体
        4：请求已完成，且响应已就绪，响应完成了
    request.onreadystatechange=function(){        // 监听readyState变化
        if(request.readyState == 4 && request.statue == 200) // 响应完成且请求成功    
        {    // 做一些事情 request.responseText    }    
    }

    
    responseText：获取字符串形式响应数据
    responseXML：获取XML形式响应数据
    status、statusText：以数字和文本形式放回HTTP状态码
    getAllResponseHeader()：获取所有响应报头
    getResponse Header()：查询响应中某个字段的值

4、建立一个XMLHttpRequest异步请求的完整代码

    
        var ajax = function(){
            var request ;
            if (window.XMLHttpRequest){
                request=new XMLHttpRequest();
            }else{
                request=new ActiveXObject("Microsoft.XMLHTTP");
            }
            request.open("get","http://localhost:8080/MyFirstSSM/listCategory",true);
            request.send();
            request.onreadystatechange=function(){        // 监听readyState变化
                if(request.readyState == 4){
                    if(request.status == 200){
                        // 直接获取后台数据
                    $("#test2").text("${cs}");
                        console.log("success");    
                    }    
                    else{
                        console.log("error");
                    }    
                }
            }
        }
        $("#test1").click (ajax);

5、json用于大量数据返回

后面讲JSON