浅析ajax
1.什么是AjaxAjax:是Asynchronous Javascript And XML的简写,即异步JavaScript和XML 2.如何创建XHR对象以下是一个跨浏览器创建XHR对象的函数: function createXHR() { if (typeof XMLHttpRequest !== "undefined") { return new XMLHttpRequest(); }else if{ if (typeof ActiveXString != "undefined") { var versions = [ "MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp" ]; for ( var i = 0,len = versions.length; i < len; i++) { try { var xhr = new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (error) { // ... } } } return new ActiveXObject(arguments.callee.activeXString); }else { throw new Error("No XHR object avaliable."); } } XMLHttpRequest这个对象的属性:
当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态,直到请求被处理,然后才接收一个回应。readyState是XHR请求的状态属性,它本身有5个属性值:
3.实现Ajax的步骤A.创建一个XHR对象 var xhr= createXHR(); B.设置响应HTTP请求状态变化的函数 xhr.onreadystatechange = function() { if(xhr.readyState==4){ if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){ xxx.innerHTML = xhr.responseText;//刷新了xxx中的数据 } else { alert("Request was failed:"+xhr.status); } } }; C.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及表示是否异步发送请求的布尔值 xhr.open("get","getAjaxData.php",true);//true表示异步发送请求 D.设置自定义请求头部(可选) xhr.setRequestHeader("myHeader","myValue");//jsonp跨域请求时会用到自定义的头部 E.发送http请求 xhr.send(null);//作为请求主体发送的数据,无数据必须传入null,post请求时经常会发送数据 完整代码如下: var xhr= createXHR(); xhr.onreadystatechange = function() { if(xhr.readyState==4){ if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){ xxx.innerHTML = xhr.responseText; } else { alert("Request was failed:"+xhr.status); } } }; xhr.open("get",true); xhr.setRequestHeader("myHeader","myValue"); xhr.send(null); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |