Jquery+AJAX的结合使用

1  调用方式    

$.ajax(

       {

          type: "POST",

          url: "serverlet",

     //data："username="+username,

          data: {" uid": str}, // uid为参数的名称，str为值；多个参数写法："{'参数1':'值1','参数2'：'值2',.....}"

          contentType: "application/json;charset=utf-8",

          dataType: "json",//告诉jQuery的返回数据格式。          success: function (msg) {

        //成功返回数据msg(格式为dataType设置的格式),并进行相应的页面刷新操作

}

附：jquery还有两种调用方式，这里就不介绍了：

$.get(servlet,data,callback);  $.post(servlet,data,callback);

2  参数介绍

参数名

类型

描述

url

String

(默认: 当前页地址) 发送请求的地址。

type

String

(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

timeout

Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

async

Boolean

(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend

Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {

 

         this; // the options for this ajax request

         }

cache

Boolean

(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。

complete                   

Function

请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) {

 

         this; // the options for this ajax request

         }

contentType

String

(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

data

Object,
String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataType

String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

error

Function                                                   

(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {

         // 通常情况下textStatus和errorThown只有其中一个有值 

         this; // the options for this ajax request

         }

global

Boolean

(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

ifModified

Boolean

(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData

Boolean

(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

success

Function

请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
function (data, textStatus) {

         // data could be xmlDoc, jsonObj, html, text, etc...

         this; // the options for this ajax request

         }

附：

1、返回XML格式数据

        前台需设置dataType为xml，同时后台需要httpResponse.setCnontextType("text/xml;charset=utf-8");

 

例如返回格式：<div><span>ss</span></div>

由于xml类似于DOM节点，所以使用操作DOM节点的方法可以取出XML数据

var jqueryObj=$(msg);

var text=jqueryObj.children();

var msgtext=text.text();

msgtext== <span>ss</span>

 

 

2、返回json格式数据

 注意：经过经验教训，如果返回json格式数据，而且后台要接受前台传来的数据，则前台不要设置 contentType。

   前台设置dataType=”json”，如果不设置的话，返回字符串格式的json数据，需要使用eval进行转换：var jsonBack=eval("("+dataBack+")");如果已经设置为json格式，则不需要进行转换，jquery会帮你转换，然后可以进行对json格式数据的获取：

如：

dataBack={

{"id":2,"name":"p1","birthDay":"Jan 15, 2014 2:09:00 PM"},

{"id":3,"name":"p2","birthDay":"Jan 15, 2014 2:09:00 PM"}

};

$.each(dataBack,function(i,n){

     var id=data[i].id;

     var name=data[i].name;

     alert(“第”+i+”个人，id为”+id+”;名字为：”+name);               

            }

            )

 

3  AJAX缓存问题  

   使用时间戳，给url地址增加时间戳，骗过浏览器，不读取缓存，（IE下认为如果url是一样的 就读缓存的数据）

 

//获取时间戳

var timestamp=(new Date()).valueOf();

//时间戳拼接到url上，

//url=serverlet

if(url.indexOf("?")>=0){

url=url+"&t="+timestamp;

}else{

url=url+"?t="+timestamp;

}

 

4  乱码问题

(1)前台：将发送的中文 encodeURI("中文")  (IE解决方案)

   后台:name1=new String(name.getBytes("iso8859-1","UTF-8"));

 

(2)前台发出的数据作两次encodeURI

encodeURI(encodeURI("中文"))；

后台：name1=URLDecoder.decode(name,"UTF-8")

 

 

5  使用Gson处理Json数据

   Gson（又称Google Gson）是Google公司发布的一个开放源代码的Java库，主要用途为串行化Java对象为JSON字符串(toJson()方法)，或反串行化JSON字符串成Java对象(fromJson()方法)。使用起来十分方便。

   为了测试，前台传到后台的是json字符串，所以使用JSON.stringify()方法将json对象转化为json格式的字符串，需要使引入json2.js，同时后台引入gson-2.2.4.jar包。

 

5.1前台传入后台数据：

$.ajax(

       {

          type: "POST",

          url: "serverlet",

     //data："username="+username,

          data: {“uid”: str }", // uid为参数的名称，str为值；多个参数写法："{'参数1':'值1','参数2'：'值2',.....}"

          contentType: "application/json;charset=utf-8",

          dataType: "json",//告诉jquery的返回数据格式。          success: function (msg) {

        //成功返回数据msg(格式为dataType设置的格式),并进行相应的页面刷新操作

}

 

l 单数据格式：

data:"num="+num或者data:{"num":$("#num").val()}

 

l Json格式的数据字符串:

var data={};

data.id=$("#num").val();//11

data.name=$("#num1").val();//小明

var myData=JSON.stringify(data);//通过stringify()方法将js对象转换为json格式字符串{“id”:”1”,”name”:”小明”}

data:myData

 

   这里主要介绍经常用的json格式数据的交互，测试案例为：前台两个输入框，用于输入id和姓名，点击按钮后在下方显示id,姓名,生日；后台有一个javaBeand对象Student,拥有三个属性 id name birthDay，通过ServletInputStream接收输入框的数据，使用Gson的toJson()将此数据转换为Student对象，同时设置对象的生日属性为此刻时间，最后通过Gson的toJson()方法将对象以List或者HashMap的形式转为为json格式字符串传给前台。

 

 

5.2接收处理前台传入的数据：

1、单个数据  // String num1=request.getParameter("num");           

2、Json格式的单个数据如：{“num”:11}

     // String num1=request.getParameter("num");  

3、Json 格式数据字符串

 

l 通过ServletInputStream获取POST的数据即接收输入框的数据

BufferedReader br=newBufferedReader(new InputStreamReader( (ServletInputStream) request.getInputStream())); 

            String line = null; 

            StringBuilder jsonRec= new StringBuilder(); //用于接收返回的json字符串

            while ((line = br.readLine()) != null) { 

                jsonRec.append(line); 

            } 

 

得到的json字符串：jsonRec={"id":"11","name":"小明"}

 

l 将json字符串转化为对应的javaBean对象（）：

 

 Gson gson = new Gson(); // 实例化Gson对象

 

//如果要对输出的json格式的字符串进行指定格式 可以使用以下实例化：

 Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();

 

//将json格式字符串转化为对应的javaBean对象，如果对象的某一属性在此字符串中找不到对应名字的值，则对象的此属性置根据类型为初始值如int 为0 ,string null

Student student= gson.fromJson(jsonRec.toString(), Student.class); 

输出结果：Student==[birthDay=null, id=1, name=小明]

 

l 设置对象的生日为此刻时间

 student.setBirthDay(new Date());

 

l 转换对象为json格式串返回前台

 

1、以单独一个对象返回

  String s = gson.toJson(student);  

输出结果：s==={"id":1,"name":"小明","birthDay":"2014-01-16 10:55:28"}

 

2、以List封装对象返回

List<Student> list = new ArrayList<Student>();  

list.add(student);  

String s = gson.toJson(student);

输出结果：s===[{"id":1,"name":"小明","birthDay":"2014-01-16 10:55:28"}]  

 

3、以HashMap封装对象返回

HashMap<Integer,Student> map= new HashMap<Integer,Student>();

map.put(student.getId(), student);

String s = gson.toJson(student);

输出结果：s==={"1":{"id":1,"name":"小明","birthDay":"2014-01-16 11:18:59"}}