JS+ajax+Json

html和xml:
HTML(HyperText Mark-upLanguage)：超文本標記語言
XML(ExtentsibleMarkup Language):可擴展標記語言
區別：html標籤固定，xml可自定義，擴展；
html用來顯示數據，xml描述，存放數據；
js部分

1.

<script>
    var ran=parseInt(Math.random()*100);
    function guess(){
        var n=document.getElementById("num").value;
        var span=document.getElementById("result");
        if(isNaN(n)){
            span.innerHTML="請輸入數字";
        }
        if(n>ran){
            span.innerHTML="大了";
        }else if(n<ran){
            span.innerHTML="笑了";
        }else{
            span.innerHTML="對了";
        }
    }
</script>
    <input type="text" id="num"/>
    <input type="button" value="猜" onclick="guess();"/>
    <span id="result"></span>

2.定時器

<script>
    function f1(){
    var n=5;
    id=setInterval(function(){
        n--;
        if(n==0)
        {clearInterval(id);}
    },1000);
    }
</script>
<input type="button" value="倒計時" onclick="f1();">

ajax：asynchrous javascript and xml
1.ajax是什麼？
是一種用來改善用戶體驗的技術，本質上是利用瀏覽器提供的一個特殊對象（XMLHttpRequest對象，一般也稱之爲ajax對象）向服務器發送異步請求；
服務器返回部分數據，瀏覽器利用這些數據對當前頁面部分更新；整個過程頁面無刷新；
注：異步請求，指的是，當Ajax對象發送請求時，瀏覽器不會銷燬當前頁面，用戶仍可以對當前頁面做其它操作。
原理圖：

2.如何獲取ajax對象？

    function getXhr(){
        var xhr = null;
        if(window.XMLHttpRequest){
            //非ie瀏覽器
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('MicroSoft.XMLHttp');
        }
        return xhr;
    }

3.ajax的幾個重要屬性
onreadystatechange:綁定事件處理函數，用來處理readystatechange事件。
注：當ajax對象的readyState屬性值發生任何改變，就會產生readystatechange事件。
readyState:用來獲取ajax對象與服務器通信的進展，其中4表示ajax對象已經獲得了服務器返回得所有數據。
responseText:獲取服務器返回得文本數據。
responseXML:獲得服務器返回得xml數據。
status:獲取狀態碼。
4.編程步驟
a.獲取ajax對象 var xhr=getXhr();
b.調用ajax對象發送請求

//get請求
        function check_adminCode(){
            //1.獲取ajax對象
            var xhr=getXhr();
            //2.發送請求
            xhr.open('get','check_admin.do?adminCode='+$F('adminCode'),true);
            xhr.onreadystatechange=function(){
                //4.處理服務器返回的數據
                if(xhr.readyState==4&&xhr.status==200){
                    //獲取服務器返回的數據
                    var txt=xhr.responseText;
                    $('adminCode_msg').innerHTML=txt;
                }
            };
            xhr.send(null);
        }
//發送post請求
a.xhr.open('post','check_uname.do',true)
b.xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
c.xhr.onreadystatechange=f1;
xhr.send('name=tom');

5.緩存問題
ie瀏覽器發送get請求，瀏覽器回查看當前請求，如果一致就會緩存
解決：請求後面添加隨機數。
6.編碼問題
（1）發送get請求
ie瀏覽器會使用gbk進行編碼，而其它瀏覽器會使用utf-8來編碼。
服務器端默認使用iso-8859-1來解碼。所以會產生亂碼。
解決方法：
step1.服務器端統一使用utf-8來解碼。URIEncoding=utf-8
step2.瀏覽器端使用encodeURI函數來編碼。
注：encodeRUI是javascript內置的一個函數。
（2）發送post
瀏覽器都會使用utf-8來編碼。服務器默認使用iso-8859-1來解碼。
解決方法：
request.setCharachterEncoding(“utf-8”);
JSON(javascript object notation)
1.JSON是什麼？
是一種輕量級的數據交換格式。
注:數據交換：指的是將要交換的數據轉換成一種與平臺無關的數據格式(比如xml)，然後發送給接收方來處理。輕量級：json相對於xml，文檔更小，解析速度更快。
2.語法
2.1表示一個對象{屬性名：屬性值，屬性名：屬性值…….}
注：a.屬性名必須用雙引號b.屬性值可以是string,number,true/false,null,object
c.屬性值如果是string，需要用雙引號。
2.2表示對象組成的數組
[{},{},{}…….]
3.導包

<dependency>  
    <groupId>net.sf.json-lib</groupId>  
    <artifactId>json-lib</artifactId>  
    <version>2.4</version>  
    <classifier>jdk15</classifier>  
</dependency>

4.使用json
a).java對象如何轉換成json字符串：使用jackson提供的api;

//將Java對象轉換成字符串
JSONObject jsonObj=JSONObject.fromObject(s);
String jsonStr=jsonObj.toString();
{"code":"600877","name":"中國嘉陵","price":100}
//將Java對象數組或集合轉換成字符串
JSONArray jsonArr=JSONArray.fromObject(stocks);
String jsonStr=jsonArr.toString();
[{"code":"600870","name":"中國嘉陵0","price":10},{"code":"600871","name":"中國嘉陵1","price":11},{"code":"600872","name":"中國嘉陵2","price":12}]

b).將json字符串轉換成javascript對象：使用Javascript內置對象JSON提供的parse()函數。

        var str='{"name":"tom","age":22}';
        //使用javascript內置的JSON對象提供的方法轉換
        var obj=JSON.parse(str);
        obj={"name":"tom","age":22};

JQuery對Ajax編程的支持
(1).ajax方法a).用法 .ajax({}) {}是一個對象，其屬性用來控制ajax對象如何向服務器發送請求。
屬性：url:請求地址； type:請求類型；data:請求參數（可以是請求字符串形式，比如”adminCode=King&age=22”,還可以是對象形式，比如{“adminCode”:”King”,”age”:22}）
dataType:服務器返回的數據類型，有如下類型：”json” json字符串
“text” 文本 “html” html文檔 “xml” xml 文檔 “script” javascript腳本
success:綁定時間處理函數（服務器已經返回了所有數據，並且沒有出錯）。
error:綁定時間處理函數（服務器出錯了）

$.ajax({
    "url":"check.do",
    "type":"get",
    "data":"adminCode=King",
    "dataType":"json",
    "success":function(obj){
    //處理服務器返回的數據obj,如果是json字符串會
    自動轉換成javascript對象。
}
});

(2)load()
作用：向服務器發送異步請求，然後將服務器的數據直接添加到符合要求的節點之上。
用法：obj.load(url,[data]);注：url:請求地址。data:請求參數，格式同上。注： obj,是JQuery對象節點。