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对象节点。