深入了解Ajax之XMLHttpRequest

来源：互联网发布：xd破解id软件编辑：程序博客网时间：2024/05/22 01:29

深入了解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:制造xhrvar 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代码：

<?phpsleep(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代码：

<?phpprint_r($_POST);

jquery是怎样封装post的哪？