AJAX
发布时间:2020-12-15 21:54:30 所属栏目:百科 来源:网络整理
导读:Ajax 是Asynchronous Javascript and XML的简写,对它最多的人是无非是局部刷新技术,它可以在不刷新页面的情况下向后台发送或者请求数据。它的核心是XMLHttpRequest对象(简称XHR),在IE7+、Firfox、Opera、Chrome、Safari都支持原生的XHR对象即显式使用var
Ajax 是Asynchronous Javascript and XML的简写,对它最多的人是无非是局部刷新技术,它可以在不刷新页面的情况下向后台发送或者请求数据。它的核心是XMLHttpRequest对象(简称XHR),在IE7+、Firfox、Opera、Chrome、Safari都支持原生的XHR对象即显式使用var xhr = new XMLHttpRequest()就可以直接创建此对象。如果要支持IE7以下版本的,则需要使用ActiveX对象来实现。随着WindowXP的退休,相信用到IE7以下版本的几乎没有了,但还是提供以前的兼容实现方式: function createXHR () { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { var version =["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.2.0"],i,len; for (i = 0.len = version.length; i < len; i++) { try{ new ActiveXObject(version[i]); arguments.callee.activeXString = version[i]; break; } catch (ex){ //dosomething(); } }; return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available!"); }; }下面是你所看见AJAX最原生的js实现方式,现在jquery等框架已经完全封装,下面讲解每个步骤的作用以及使用。 var xhr = new createXHR(); xhr.onreadyStatechange = function() { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300) { //http状态为成功 alert(xhr.responseText); } else { alert("请求没有成功!状态说明:" + xhr.statusText); } }; } xhr.open("get","example.jsp",true);//启动一个请求以备发送 xhr.send(null); //当请求类型为GET时,参数为null;为POST时,传送的是作为请求主体的数据。responseText:作为响应主体返回的文本。 responseXML:返回响应内容为"text/xml""application/xml"这个属性将保存XML DOM文档。 status:HTTP状态码。 statusText:HTTP状态说明。 以上关于HTTP请求的请参照HTTP协议。 首先将open函数,它有三个参数:HTTP请求的类型(get,post,delete等),请求的url,是否使用异步发送方式。 什么是异步方式?先看看非异步方式实现方式: var xhr = new createXHR(); xhr.open("get",false); //第三个参数为false,为同步方式 xhr.send(null); if (xhr.status >= 200 && xhr.status < 300) { //http状态为成功 alert(xhr.responseText);//处理数据 } else { alert("请求没有成功!状态说明:" + xhr.statusText); }很容易看到,只有到xhr在浏览器得到服务器方面返回的数据之后才会往下执行; 如果使用异步,只需要对xhr对象的readystaty的值进行监听即可, readyStatey可以取以下值: 0:未初始化,尚未调用open(). 1:启动,已经调用open(),还未调用send(). 2:发送,已经调用send(),但未收到响应。 3:接收,已经收到部分响应数据。 4:完成,已经收到全部响应数据。 所以在判断时会使用readyState==4. 它依然可以往下执行js代码。 //----------------------------------------------------------------// 在xhr.open()之后,send()之前可以设置请求的头部信息关于头部信息,请参考HTTP协议, xhr.open("post",true); setRequestHead("Content-Type","application/x-www-form-urlencoded"); var form = document.getElementById("user-info"); xhr.send(serialize(form)); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |