深入了解Ajax之XMLHttpRequest

深入了解XMLHttpRequest可以更深入理解AJax原理

1 先进行一个get请求

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function createXHR() {
    var xhr = null;
    //AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}


// 1:制造xhr
var xhr = createXHR();

function vote() {

    // 2: 打开连接
    xhr.open('GET','./06-restest.PHP',true);

    // 3: 发请求
    xhr.send(null);


    // 绑定状态变化的回调函数
    xhr.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200) {
            /*
             *ReadyState取值 描述 
            0  描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。 
            1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 
            2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 
            3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。 
            4  描述一种"已加载"状态；此时，响应已经被完全接收。 
             *
             **/
            var str = '';
            str = '状态码是' + this.status + '<br />';
            str = str + '状态文字是' + this.statusText + '<br />';
            str = str + '返回类型是:' + this.getResponseHeader('Content-Type') + '<br />';

            str = str + '返回的主体长度是' + this.getResponseHeader('Content-Length') + '<br />';
            str = str + '返回的主体内容是' + this.responseText + '<br />';

            str = str + '所有头信息' + this.getAllResponseHeaders();
            document.getElementById('progress').innerHTML = str;
        }
    }
}

function xhrstop() {
    xhr.abort();
}


</script>

<style type="text/css">
</style>
</head>
    <body>
        <div>
        <p><img src="wmc.jpg" /><p>
        <p><input type="button" value="测试各种返回值" onclick="vote();" /></p>
        <p><input type="button" value="中断" onclick="xhrstop();" /></p>
        </div>
        <div id="progress"></div>
    </body>
</html>

PHP 代码：

<?PHP
sleep(5);


$str = 'abcdefg';
echo str_shuffle($str);

运行结果：

2 进行一个post请求

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function createXHR() {
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}




function ajaxreg() {
    /*
    步骤1: 打开到后台服务器连接(POST连接)
    步骤2: 收集表单的数据
    步骤3: 发送数据
    步骤4: 监听,回调等
    */


    // 0:制造xhr
    var xhr = createXHR();

    // 1: 打开POST连接
    xhr.open('POST','./07-ajaxreg.PHP',true);

    xhr.onreadystatechange = function() {
        if(this.readyState == 4) {
            alert(this.responseText);
        }
    }



    // 2: 收集表单数据
    var un = document.getElementsByName('username')[0].value;
    var eml = document.getElementsByName('email')[0].value;

    // 3: send
    //alert('username='+un+'&email=' + eml);下面这个头信息不能少
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send('username='+un+'&email=' + eml);


    return false;
}




</script>

<style type="text/css">
</style>
</head>
    <body>
        <h1>ajax注册</h1>
        <div id="regres"></div>
        <form action="07-ajaxreg.PHP" method="post" target="regzone" onsubmit="return ajaxreg();">
            <p>用户名:<input type="text" name="username" /></p>
            <p>邮件地址:<input type="text" name="email" /></p>
            <p><input type="submit" name="注册" /></p>
        </form>
        <iframe width="0" height="0" frameBorder="0" name="regzone"></iframe>
    </body>
</html>

PHP 代码：

<?PHP
print_r($_POST);

jquery是怎样封装post的哪？

原文链接：https://www.f2er.com/ajax/166515.html

深入了解Ajax之XMLHttpRequest

猜你在找的Ajax相关文章