AJAX
function ajaxFunction (){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest (); } catch ( e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP" ); } catch ( e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP" ); } catch ( e){} } } return xmlHttp; } window.onload=function (){ document.getElementById ("ok"). onclick=function (){ //1 创建XmlHttpRequest对象 var xmlHttp=ajaxFunction (); /* * * 2 接收服务器返回的数据[注册监听] * * 怎接收? * * 什么时候接收呢? * onreadystatechange: * ?该事件处理函数由服务器触发,而不是用户 * ?在 Ajax 执行过程中,服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。 * 改变 readyState 属性是服务器对客户端连接操作的一种方式。 * ?每次 readyState 属性的改变都会触发 readystatechange事件 * 在 Ajax 执行过程中,服务器会通知客户端当前的通信状态。通信状态的改变要激发函数的执行 * <img src="http://img.blog.csdn.net/20150219164750772?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> */ xmlHttp.onreadystatechange =function(){ alert(xmlHttp.readyState ); //alert(xmlHttp.status); * 处理响应处理函数都应该做什么。 首先,它要检查XMLHttpRequest对象的readyState值, * 判断请求目前的状态。 * 参照前文的属性表可以知道,readyState值为4的时候, * 代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下: if(xmlHttp.readyState ==4){ <img src="http://img.blog.csdn.net/20150219164907883?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> if (xmlHttp .status ==200|| xmlHttp.status==304 ){ //接收服务器端返回的数据 responseText * XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。 * 它是一个HTML,XML或普通文本,这取决于服务器发送的内容。 * 当 readyState 属性值变成 4 时, responseText 属性才可用,表明 Ajax 请求已经结束。 var data=xmlHttp.responseText ; alert(data); } } } /* * 3 打开和服务器的连接
<img src="http://img.blog.csdn.net/20150219164938088?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> * xmlHttp.open("get","../testServlet",true); * * 参数1:请求方法 get post * * 参数2:请求的路径 * * 参数3:表示请求是否要异步传输,默认值为true(异步) */ 1.GET方式请求: xmlHttp.open("get" ,"../testServlet?timeStamp="+new Date().getTime ()+"&c=18", true); 2.POST方式请求: <img src="http://img.blog.csdn.net/20150219165021313?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150219165045963?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> /* * 4 发送数据到服务器端
<img src="http://img.blog.csdn.net/20150219165215832?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> * * 如果请求方法是get,此时send方法不能发送数据到服务器端 * 即使发送了数据,服务器端也接收不到,该参数设置null * * 此时传递参数可以使用url方式传递参数 */ xmlHttp.send("a=9&b=8" ); //xmlHttp.send(null); } } -----------------------------------------**********************response返回值类型************************************----------------------------------------------------- 1.responseText. <img src="http://img.blog.csdn.net/20150219165255631?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> 2.responseXML. <img src="http://img.blog.csdn.net/20150219165317375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150219165409276?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTIxODE1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> -------------------关于从服务器响应过里的XML数据进行解析的实例代码:::---------------------------------- // out.println("<china>"); // out.println( "<province name='吉林省'>" ); // out.println( "<city>长春</city>" ); // out.println( "<city>吉林市</city>" ); // out.println( "<city>四平</city>" ); // out.println( "<city>松原</city>" ); // out.println( "<city>通化</city>" ); // out.println( "</province>"); // out.println( "</china>"); xmlHttp. onreadystatechange=function (){ if(xmlHttp.readyState ==4){ if(xmlHttp.status==200 ||xmlHttp .status ==304){ var xmlDoc=xmlHttp.responseXML ; //alert(data); var provinceXmlElements=xmlDoc.getElementsByTagName ("province"); for(var i=0 ;i <provinceXmlElements. length;i++){ var name=provinceXmlElements [i ].getAttribute ("name"); var optionElement=document .createElement ("option"); optionElement.setAttribute ("value", name); var optionTextElement=document .createTextNode (name ); optionElement.appendChild (optionTextElement ); var provinceElement=document .getElementById ("province"); provinceElement.appendChild (optionElement ); } } } }
AJAX实质上也是遵循Request/Server模式,所以这个框架基本的流程是:
规则如下:
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
<script language="JavaScript"> var people={ "username":"zhang" , "sex":"male" , "tel":{"phone" :"110", "cell":"13812345678" }, "address":[ {"city": "tieling","postcode" :"110"}, {"city": "beijing","postcode" :"100"} ] } alert(people.username ); alert(people.tel.cell); alert(people.address[1 ].city ); </script >
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。