您的位置：首页 > 理论基础 > 计算机网络

深入了解Ajax之XMLHttpRequest

2013-04-17 09:43 393 查看 
深入了解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:制造xhrvar 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的哪？
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航