Ajax核心知识(2)

对于Ajax核心的东西需要在进行总结提炼一下:

xmlHttp对象。

方法:xml.responseText获取后台传递到前台的数据,经常性的使用var object=xml.responseText;

前端:

二级联动的例子:

 1 function onloadInfo(){
 2         var shengId=document.getElementById("sheng").value;
 3         shi.options.length=0;//清除市的下拉框内容!
 4         var xmlHttp;
 5         if(window.XMLHttpRequest){
 6             xmlHttp=new XMLHttpRequest();
 7         }else{
 8             xmlHttp=new ActiveXObject( "Microsoft.XMLHTTP ");
 9         }
10         alert("readState状态:"+xmlHttp.readyState+";status状态:"+xmlHttp.status);
11         xmlHttp.onreadystatechange=function(){
12             if(xmlHttp.readyState==4&&xmlHttp.status==200){
13                 alert(xmlHttp.responseText);
14                     var object=eval("("+xmlHttp.responseText+")");
15                     for(var i=0;i<object.rows.length;i++){
16                         var o=object.rows[i];
17                         shi.options.add(new Option(o.text,o.id));
18                     }
19             }
20         };
21         xmlHttp.open("get","checkUserName?action=ejld&shengId="+shengId,true);
22         xmlHttp.send();     
23 }
24  </script>
25 <body>
26 <div>
27     省:<select id="sheng" onchange="onloadInfo()">
28         <option value="1">山东省</option>
29         <option value="2">江苏省</option>
30         <option value="3">宁夏回族自治区</option>
31     </select>
32           市:<select id="shi">
33        </select>
34 </div>
35 </body>
36 </html>

后台:

 1 private void ejld(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2         response.setContentType("text/Html;charset=utf-8");
 3         PrintWriter out=response.getWriter();
 4         JSONObject resultJson=new JSONObject();
 5         String shengId=request.getParameter("shengId");
 6         JSONArray Jsonarray=new JSONArray();
 7         JSONObject temp=null;
 8         switch(Integer.parseInt(shengId)){
 9             case 1:{
10                 temp=new JSONObject();temp.put("id", 1);temp.put("text", "济南市");Jsonarray.add(temp);
11                 temp=new JSONObject();temp.put("id", 2);temp.put("text", "潍坊市");Jsonarray.add(temp);
12                 temp=new JSONObject();temp.put("id", 3);temp.put("text", "青岛市");Jsonarray.add(temp);
13                 break;
14             }
15             case 2:{
16                 temp=new JSONObject();temp.put("id", 4);temp.put("text", "南通市");Jsonarray.add(temp);
17                 temp=new JSONObject();temp.put("id", 5);temp.put("text", "苏州市");Jsonarray.add(temp);
18                 temp=new JSONObject();temp.put("id", 6);temp.put("text", "泰兴市");Jsonarray.add(temp);
19                 break;
20             }
21             case 3:{
22                 temp=new JSONObject();temp.put("id", 7);temp.put("text", "银川市");Jsonarray.add(temp);
23                 temp=new JSONObject();temp.put("id", 8);temp.put("text", "吴忠市");Jsonarray.add(temp);
24                 temp=new JSONObject();temp.put("id", 9);temp.put("text", "中卫市");Jsonarray.add(temp);
25                 break;
26             }
27         }
28         resultJson.put("rows", Jsonarray);
29         out.println(resultJson);
30         out.flush();
31         out.close();
32     }

其中:

对于JSONObject resultJson=new JSONObject();

我们是一个大的对象
里面有一个数组:
JSONArray jsonArray=new JSONArray();
然后还可以继续往里面加对象。
这里面的对象可以有自己的key-value值!
这很有意思!
原文地址:https://www.cnblogs.com/zyxsblogs/p/10071483.html