AJAX请求总结
|
ajax,是一种异步与服务器通信的方式，可以实现页面无刷新，提高用户体验度。在如今的网站中，到处都是ajax的存在，所以学习ajax用法，也就显得刻不容缓。 只要在页面中的html标签的事件处理脚本或者其他的js代码中调用该异步通信方法就可以完成页面的异步更新。 一、纯js中的用法 1、实现步骤:
s1: 获取一个XMLHttpRequest对象 s2: 编写一个处理函数，绑定到XMLHttpRequest对象的onreadystatechange事件上，该处理函数用于在ajax请求的状态发生变化时进行相应的处理 s3: 在XMLHttpRequest对象上open一个request，形如：xmlHttp.open("GET","status.jsp?id="+Math.random()); s4: setRequestHeader("header","value");可以设置各种header，如果服务器端不需要header信息，也可已省略这一步 s5: send() request 2、获取XMLHttpRequest对象
var xmlHttp; function createXmlHttpRequest() { if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }
3、编写处理函数
function processXXX() { if (xmlHttp.readyState==4) { if (xmlHttp.status==200) { //…… } } } 以通过xmlHttp得到responseText或者responseXML，分别得到服务器端的字符串形式或者xml形式的响应，前者通常是一段可以直接用来更新页面的内容，而后者是xml格式的数据，可以用js取出其中的元素值。根据需要选用一种之一即可。例如更新页面上的一个统计数值的处理函数如下
function processStatistics() { var responseContext; if (xmlHttp.readyState==4) { if (xmlHttp.status==200) { responseContext=xmlHttp.responseText; document.getElementById("statistics").innerHTML=responseContext; } } }
4、发送异步请求
xmlHttp.open("GET","status.jsp?id="+Math.random(),true); xmlHttp.send(null); 一般request参数不多时用GET方式就可以，open的第二个参数是要请求的服务器端的一个url，可以是jsp或者servlet，也可已是struts2 action。如果是struts2 action的话，那么在自定义的action控制器中不要配置返回视图，直接在execute方法中用servlet api拿到PrintWriter、写入要返回的内容并flush+close PrintWriter，在execute方法中return null（不跳转到某个试图）即可。url中的id参数是一个无实际意义的参数，但是非常重要，很多浏览器中都会有cache，请求一个地址时，浏览器会检查cache中是否有最近的该url的响应内容，如果有就不会向服务器发送请求，而是直接返回cache中的内容，这样可以提高浏览的速度。浏览器cache是基于这样一个假设：网页的内容不会在很短的一段时间内更新。但对于ajax，有时需要频繁地进行异步更新（如定时更新页面上的系统状态），所以需要加上一个随机的参数，防止cache中的内容影响页面的更新。open的第三个参数为true表示采用异步方式处理请求，ajax必须用true，一般该参数在缺省情况下都是true。 send方法的参数在GET方式下为null即可，在POST方式下send的参数就是要发送的key-value数据，多条数据之间用&分隔，如果post要以表单的形式发送数据，还需要设置header: setRequestHeader("Content-type","application/x-www-form-urlencoded"); 二、jquery中ajax的用法 1、$obj.load(url,[data]) (1)、作用：将服务器返回的数据直接插入到符合要求的节点之上，用此方法合适。相当于obj.innerHTML=服务器返回的数据 (2)、用法 url:请求地址；data：请求参数，有两种形式， A:请求字符串形式:"name=chang&&age=23" B:对象形式:{"name":"chang","age":23} (3)、注意：当没有请求参数，发送get请求；如果有参数，刚发送post请求；不支持异步。 2、$.get(url,[data],[callback],[type]) (1)、作用 使用get方式向服务器发请求。 (2)、用法 url:请求地址;data为请求参数;callback是一个回调函数，格式如function(data,statusText){},其中data是服务器返回的数据，statusText是服务器返回的状态;type:服务器返回的数据类型，有五种A：html 返回一个html文档，B :text返回的是纯文本，C：json返回的是json字符串，D:xml返回的是一个XML文档，E:script:返回的是一个javascript脚本。 3、$.post(url,[type]) 略。。。作用同get方法 4、$.ajax()方法 (1)、作用 功能最强的底层实现方法。支持get,post方式，支持同步，支持错误处理. (2)、用法 1、url(string):请求地址 2、type(string):GET/POST 3、data(object/string):请求参数。格式如(id,name,key为变量)：{"name":name,"id":id} 或者"key="+key 4、dataType(string):预期服务器返回的数据类型。 有五种A：html 返回一个html文档，B :text返回的是纯文本，C：json返回的是json字符串， D:xml返回的是一个XML文档，E:script:返回的是一个javascript脚本。 5、success(function)：请求成功以后调用的回调函数，有两个参数function(data,textStatus){},其中data为服务器返回的数据，textStatus为描述状态的字符串。 6、error(function):请求失败时调用的函数，有三个参数 function(xhr,textStatus,errorThrown): A:xhr:底层的XMLHttpRequest对象。 B:textStatus:错误的描述。 C：errorThrown:一般为null 7、async:true(缺省/异步)false(同步) 三、validate.js插件 也有ajax方法，验证用户名等，是否存在的应用。 详见本人上一稿validate的用法 http://www.52php.cn/article/p-ncjghrgk-pa.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |