XMLHttpRequest 学习（二）——封装一个ajax

1、发起一个HTTP的步骤：

1.    创建一个 XMLHttpRquest 实例， 　　　

var xhr=new XMLHttpRequest();

　　2.初始化请求，

xhr.open(method,URL,async);

　　3.设置请求头信息，按需设置，不需要设置就到下一步，用 POST 方法时，必须将请求头设置为：

xhr.setRequestHeader("Content-Type","appivation/x-www=form-unurlencoded");//在POST和PUT请求需要设置该信息

　　4.绑定相关事件，异步请求中，readystatechange 必须班绑定，其他事件按需绑定

        //第四步 设置回调函数和xhr事件,在异步请求中必须绑定onreadystatechage事件，readyState改变就触发
        xhr.onreadystatechange=callback;//绑定一个函数
        //或者用匿名函数
        xhr.onreadystatechange=function (){
            if(xhr.readyState ==4 ){
                if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                    //响应信息返回后处理，在页面提示用户
                }
                else{//返回消息失败
                    alert("响应失败！");
                }
            }
            else{//请求未发送的处理
                alert("请求未完成！")
            }
        }
        //send()调用后开始触发
        xhr.onloadstart=loadState;
        
        //文件上传可能需要设置这些事件
        //上传文件开始
        xhr.upload.onloadstart=uploadStart;
        //显示上传进度
        xhr.upload.onprogress=uploadProgress;
        //上传完成，成功
            //出现异常或者用户取消，激发abort、timeout、error事件，触发loadend事件
            xhr.onabort=abort;
            xhr.ontimeout=timeeout;
            xhr.onerror=error;
        xhr.upload.onload=upload;
        //上传结束，可能不成功
        xhr.upload.onloadend=uploadEnd;
        
        //显示下载进度
        xhr.onprogress=loadProgress;
        //出现异常或者用户取消，激发abort、timeout、error事件，触发loadend事件
        xhr.onabort=abort;
        xhr.ontimeout=timeeout;
        xhr.onerror=error;
        //下载完成，可能不成功
        xhr.onloadend=loadEnd;

   5.发送，在POST需要传递参数，最后将参数转码。

 

//第五步 发送请求,在POST请求中需要给send传递参数
        xh.send();

 

 下面就根据上面的步骤，建立一个get请求：

HTML:

<div>
        <form >
            <fieldset>
                <legend> xhr提交表单 </legend>
                <lable>姓名：</lable>
                <input type="text" id="name" name="name" value="周其军" placeholder="请输入您的姓名" />
                <br>
                <lable>邮箱：</lable>
                <input type="email" placeholder="请输入邮箱" id="email" name="email" />
                <br/>
                <input type="button" id="button" value="提交" /> </fieldset>
        </form>
    </div>
    <div id="userInfor">
             <!--在这显示返回的内容-->
    </div>

 

JS:

window.onload=function(){ 
var button=document.getElementById("button"); //获取button
    var userInfor=document.getElementById("userInfor");
    button.addEventListener("click",function(){
        var url="demo.php";
        var name=document.getElementById("name").value;
        var email=document.getElementById("email").value;
        //alert(name+email);
        url+="?name="+name+"&email="+email;
        var xhr=new XMLHttpRequest();
        /*xhr.setRequestHeader("jack","hahah");*/
        xhr.open("GET",url,true);//初始化一个异步请求
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    //将用户填写的信息显示出来
                    alert(xhr.response);
                }
                /*else{
                    alert("响应不成")
                }*/
            }
            /*else{
                alert("请求未发送！");
            }*/
        }
        xhr.send();
    });

 

 

PHP:

<?php
 header("Content-type: text/html; charset=utf-8"); 
echo "<h2>名字：{$_REQUEST['name']}</h2>
       <span>邮箱：{$_REQUEST['email']}</span>";    

?>

 

请求成功了，但是我想返回 html 片段，然后追加到 id=userInfor  的 div 里面，不知道怎么弄。也没搜索的可靠的做法。也是是我的 PHP 不对？？

 

 

2、封装一个 ajax 

 

        var ajax = {}; //封装一个ajax
        ajax.x = function () { //定义x,用于创建xhr。
            if (typeof XMLHttpRequest !== 'undefined') {
                return new XMLHttpRequest();
            }
            var versions = [
        "MSXML2.XmlHttp.6.0"
        , "MSXML2.XmlHttp.5.0"
        , "MSXML2.XmlHttp.4.0"
        , "MSXML2.XmlHttp.3.0"
        , "MSXML2.XmlHttp.2.0"
        , "Microsoft.XmlHttp"
    ];
            var xhr;
            for (var i = 0; i < versions.length; i++) {
                try {
                    xhr = new ActiveXObject(versions[i]);
                    break;
                }
                catch (e) {}
            }
            return xhr;
        };
        //定义 send()
        ajax.send = function (url, callback, method, data, async) {
            if (async === undefined) {
                async = true;
            }
            var x = ajax.x();
            x.open(method, url, async);
            x.onreadystatechange = function () {
                if (x.readyState == 4) {
                    callback(x.responseText)
                }
            };
            if (method == 'POST') {
                x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            }
            x.send(data)
        };
        //定义 get 请求
        ajax.get = function (url, data, callback, async) {
            var query = [];
            for (var key in data) {
                query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
            }
            ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
        };
        //定义 post 请求
        ajax.post = function (url, data, callback, async) {
            var query = [];
            for (var key in data) {
                query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
            }
            ajax.send(url, callback, 'POST', query.join('&'), async)
        };

 

 

 

调用 ajax 的 方法：

 

var button = document.getElementById("button");
        button.addEventListener("click", function () {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var userInfor = document.getElementById("userInfor");
            ajax.get("demo1.php?rand=" + Math.random(), {
                name: name
                , email: email
            }, function () {
                var xhr = ajax.x();
                //alert("aa");
                //alert(xhr.responseText);请求响应了，却没弹出 响应信息
                userInfor.append(xhr.responseText);
            });
        });

 

 

 

博客园插入代码还是很不方便，光标进入代码块后，不能移出来。