js原生Ajax(十四)

一、XMLHttpRequest    【使用XMLHttpRequest时，必须将html部署到web服务器中】
1) 指定请求
1、实例化
eg：

    var http = new XMLHttpRequest();

http为实例化的XMLHttpRequest对象，该对象可以重用，但是这将会终止之前通过该对象挂起的任何请求。

2、指定请求
open(method,url,async)
参数：    
method：请求的类型；GET 或 POST    等
url：文件在服务器上的路径
async：true(异步)或 false(同步)【默认值为true】
eg:

    http.open("GET","data.xml");

3、设定请求头【请求体是否传递数据来调用】
setRequestHeader(key,value);
如果有请求头，需要调用该方法进行设定。
参数：
    1.key:  传递数据类型属性
    2.value:  对应的属性值  
eg:

    //将Content-Type设置为表单格式
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");

注意：
    XMLHttpRequest将自动添加以下这些请求头以防止伪造，我们无法向setRequestHeader()传递以下请求头。
    Accept-Charset        TE                 Content-Transfer-Encoding
    Accept-Encoding        Date            Trailer
    Connection            Expect            Transfer-Encoding
    Content-Length        Host            Upgrade
    Cookie                 Keep-Alive        User-Agent
    Cookie2                Referer            Via
    
4. 指定可选的请求主体并向服务器发送
send(param)
参数：
    param: 请求主体内容，如果没有，为null或者省略。
eg:

    /*
      使用POST方法发送纯文本给服务器
    */
    function postMessage(url,msg){
        var request = new XMLHttpRequest();
        request.open("POST",url);
        request.setRequestHeader("Content-type","text/plain;charset=UTF-8");
        request.send(msg);
    }

2) 取得响应
1、HTTP状态码:
a、status    【以数字形式返回HTTP状态码】    
200      OK
404      Not Found
403   forbidden    JSONP【解决跨域请求，一般后台处理该问题】
500   后台代码异常
b、statusText    【以文本形式返回HTTP状态码】    
OK    
Not Found

2、获取响应的一些相关信息
getResponseHeader()　　获取指定响应头
getAllResponseHeaders() 获取所有响应头
responseText                      获取文本形式的响应体
responseXML                     获取Document形式的响应体
readyState                          返回HTTP请求状态【每当 readyState 改变时，就会触发 onreadystatechange 事件】

readyState相关状态值：
0    open()尚未调用    UNSENT
1    open()已调用    OPENED
2    接收到头信息    HEADERS_RECEIVED
3    接收到响应主体    LOADING
4    响应完成        DONE【响应完成，可以获取响应体】

3、readystatechange 请求状态改变事件【使用时前面需添加on  eg：onreadystatechnage】
当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件
eg:

    /*
      获取HTTP响应
    */
    function getText(url,callback){
        var http = new XMLHttpRequest();
        http.open("GET",url);
        request.onreadystatechange = function(){
            //如果请求完成，并且请求成功
            if(http.readyState === 4 && http.status ===200){
                var type = http.getResponseHeader("Content-type");
                if(type.match(/^text/)){    //如果响应是文本
                    callback(http.responseText);//执行回调函数
                }
            }
        };
        http.send(null);
    }

 
3) 响应解码
1.MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性解析
2.MIME类型为XML文档类型时，使用responseXML属性解析
3.如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。
通过responseText接受到它，可以把它传递给JSON.parse()方法来解析成js对象。

二、使用自己的方法封装原生ajax
eg：

    function myAjax(method,url,param,success,fail){
        //后台服务器地址及端口号
        var baseUrl =  'http://134.175.154.93:8099';
        //前端传递给后台的参数
        //handle当内部的异步执行成功的回调函数，需要将后台返回的数据交给handle
        //1、创建XMLHttpRequest 对象
        var http = new XMLHttpRequest();
        //处理GET方式携带参数
        if(method === 'GET' && param){
            url += '?'+encodeFormData(param);
        }else{
        
        }
        //2、向服务器发送请求
        http.open(method,baseUrl+url);
        //3、HTTp状态值readystate改变时的响应事件
        http.onreadystatechange = function(){
            //如果HTTP返回状态码为200(请求成功)且返回HTTP状态值为4(响应完成)时执行成功回调函数success()
            if (http.status === 200 && http.readyState === 4) {
                console.log('请求成功！！！');
                success(JSON.parse(http.responseText));    //将返回的JSON字符串解析成js对象并作为回调函数的参数
            }
            //如果返回HTTP状态码不为200(不是请求成功)执行失败回调函数fail()
            if(http.status !== 200){
                fail(http.responseText);
            }
        };
        //处理POST方式携带参数
        if (method === 'POST' && param) {
            //设置请求头其Content-Type类型为表单格式
            http.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
            //4、将请求发送给服务器并携带数据信息
            http.send(encodeFormData(param));
        }else{
            //4、将请求发送给服务器不携带数据信息
            http.send();
        }
        
    }
    
    //将js的对象转换成表单格式数据
    function encodeFormData(data){
        if(!data){
            return "";
        }
        var pairs = [];
        for(var name in data){
            if(!data.hasOwnProperty(name)){
                continue;
            }
            if(typeof data[name] == "function"){
                continue;
            }
            var value = data[name].toString();
            name = encodeURIComponent(name.replace("%20","+"));//编码名字
            value = encodeURIComponent(value.replace("%20","+"));//编码值
            pairs.push(name+"="+value);
        }
        return pairs.join('&');
    }