AJAX是"Asynchronous([eɪˈsɪŋkrənəs])JavaScript and XML",即异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术。
Ajax 的工作
Ajax直觉认识:我们发送一个请求,但是这个请求比较特殊它是异步的,也就是说客户端是不会感觉到的。在发送这个请求的时候我们绑定了一个事件,这个事件会监控我们发送请求的状态,并且每次状态改变都会触发,所以我们就可以根据不同的状态让他执行不同的操作。请求到达服务器端后,服务器端根据相应的请求返回对应的信息,这个返回信息我们可以取得并且是异步得到,不会引起客户端刷新。既然在上面已经绑定了监控状态变化的事件,我们就可以在那里首先做好在得到返回信息后要做的处理(当然如果失败也会有相应的状态,我们也会做出相应的处理),通过javascript在客户端操作返回的数据。
Ajax 核心—XMLHttpRequest
上面我们大概感受了一下Ajax的过程,我们发现发送异步请求才是核心,事实上它就是XMLHttpRequest,整个Ajax之所以能完成异步请求完全是因为这个对应可以发送异步请求的缘故。而且我们又发现上面那个事件就是整个处理过程的核心,可以根据不同状态执行不同操作,其实它就是XMLHttpRequest的方法onreadystatechange,它在每次状态发生改变时都会触发。那么是谁取得的返回信息呢?它就是XMLHttpRequest的另一个方法responseText(当然还有responseXML)。我们还没有说发送给谁以及执行发送操作,这两个就是XMLHttpRequest的open和send方法。其他的当然还有了,我们直接列出来吧:
XMLHttpRequest 对象 |
|
属性 |
说明 |
readyState |
请求状态,开始请求时值为0直到请求完成这个值增长到4 0——(未初始化)还没有调用send()方法 1——(载入)已调用send()方法,正在发送请求 |
responseText |
目前为止接收到的响应体,readyState<3此属性为空字符串,=3为当前响应体,=4则为完整响应体 |
responseXML |
服务器端相应,解析为xml并作为Document对象返回 |
status |
服务器端返回的状态码,=200成功,=404表示“Not Found” |
statusText |
用名称表示的服务器端返回状态,对于“OK”为200,“Not Found”为400 |
方法 |
|
SetRequestHeader() |
向一个打开但是未发生的请求设置头信息 |
open() |
初始化请求参数但是不发送 |
send() |
发送Http请求 |
bort() |
取消当前相应 |
etAllResponseHeaders() |
把http相应头作为未解析的字符串返回 |
getResponseHeader() |
返回http相应头的值 |
事件句柄 |
|
onreadystatechange |
每次readyState改变时调用该事件句柄,但是当readyState=3有可能调用多次 |
总结如下:
readyState 状态说明
(0)未初始化
此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。
(1)载入
此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。
概而括之,整个XMLHttpRequest对象的生命周期应该包含如下阶段:
创建-初始化请求-发送请求-接收数据-解析数据-完成
在具体应用中,明确了readyState的五个状态(XMLHttpRequest对象的生命周期各个阶段)的含义,就可以消除对Ajax核心的神秘感 ,迅速把握其实质,对减少学习中的挫折感和增强自信心都极其有益。
属性status的含义:
0**:未被始化 1**:请求收到,继续处理
2**:操作成功收到,分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败
Get和Post的区别
Get方式:
用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。
Post方式:
当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。
使用Post方式需注意:
1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18,注意var name=update.php?
abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
3.参数在Send(参数)方法中发送,例: xmlHttp.send(name); 如果是get方式,直接 xmlHttp.send(null);
GET和POST方式乱码解决方案
1如果是POST方式:
var url=encodeURI(encodeURI("name=高晓&age=23"));
服务器端:String name =URLDecoder.decode(request.getParameter("name"),"UTF-8");
如果参数用send发送则不需要处理 send("name=高晓&age=23");
2如果是GET方式:
xmlHttp.open("GET",true);
xmlHttp.send(null);
服务器端
String name = new String(request.getParameter("name").getBytes("ISO-8859-1"),"UTF-8");
<script type="text/javascript"> xmlHttpRequest = null; //创建XMLHttpRequest对象 function newXMLHttpRequest() { if(window.XMLHttpRequest)//除IE浏览器的其他浏览器 { xmlHttpRequest = new XMLHttpRequest(); } else if(window.ActiveXObject)//IE浏览器 { try { xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP"); } catch(e1) { try{ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2) { } } } return xmlHttpRequest; } //与服务器通讯 function takeToServer() { newXMLHttpRequest() if(xmlHttpRequest!=null) { var url = "TestServlet?name=高晓"; xmlHttpRequest.onreadystatechange = callbackHander; xmlHttpRequest.open("POST",true); xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpRequest.send(null); } } function callbackHander() { if(xmlHttpRequest.readyState == 4) { if(xmlHttpRequest.status == 200) { //responseText为String类型 var responseText = xmlHttpRequest.responseText; //把responseText变成对象 var jsonObject = eval("(" +responseText +")");//eval只接收原始字符串 for(var i=0;i<jsonObject.length;i++) { var name = jsonObject[i].name; } } } } </script>
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { //若list中对象属性有引用类型 List list = new ArrayList(); JsonConfig jsonConfig = new JsonConfig(); jsonConfig.registerJsonValueProcessor(java.util.Date.class,(JsonValueProcessor) (new DateJsonValueProcessor("yyyy-MM-dd"))); JSONArray jsonArray = JSONArray.fromObject(list,jsonConfig); response.getWriter().println(jsonArray.toString()); //若没有 List list = new ArrayList(); JSONArray jsonArray = JSONArray.fromObject(list); response.getWriter().println(jsonArray.toString()); }
package com.jxd.util; import java.text.SimpleDateFormat; import java.util.Date; import net.sf.json.JsonConfig; import net.sf.json.processors.JsonValueProcessor; public class DateJsonValueProcessor implements JsonValueProcessor { private String format = "yyyy-MM-dd"; public DateJsonValueProcessor() { } public DateJsonValueProcessor(String format) { this.format = format; } public Object processArrayValue(Object value,JsonConfig jsonConfig) { String[] obj = {}; if (value instanceof Date[]) { SimpleDateFormat sf = new SimpleDateFormat(format); Date[] dates = (Date[]) value; obj = new String[dates.length]; for (int i = 0; i < dates.length; i++) { obj[i] = sf.format(dates[i]); } } return obj; } public Object processObjectValue(String key,Object value,JsonConfig jsonConfig) { if (value instanceof Date) { String str = new SimpleDateFormat(format).format((Date) value); return str; } return value.toString(); } public String getFormat() { return format; } public void setFormat(String format) { this.format = format; } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。