AJAX和JSON

来源：互联网发布：网络直播现象研究编辑：程序博客网时间：2024/06/10 06:25

ajax (asynchronous javascript and xml)

是一种用来改善用户体验的技术，本质是利用浏览器提供的一个特殊对象(ajax对象，即XMLHttpRequest对象)向服务器发送异步请求，服务器返回部分数据，浏览器利用这些数据对当前页面做部分更新，整个过程，页面无刷新，不打断用户的操作。

异步请求，指的是当ajax对象发送请求时，
浏览器不会销毁当前页面，用户仍然可以对当前页面做其它操作。

获得ajax对象

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

ajax对象的几个重要属性

1)onreadystatechange:绑订事件处理函数（用来处理 readystatechange事件）。
当readyState属性性发生了变化（比如从１变成了２）
就会产生readystatechange事件。

2)readyState：有５个值(0,1,2,3,4),用来获得ajax对象与服务器
通信的进展。当这个值为4时，表示ajax对象已经获得了服务器
返回的所有的数据。

3)responseText：获得服务器返回的文本数据。

4)responseXML:获得服务器返回的xml数据。

5)status:获得服务器返回的状态码。

例子

封装一些方法

function getXhr(){        var xhr=null;        if(window.XMLHttpRequest){            xhr=new XMLHttpRequest();        }else{            xhr=new ActiveXObject("MicroSoft.XMLHttp");        }        return xhr;    }function $(id){    return document.getElementById(id);}function $F(id){    return $(id).value;}

get请求

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>注册</title><script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript">    function check(){        var xhr=getXhr();        console.log(xhr);        //发请求        console.log(1);        var uri='check.do?uname='+$F('uname');        xhr.open('get',encodeURI(uri),true);        xhr.onreadystatechange=function(){            console.log(666)            if(xhr.readyState==4&&xhr.status==200){                var txt=xhr.responseText;                console.log(txt);                $('msg').innerHTML=txt;            }        };        console.log(2);        xhr.send(null);    }</script></head><body style="font-size:30px;">    <form>        <fieldset>            <legend>注册</legend>            用户名：<input id="uname" name="uname" onblur="check();"/><br>            <span id="msg" style="color:red;"></span>            密码:<input type="password" name="pwd"/>            <input type="submit" value="ok"/>        </fieldset>    </form> </body></html>

post请求

<html><head><meta charset="UTF-8"><title>注册</title><script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript">    function check(){        console.log("check");        //step1. 获得ajax对象        var xhr=getXhr();        //step2. 发送请求        xhr.open("post","check.do",true);        //设置一个消息头,告诉服务器发送过来的数据如何编码(这儿采用key=value的形式进行编码)        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");        xhr.onreadystatechange=function(){            //处理服务器返回的数据            if(xhr.readyState==4&&xhr.status==200){                var txt=xhr.responseText;                $("msg").innerHTML=txt;            }        }        xhr.send("uname="+$F("uname"));    }</script></head><body style="font-size:30px;">    <form>        <fieldset>            <legend>注册</legend>            用户名：<input id="uname" name="uname" onblur="check();"/><br>            <span id="msg" style="color:red;"></span>            密码:<input type="password" name="pwd"/>            <input type="submit" value="ok"/>        </fieldset>    </form> </body></html>

jQuery对ajax的支持

$.ajax()

实例

<html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    $(function(){        $('#a1').click(f1);    });    function f1(){        $.ajax({            "url":"getNumber.do",            "type":"post",            "dataType":"text",            "success":function(data){                $('#s1').html(data);            }        });    }</script></head><body style="font-size:30px;">    <a id="a1" href="javascript:;">点这儿显示一个随机整数</a>    <br/>    <span id="s1"></span></body></html>

用法

$.ajax({});

{}是一个对象，用来指定一些选项参数（控制ajax对象如何向服务器
发送请求）。常见的选项参数有如下一些:

url 指定请求地址，比如”quoto.do”。
type 指定请求类型，比如”get”，”post”。
data 指定请求参数，有两种写法:
- 写法1:　请求字符中的形式,比如 “uname=Sally”
- 写法2: 对象形式，比如 {“uname”:”Sally”}
dataType 指定服务器返回的数据类型:
- json json字符串
  text 文本
  html html文档
  xml xml文档
  script javascript脚本
success 指定一个函数，用来处理服务器返回的数据。
注：当ajax对象收到了服务器返回的所有数据，并且
服务器处理成功。
error 指定一个函数，用来处理服务器发生异常的情况。
async 指定同步还异步，缺省值是true(异步)。

load()

实例

<html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    $(function(){        $('#a1').click(f2);    });    function f2(){        $('#s1').load('getNumber.do');    }</script></head><body style="font-size:30px;">    <a id="a1" href="javascript:;">点这儿显示一个随机整数</a>    <br/>    <span id="s1"></span></body></html>

用法
向服务器发送异步请求，并且将服务器返回的数据直接添加到
符合要求的节点之上。

    $obj.load(url,[data]);

url:请求地址,比如 “getNumber.do”
data:请求参数，有两种写法（同上）。

JSON (javascript Object Notation)

一种轻量级的数据交换格式。
1. 数据交换
将数据先转换成一种与平台无关的数据格式并发送给接收方来处理。
比如，将数据转换成xml文档然后发送给接收方来处理。
2. 轻量级
相对于xml而言，json文档更小，解析速度更快。

基本语法

表示一个对象
{属性名:属性值,属性名:属性值…}
- 属性名必须使用双引号括起来。
- 属性值可以是string,number,null,true/false,object。
- 属性值如果是string,必须使用双引号括起来。
表示由对象组成的数组
[{},{},…]
使用json交换数据

java对象转换成json字符串。

(导入:jackson-annotations,jackson-core,jackson-databind三个jar包)
使用jackson提供的api(ObjectMapper)。

ObjectMapper om = new ObjectMapper();String jsonStr = om.writeValueAsString(s); //s可以为java对象或对象集合System.out.println(jsonStr);

json字符串转换成js对象。

使用javascript内置的JSON的方法(parse)#

    //将json字符串转换成js对象    function f4(){        var str = '{"name":"悟空","salary":1000}';        //使用js内置对象JSON的parse方法来转换        var obj = JSON.parse(str);        alert(obj.name);    }    function f5(){        var str = '[{"name":"悟空","salary":1000},'                  + '{"name":"八戒","salary":800}]';        //使用js内置对象JSON的parse方法来转换        var arr = JSON.parse(str);        alert(arr[1].name);    }

阅读全文

0 0