菜单

javascript分析ajax重回的xml和json格式数据实例详细明白_javascript技术_脚本之家

2020年3月16日 - 澳门太阳娱乐手机登录

正文实例陈说了javascript拆解解析ajax重回的xml和json格式数据。分享给大家供我们参谋,具体如下:

AJAX

概论:

w   AJAX指异步的JavaScript及XML(Asynchronous
JavaScriptAnd XMLState of Qatar

w   允许浏览器与服务器通讯而无须刷新页面包车型大巴技能都被叫做AJAX

w   AJAX不是编制程序语言,而是创立越来越好更加快以致交互作用性越来越强的Web应用程序的本事

w   通过使用AJAX可完结页面局地数据更新,并非整套页面的跳转

        

协同是指:发送方发出数据后,等待收方发回响应今后才发下三个数目包通讯情势.

异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的简报形式.

 

AJAX缺点:

1)        AJAX大批量选取了JavaScript和AJAX引擎,而以此决计于浏览器的帮衬.

微微扶持不过提供的XMLHttpRequest的主意不相通,所以使得AJAX

程序必得测验针对种种浏览器的卓越性.

2卡塔尔国        AJAX更新页面内容的时候未有刷新整个页面,由此,网页的落伍成效是失效的,

澳门太阳娱乐手机登录,一些顾客还每每搞不清楚未来的数量时旧的依旧曾经更新过的.

3State of Qatar        对流某提的支撑未有FLASH,JavaApplet好.

4卡塔尔(قطر‎        一些手持设备(手提式有线电话机等卡塔尔今后还无法很好的支撑Ajax.

 

职业流程:

w   JavaScript使用XMLHttpRequest对象来直接与服务器实行通讯,异步数据传输;

w   从服务器恳求小量的所需音讯,问不是总体页面内容,缩短服务器压力

 

AJAX关键要素及功效:

         关键要素

Ÿ  JavaScript

Ÿ  DOM(文书档案对象模型卡塔尔国

Ÿ  CSS样式表

Ÿ  XMLHttpRequest –宗旨对象

作用:

Ÿ  Web2.0的重视开采工夫

Ÿ  异步格局发送央浼

Ÿ  完毕页面局部刷新

Ÿ  进步顾客体验

 

AJAX达成步骤:

1.        创建XMLHttpRequest对象

2.        设置回调函数

3.        初始化XMLHttpRequest组件

4.        发送伏乞

 

AJAX实例

         点击加载按钮,不刷新页面获取服务器端的内容并突显在页面中

         //JS

         function getXmlHttp(){…} //获取XMLHttp对象

 

         xmlHttp.readyState == 4 &&xmlHttp.status ==200  
//HTTP状态验证

         xmlHttp.open(“GET” , ”data.txt” , true);    //创建http请求

         xmlHttp.send(卡塔尔;  //发送央求

 

XMLHttpRequest对象

         作用:

                   达成以异步格局在客商端与服务器端之间传递数据.

                   缓慢解决服务器担负,加快响应速度,缩小客商等待时间

         浏览器创设XMLHttpReuest对象的反差

u  XMLHttpRequest对象

XMLHttpRequest对成功重临的音讯有三种管理格局:

1卡塔尔国        responseText: 将传回到的新闻当字符串使用;

2卡塔尔国        responseXML: 将传回到的音讯当XML文书档案使用;

u  Activex对象

 

//包容写法

//假设是IE7+,FF等高档浏览器

if(window.XMLHttpRequest){

         returnnew XMLHttpRequest();

}

//如若是IE 5,IE 6 低版本浏览器

if(window.ActiveXObject){

         returnnew ActiveObject(“Microsoft.XMLHTTP”);

}

XMLHttpRequest对象属性

        

 

XMLHttpRequest对象方法

使用AJAX发送诉求及管理相应

n  发送伏乞的点子:GET情势和POST情势

n  管理响应的章程:文本相应和XML响应

1)        //创建XMLHttpRequest对象

 

2卡塔尔国        设置回调函数

 

xmlHttp.onreadystatechange =function(){

if(xmlHttp.readyState ==4 &&xmlHttp.status == 200){

     //根据不相同的回到类型管理响应

}

}

3)        初始化XMLHttpRequest组件

xmlHttp.open(type , url , asunc);

4卡塔尔国        发送哀告

xmlHttp.send(String);

 

         GET央浼和POST诉求差异

        

 

文件和XML情势响应的界别

        

数量格式提要:

从服务器端接纳数据的时候,这些数据必需以浏览器可以精通的格式发送,

劳动器端的编制程序语言只可以以如下3种格式重返数据:

    * XML;

           *JSON;

           *HTML;

xml :

        优点:

                   *XML是一种通用的数目格式;

                    *
不必把数量强加到已定义好的格式中,而是为多少自定义合适的标识;

                    * 利用DOM能够完全掌握控制文书档案.

         缺点 :

*
如若文书档案来自于服务器,就亟须得保证申明档案含有正确的首部消息,若文书档案类型不精确,那么responseXML的值将为空的

* 当浏览器选拔到长的XML文件后,DOM分析也许会很复杂

                  

JSON:

       优点:

                  
*用作一种多少传输的格式,JSON与XML很平日,但JSON越来越灵敏;

                   * 
JSON无需从劳动器端发送含有一定内容类型的首部音信;

         缺点:

                   *语法过于严苛;

                   *代码不易读;

                   *eval函数存在高风险

 

HTML:

         优点:

                   * 
从服务器端发送的HTML代码在浏览器端没有必要javaScript实行深入分析;

                   *  HTML的可读性好;

                   *  HTML代码与innerHTML属性搭配,成效高;

         缺点:

                   * 
若要求经过AJAX更新一篇文书档案的多个部分,HTML不对路(拆串卡塔尔;

                   *  innerHTML并非DOM标准

 

相比小结:


若应用程序无需与其余援用程序分享数据的时候,使用HTML片段来回到数据时最轻松易行;


倘诺数据必要选定,JSON文件是个不利的挑精拣肥,其在性质和文件大小方面有优势;


当远程应用程序未知时,XML文档是首荐,因为XML是web服务世界的”世界语”.

一、JavaScript 剖判重回的xml格式的数量:

Jquery实现AJAX

         $.ajax()方法

        

         $.ajax({

                   url : ”发送诉求地址”,

                   type : ”要求情势”,

                   date : ”要发送的数量”,

                   dataType : ”服务器再次来到的数据类型”,

                   beforeSend : function(data卡塔尔国{ //发送央浼前进行的代码},

success :
function(data卡塔尔(قطر‎{ //发送成功后履行的代码},

error
: function(State of Qatar{ //恳求退步试行的代码}

});

 

$.get()方法

         通过远程HTTP GET 乞求载入消息

         是$.ajax(卡塔尔国方法中项目为GET诉求的简化版

 

         $.get(

                   “发送供给之处”,

                  要发送的数目  key/value,

                   回调函数,

                   “再次来到内容格式,xml,html,script,json,text”

);

*get(url,data,callback,type)

        *   url:央求路线

        * data:哀求数据,以key/value刑事,json数据格式  

        *
callback:function(data,texStatus,XMLHttpRequest){} 

              * data:代表号令重临内容,能够是XML文书档案,JSON,HTML,片段

              * textStatus:代表倡议状态,其值也许为:

succuss,error,notmodify,timeout4种

              * type:再次回到内容格式,xml,html,script,json,text

        * 返回值:XMLHttpRequest

  

        *   get(卡塔尔方法无论发送不发送央浼数据,央浼类型都以”GET”情势

        

         $.post()方法

                   通过远程HTTP POST央求载入新闻

                   是$.ajax(卡塔尔方法中项目为POST须求的简化版

                   $.post(

                            “发送是央浼地址”,

                            要发送的多少 key/value,

                            回调函数,

                            “再次来到内容格式,xml.html,script,json,text”

);

);

*get(url,data,callback,type)

       *   url:央求路线

       * data:央求数据,以key/value刑事,json数据格式  

       *
callback:function(data,texStatus,XMLHttpRequest){} 

             * data:代表呼吁重临内容,能够是XML文书档案,JSON,HTML,片段

             * textStatus:代表呼吁状态,其值大概为:

succuss,error,notmodify,timeout
4种

             * type:再次来到内容格式,xml,html,script,json,text

       * 返回值:XMLHttpRequest

  

        *   post(卡塔尔(قطر‎方法无论发送不发送央浼数据,须要类型都以”POST”方式

         $.getJSON()方法

                   透过HTTP GET央浼载入JSON数据

                   是$.get(卡塔尔国方法中回到数据类型为JSON的简化版

                   $.getJSON(

                            “发送诉求地址”,

                            要发送的数量 key/value,

                            回调函数

);

 

         $.getScript()方法

                   通过HTTP GET 求情载入并执行四个JavaScript文件

 

                   $.getScript(

                            “要发送的须要地址”,

                            回调函数

);

 

         serialize(卡塔尔用于系列化表单将DOM元素内容类别化为字符串用于AJAX伏乞

                   $(“form”).serialize();

                   //重临参数体系

                   single= Single&check = check2 & radio = radio1

         好处: 不用每一个去获取表单元素的值,拼凑参数种类

 

         );

*get(url,data,callback,type)

       *   url:恳求路线

       * data:诉求数据,以key/value刑事,json数据格式  

       *
callback:function(data,texStatus,XMLHttpRequest){} 

             * data:代表倡议再次回到内容,可以是XML文档,JSON,HTML,片段

             * textStatus:代表号令状态,其值只怕为:

succuss,error,notmodify,timeout
4种

             * type:重临内容格式,xml,html,script,json,text

       * ajax总结:

         * 同步人机联作和异步交互作用:

                   *
同步交互作用:客商端发送央求——>等待服务器端管理——>选取响应,那一个进度客

                                              
户端不可能做任何其余作业,这种形式叫做同步交互作用

                   *
异步交互作用:客户端发送伏乞——>等待服务器端管理——>接受响应,那些历程客

                                              
户端不用等待结果,能够做其余专门的学业,这种情势叫做异步交互作用

                  

         *
ajax的概念:允许客商端与服务器实行通讯,而无须刷新整个页面包车型客车才能叫做ajax。

        

         * 相比古板web格局与ajax形式的区分:

                   *
古板web情势:顾客端与服务器通讯,人机联作的是整套页面

                   *
ajax形式:客商端与服务器通讯,人机联作的是数据层面包车型大巴

                  

         *
ajax的劳作规律:在顾客端与服务器举办通讯的时候,客商端的呼吁首头阵送给”ajax

                                              
引擎”,再由”ajax引擎”发送到服务器端

        

         * XMLHttpRequest对象:是应用ajax本事的要害

        

         * 实现ajax的步骤:

                    1) 创建XMLHttpRequest对象

                    2State of Qatar 注册监听

                            *
利用XMLHttpRequest对象的onreadystatechange属性监听服务器通讯状态.

                            *
服务器的通讯状态具体由XMLHttpRequest对象的readyState属性来赢得

                                     * readyState
属性表示Ajax央求的一时一刻情状。它的值用数字代表。

                                               0 代表未伊始化。
还从未调用 open 方法

                                               1 表示正在加载。 open
方法已被调用,但 send 方法还没曾被调用

                                               2 象征已加载落成。send
已被调用。央浼已经早先

                                               3
代表相互作用中。服务器正在发送响应

                                               4
代表实现。响应发送落成

                            *
再利用XMLHttpRequest对象的另壹特性能status,来取得访谈服务器端是

                              否正确

                                     * 常用状态码及其含义:

                                               404 没找到页面(not
foundState of Qatar

                                               403
制止访谈(forbidden卡塔尔(قطر‎

                                               500
内部服务器出错(internal service errorState of Qatar

                                               200 一切不奇怪(ok卡塔尔(قطر‎

                                               304 未有被涂改(not
modified)(服务器重临304景观,表示源文件没

                                                        有被校订 卡塔尔国

                           

                    3卡塔尔(قطر‎ 选择服务器的响应数据:

                                     *
文本格式:利用XMLHttpRequest对象的responseText属性来选取;

                                     *
xml格式:利用XMLHttpRequest对象的responseXML属性来收取;

                                     *
json格式:利用XMLHttpRequest对象的responseText属性来选拔,再利

                                                          
用eval(卡塔尔函数进行转移。

                                               *
利用”{}”开头和末段的,约等于map集结

                                               *
利用”[]”在此以前和最终的,也就是数组

                                              

                   4卡塔尔(قطر‎ 与服务器建构连接

                            *
利用XMLHttpRequest对象的open(method,url,asynch)方法

                                     *
method:乞请类型,”GET”可能”POST”

                                     * url:央浼路线

                                     *
asynch:是还是不是异步加载,true是异步加载

                                    

                   *
要是诉求类型时”POST”方式的话,要求安装必要首部音讯

                            *
利用XMLHttpRequest对象的setRequestHeader()方法

                                    
*xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencode”)

                                    

                   5卡塔尔国 向服务器发送诉求数据

                            * 利用XMLHttpRequest对象的send()

                                     *
若是是”GET”哀告类型的话,send(State of Qatar方法向服务器发送诉求数据,服务器收到不到

                                     *
假设是”POST”伏乞类型的话,send(卡塔尔(قطر‎方法向服务器发送乞求数据,服务器能够接到

                  

                   * 服务、服务器、中间件、servlet:

                            * 服务:揭橥后的工程

                            *
服务器:硬件承载容器,实际上正是Computer硬件

                            *
中间件:tomcat、weblogic[oracle]、webshpere[IBM]

                            *
servlet:服务上,具体管理相关内容的文件

                                                       

1、javascript版本的ajax发送供给

行使jQuery+AJAX 拆解解析XML文件参预二级联合浮动中:

<?xml version=”1.0″encoding=”GB2312″?>

<china>

         <provincename=”吉林省”>

                   <city>长春</city>

                   <city>吉林市</city>

                   <city>四平</city>

                   <city>松原</city>

                   <city>通化</city>

         </province>

         <provincename=”辽宁省”>

                   <city>沈阳</city>

                   <city>大连</city>

                   <city>鞍山</city>

                   <city>抚顺</city>

                   <city>铁岭</city>

         </province>

         <provincename=”山东省”>

                   <city>济南</city>

                   <city>青岛</city>

                   <city>威海</city>

                   <city>烟台</city>

                   <city>潍坊</city>

         </province>

</china> 

 

 

<select id=”province” name=”province”>

      <option value=””>请选择….</option>

    </select>

          <select id=”city”name=”city”>

                 <optionvalue=””>请选择…..</option>

          </select>

 </body>

         <scriptlanguage=”JavaScript”>

                           

                            /*

                             *
jquery通过$.get(卡塔尔(قطر‎可能$.post(State of Qatar方法来解析并加载xml文件

                             *

                             *   * 以$.get(url,callback卡塔尔方法为例

                             *             *url:要解析的xml文件的不二等秘书诀

                             *            
*callback:回调函数,function(xmlState of Qatar{}

                             *                      *xml:深入解析后的原委

                             */

                            $.get(“cities.xml”,function(xml){

                                     vardocXml = xml;

                                    

                                    
//在jquery中采用标签字来查找对应标签,

                                     //利用find(State of Qatar方法,传入标签字

                                    
//$(docXmlState of Qatar–将解析回来的xml进行包装

                                     var$provinceXmlElements =
$(docXml).find(“province”);

                                     //遍历  

                                    
$provinceXmlElements.each(function(index,domEle){

                                               //有name属性的每两个标签

                                               var$provinceXmlValue =
$(domEle).attr(“name”);

                                              

                                               /*加盟到第4个下拉当选

                                                * <select
id=”province”name=”province”>

                                                      <option
value=””>请选择….</option>

                                                    </select>

                                                */

                                                //创建option标签

                                               var$option =
$(“<option></option>”);

                                               //设置属性value,省份称号

                                              
$option.attr(“value”,$provinceXmlValue);

                                               //Gavin本内容,省份

                                              
$option.text($provinceXmlValue);

                                               //获取页面province

                                               var$provinceElement =
$(“#province”);

                                               //增多到第一个下拉框

                                              
$provinceElement.append($option);

                                    });

                                    

                                     $(“#province”).change(function(){

                                              
//获取页面包车型客车成分(选中内容卡塔尔国

                                               var$provinceValue =
$(“#province”).val();

                                              

                                               /*

                                                * <select
id=”city”name=”city”>

                                                               
<optionvalue=””>请选择…..</option>

                                                               
<optionvalue=”长春”>长春</option>

                                                         </select>

                                                */

//                                          
$(“#cityoption[value!=”]”).each(function(index,domEle){

//                                                    
$(domEleState of Qatar.remove(卡塔尔国;    //能够用遍历清空  

//                                           });

                                               //清空:除请选拔以外的有着

                                              
$(“#cityoption[value!=”]”).remove();

                                               //遍历xml

                                              
$provinceXmlElements.each(function(index,domEle){

                                                       
var$provinceXmlValue = $(domEle).attr(“name”);

                                                       
//假如页面省份称号等于xml省份称号(找到了卡塔尔

                                                       
if($provinceValue==$provinceXmlValue){

                                                                
//依据省份查找上边全体city

                                                                
var$cityXmlELements = $(domEle).find(“city”);

                                                                
//遍历,获取文本内容

                                                                
$cityXmlELements.each(function(index,domEle){

                                                                          
var$cityXmlValue = $(domEle).text();

                                                                          

                                                                          
/*步向到第3个下拉当选

                                                                          
 * <select id=”city”name=”city”>

                                                                                   
        <optionvalue=””>请选择…..</option>

                                                                                   
 </select>

                                                                          
 */

                                                                          
var$option = $(“<option></option>”);

                                                                          
//设置属性

                                                                          
$option.attr(“value”,$cityXmlValue);

                                                                          
//设置文本

                                                                          
$option.text($cityXmlValue);

                                                                          

                                                                          
var$cityElement = $(“#city”);

                                                                          
$cityElement.append($option);

                                                                 });

                                                        }

                                               });

                                     });

                            });

         </script>

、创造XMLHttpRequest对象,这么些指标正是ajax诉求的主旨,是ajax恳求和响应的消息载体,单是例外浏览器创制情势差别、使用open方法绑定发送须要、获取服务器重回的字符串
xmlhttpRequest.responseText;、获取服务端重临的值,以xml对象的花样积累xmlhttpRequest.responseXML;、使用W3C
DOM节点树方法和品质对该XML文档对象进行检讨和深入分析。

2、 实例:

、发送ajax需要,以至解析重返的数目

/* js&#29256;&#26412;&#21457;&#36865;ajax&#35831;&#27714; */function tellxml(){ // &#21019;&#24314;&#23545;&#35937;,&#36866;&#21512;&#20110;firefox &#21644;safari var xmlhttpRequest= new XMLHttpRequest(); // &#21019;&#24314;&#23545;&#35937;&#65292;&#36866;&#21512;&#20110;ie // var xmlhttpRequest=new ActiveXObject; // &#35831;&#27714;&#21457;&#36865;&#36335;&#24452; url var url="http://localhost:18080/servlet/Servlet1&amp;#63;aa=10"; // Open&#26041;&#27861;&#32465;&#23450;&#19968;&#20010;&#21457;&#36865;&#36807;&#31243;,&#20294;&#19981;&#21457;&#36865;&#25968;&#25454;&#12290;Open&#26041;&#27861;&#26368;&#21518;&#19968;&#20010;&#21442;&#25968;&#20026;true&#26102;&#34920;&#31034;&#24322;&#27493;,&#21542;&#21017;&#21516;&#27493; xmlhttpRequest.open; // Send&#26041;&#27861;&#23601;&#26159;&#21457;&#36865;&#35831;&#27714;&#25968;&#25454; xmlhttpRequest.send; // readstate &#23601;&#26159;&#19968;&#20010;xmlhttprequest &#23545;&#35937;&#30340;&#19968;&#20010;&#23646;&#24615;&#65292;&#26469;&#35760;&#24405;&#26381;&#21153;&#22120;&#36820;&#22238;&#30340;&#29366;&#24577; var readstate =xmlhttpRequest.readyState; alert; // status &#23601;&#26159;&#21457;&#36865;&#35831;&#27714;&#30340;&#29366;&#24577;&#65292;&#22914;&#26524;&#26159;200 &#21017;&#35828;&#26126;&#35831;&#27714;&#21709;&#24212;&#25104;&#21151; var status=xmlhttpRequest.status; alert; // "responseText&#8221;&#26159;xmlhttpRequest&#30340;&#19968;&#20010;&#23646;&#24615;&#65292;&#26469;&#20197;&#23383;&#31526;&#20018;&#24418;&#24335;&#23384;&#20648;HTTP&#21709;&#24212;&#20540;&#65307;&#8220;responseXML&#8221;&#23646;&#24615;&#26159;&#20197;XML&#24418;&#24335;&#26469;&#35760;&#24405;HTTP&#21709;&#24212;&#30340;&#20540;&#12290; var text= xmlhttpRequest.responseText; alert; // &#8220;responseXML&#8221;&#26159;xmlhttpRequest&#30340;&#19968;&#20010;&#23646;&#24615;&#65292;&#26159;&#20197;XML&#25991;&#26723;&#30340;&#23545;&#35937;&#26469;&#23384;&#20648;&#26381;&#21153;&#22120;&#31471;&#36820;&#22238;&#30340;&#20540;&#65292;&#21487;&#20197;&#20351;&#29992;W3C DOM&#33410;&#28857;&#26641;&#26041;&#27861;&#21644;&#23646;&#24615;&#23545;&#35813;XML&#25991;&#26723;&#23545;&#35937;&#36827;&#34892;&#26816;&#26597;&#21644;&#35299;&#26512;&#12290; var xml= xmlhttpRequest.responseXML; var values=xml.getElementsByTagName; alert; alert; // &#35299;&#26512;&#33719;&#21462;&#20869;&#23481; for(var i=0;i&lt;values.length;i++){ var name1=values[i].getElementsByTagName[0].firstChild.data; alert; }};

、servlet 接受ajax 请求:

@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String aaa= request.getParameter; System.out.print; // 向客户端响应信息 response.setCharacterEncoding; response.setContentType; PrintWriter out= response.getWriter(); out.print(""); out.println; out.println; out.println(""+"name1"+""); out.println; out.println(""+"name2"+""); out.println; out.println; out.println; out.println(""+"name11"+""); out.println; out.println(""+"name22"+""); out.println; out.println; out.println;}

二、JavaScript 解析重临的json格式的多寡:注意这里收获的是responseText
并不是responseXML约等于字符串实际不是xml对象,因为重返的是json

1、发送央求,并深入分析重回的json格式的数额

/* js &#35299;&#26512;&#36820;&#22238;&#30340;&#26684;&#24335;&#20026; json */function telljson(){ // &#21019;&#24314; xmlhttpRequest &#23545;&#35937; var xmlhttpRequest= new XMLHttpRequest(); //&#35831;&#27714;URL var url="http://localhost:18080/servlet/Servlet3&amp;#63;aa=10"; // &#23558;&#35831;&#27714;&#36807;&#31243;&#32465;&#23450;&#21040; open &#26041;&#27861; xmlhttpRequest.open; // &#21457;&#36865;&#35831;&#27714; xmlhttpRequest.send; // readstate &#23601;&#26159;&#19968;&#20010;xmlhttprequest &#23545;&#35937;&#30340;&#19968;&#20010;&#23646;&#24615;&#29992;&#26469;&#35760;&#24405;&#26381;&#21153;&#31471;&#21709;&#24212;&#30340;&#29366;&#24577; var readstate =xmlhttpRequest.readyState; alert; // status &#26381;&#21153;&#22120;&#25191;&#34892;&#30340;&#29366;&#24577; var status=xmlhttpRequest.status; alert; // responseText &#23545;&#35937;&#20026;xmlhttpRequest &#23545;&#35937;&#30340;&#19968;&#20010;&#23646;&#24615;&#65292;&#29992;&#26469;&#20197;&#23383;&#31526;&#20018;&#30340;&#26041;&#24335;&#23384;&#20648;&#26381;&#21153;&#22120;&#31471;&#36820;&#22238;&#30340;&#20540;&#12290; var text= xmlhttpRequest.responseText; alert; // &#33719;&#21462;json &#36820;&#22238;&#20540; // &#37027;&#36793;&#20256;&#30340;&#26159;json&#23545;&#35937;&#30340;&#26684;&#24335;&#30340;&#19968;&#20010;&#23383;&#31526;&#20018;&#65292;&#22312;&#21069;&#21488;&#39318;&#20808;&#23558;&#23383;&#31526;&#20018;&#36716;&#21270;&#20026;&#19968;&#20010;json&#26684;&#24335;&#30340;js&#23545;&#35937; var json= eval; // &#36890;&#36807;eval() &#26041;&#27861;&#23558;json&#26684;&#24335;&#30340;&#23383;&#31526;&#20018;&#36716;&#21270;&#20026;js&#23545;&#35937;&#65292;&#24182;&#36827;&#34892;&#35299;&#26512;&#33719;&#21462;&#20869;&#23481; alert("age:"+json.age+"age1:"+json.age1);};

2、servlet 接受诉求,并赶回数据

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 向ajax 返回json格式的数据 String aaa= request.getParameter; System.out.print; // 向客户端响应信息 response.setCharacterEncoding; response.setContentType; PrintWriter out= response.getWriter(); // 这里组装json对象的格式,并转化为json格式的字符串返回。 String stu="{age:12,age1:23,age2:33}"; out.print; out.close();}

三、JavaScript 深入解析再次回到的json数组格式的数码:

/* js &#35299;&#26512;&#36820;&#22238;&#30340;&#26684;&#24335;&#20026; json */function telljson(){ // &#21019;&#24314;xmlhttpRequest&#23545;&#35937; var xmlhttpRequest= new XMLHttpRequest(); //&#35831;&#27714;url var url="http://localhost:18080/servlet/Servlet3&amp;#63;aa=10"; // open &#26041;&#27861;&#32465;&#23450;&#35831;&#27714;&#36335;&#24452; xmlhttpRequest.open; // &#21457;&#36865;ajax&#35831;&#27714; xmlhttpRequest.send; // readstate &#23601;&#26159;&#19968;&#20010;xmlhttprequest &#23545;&#35937;&#30340;&#19968;&#20010;&#23646;&#24615;&#29992;&#26469;&#35760;&#24405;&#26381;&#21153;&#22120;&#36820;&#22238;&#30340;&#29366;&#24577;&#20449;&#24687; var readstate =xmlhttpRequest.readyState; alert; // status &#23646;&#24615;&#29992;&#26469;&#35760;&#24405;&#26381;&#21153;&#22120;&#36820;&#22238;&#30340;&#25191;&#34892;&#29366;&#24577;&#20449;&#24687; var status=xmlhttpRequest.status; alert; // responseText&#23646;&#24615;&#29992;&#26469;&#20197;&#23383;&#31526;&#20018;&#26041;&#24335;&#23384;&#20648;&#26381;&#21153;&#22120;&#31471;&#36820;&#22238;&#30340;&#25968;&#25454; var text= xmlhttpRequest.responseText; alert; // &#37027;&#36793;&#20256;&#30340;&#26159;json&#25968;&#32452;&#30340;&#26684;&#24335;&#65292;&#36890;&#36807;js&#30340;eval() &#26041;&#27861;&#23558;json&#25968;&#32452;&#26684;&#24335;&#30340;&#23383;&#31526;&#20018;&#36716;&#21270;&#20026;js&#25968;&#32452; var json= eval; // &#35299;&#26512;&#36825;&#20010;js&#25968;&#32452;&#65292;&#33719;&#21462;&#25968;&#20540; var age=json[0].age; var age1=json[0].age1; var age2=json[0].age2; alert("age:"+age+"age1"+age1+"age2"+age2);};

四、ajax XMLHttpRequest 对象的几特性格以致open 和send方法:

onreadystatechange 属性

onreadystatechange
属性存有管理服务器响应的函数。上边包车型客车代码定义二个空的函数,可同有时间对
onreadystatechange 属性举行设置:

xmlHttp.onreadystatechange=function(){// 我们需要在这里写一些代码}

readyState 属性

readyState 属性存有服务器响应的景况新闻。每当 readyState
纠正时,onreadystatechange 函数就可以被执行。

那是 readyState 属性恐怕的值:

状态

描述

0 央求未开端化 1 伸手已提议 2 伸手已发送 3
央求管理中(响应中多如牛毛有一点点数据可用,可是服务器还还没水到渠成响应) 4
央求已到位

xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4) { // 从服务器的response获得数据 }}

responseText 属性

能够通过 responseText 属性来收复由服务器再次来到的数量。

在我们的代码中,我们将把时间文本框的值设置为等于 responseText:

xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; }}

AJAX – 向服务器发送八个央求

要想把诉求发送到服务器,大家就须求使用 open 方法。

open(State of Qatar 方法供给多个参数:

先是个参数定义发送央浼所选取的主意。

与 POST 相比较,GET 更简便也越来越快,并且在大部气象下都能用。

但是,在以下情况中,请使用 POST 诉求:

① 无法运用缓存文件② 向服务器发送多量数据③
发送包罗未知字符的顾客输入时,POST 比 GET 更安定也更牢靠

第1个参数规定服务器端脚本的 U奥德赛L(该公文能够是其他类型的文本,举例 .txt
和 .xml,或许服务器脚本文件,比如 .asp 和 .php 。

其七个参数规定相应对央求进行异步地处理。

send(State of Qatar 方法可将呼吁送往服务器。假设我们假若 HTML 文件和 ASP
文件位于同一的目录,那么代码是这么的:

xmlHttp.open("GET","time.asp",true);xmlHttp.send;

五、从前的实例都不曾应用 XMLHttpRequest 对象的onreadystatechange
这一个性格,上面看看那几个特性的实例:

1、onreadystatechange 这么些特性在头里也说了,正是在XMLHttpRequest
那几个指标的 readyState 这些值更改的时候会实践。

2、发送ajax诉求并深入分析

/* js &#35299;&#26512;&#36820;&#22238;&#30340;&#26684;&#24335;&#20026; json */function telljson(){ // &#21019;&#24314;&#23545;&#35937;,&#36866;&#21512;&#20110;firefox &#21644;safari var xmlhttpRequest= new XMLHttpRequest(); //&#35831;&#27714;&#21457;&#36865;&#36335;&#24452; url var url="http://localhost:18080/servlet/Servlet3&amp;#63;aa=10"; // Open&#26041;&#27861;&#32465;&#23450;&#19968;&#20010;&#21457;&#36865;&#36807;&#31243;,&#20294;&#19981;&#21457;&#36865;&#25968;&#25454;&#12290;Open&#26041;&#27861;&#26368;&#21518;&#19968;&#20010;&#21442;&#25968;&#20026;true&#26102;&#34920;&#31034;&#24322;&#27493;,&#21542;&#21017;&#21516;&#27493; xmlhttpRequest.open; // Send&#26041;&#27861;&#23601;&#26159;&#21457;&#36865;&#35831;&#27714;&#25968;&#25454; xmlhttpRequest.send; //onreadystatechange &#23646;&#24615;&#23384;&#26377;&#22788;&#29702;&#26381;&#21153;&#22120;&#21709;&#24212;&#30340;&#20989;&#25968; xmlhttpRequest.onreadystatechange =function(){ //readyState &#23646;&#24615;&#23384;&#26377;&#26381;&#21153;&#22120;&#21709;&#24212;&#30340;&#29366;&#24577;&#20449;&#24687;&#12290;&#27599;&#24403; readyState &#25913;&#21464;&#26102;&#65292;onreadystatechange &#20989;&#25968;&#23601;&#20250;&#34987;&#25191;&#34892;&#12290; alert("&#29366;&#24577;&#25913;&#21464;&#20102;&#65306;"+xmlhttpRequest.readyState); // &#22914;&#26524;&#26159;4 &#35831;&#27714;&#24050;&#23436;&#25104; if(xmlhttpRequest.readyState==4){ var readstate =xmlhttpRequest.readyState; alert; var status=xmlhttpRequest.status; alert; // "responseText&#8221;&#26159;xmlhttpRequest&#30340;&#19968;&#20010;&#23646;&#24615;&#65292;&#26469;&#20197;&#23383;&#31526;&#20018;&#24418;&#24335;&#23384;&#20648;HTTP&#21709;&#24212;&#20540;&#65307;&#8220;responseXML&#8221;&#23646;&#24615;&#26159;&#20197;XML&#24418;&#24335;&#26469;&#35760;&#24405;HTTP&#21709;&#24212;&#30340;&#20540;&#12290; var text= xmlhttpRequest.responseText; alert; // &#33719;&#21462;json &#36820;&#22238;&#20540; // &#37027;&#36793;&#20256;&#30340;&#26159;json&#25968;&#32452;&#30340;&#26684;&#24335;&#65292;&#36825;&#36793;&#35299;&#26512;&#21518;&#23601;&#26159;&#19968;&#20010;json&#25968;&#32452; var json= eval; var age=json[0].age; var age1=json[0].age1; var age2=json[0].age2; alert("age:"+age+"age1"+age1+"age2"+age2); } }};

3、servlet重回的数额

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { // 向ajax 返回json格式的数据 String aaa = request.getParameter; System.out.print; // 向客户端响应信息 response.setCharacterEncoding; response.setContentType; PrintWriter out = response.getWriter(); // 这里使用 json 数组的格式 String stu = "[{age:12,age1:23,age2:33}]"; out.print; out.close();}

PS:这里再为大家提供四款有关xml与json操作的在线工具供我们参考使用:

在线XML/JSON相互转变工具:

在线格式化XML/在线压缩XML:

XML在线压缩/格式化学工业具:

在线JSON代码核算、核查、美化、格式化学工业具:

JSON在线格式化工具:

在线json压缩/转志愿者具:

更加多关于JavaScript相关内容可查阅本站专项论题:《JavaScript中ajax操作本事总计》、《JavaScript操作XML文件本事计算》、《JavaScript中json操作技艺总计》、《JavaScript错误与调治技巧总计》及《JavaScript数据构造与算法技艺总计》

目的在于本文所述对我们JavaScript程序设计有着援救。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图