Ajax+jquery 的前后台交互学习

最新推荐文章于 2024-09-06 17:49:15 发布

奋斗中的小健健

最新推荐文章于 2024-09-06 17:49:15 发布

阅读量1w

点赞数 4

分类专栏： ajax 文章标签： AJAX jquery Gson json

本文链接：https://blog.csdn.net/songjian1314/article/details/18356285

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、AJAX简介

AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

AJAX使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象是XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。　AJAX 基于下列 Web 标准：

JavaScriptXML HTML CSS在 AJAX 中使用的 Web 标准已被良好定义，具体表现为：

使用DOM（Document Object Model）进行动态显示及交互；

使用 XML 和XSLT进行数据交换及相关操作；

使用 XMLHttpRequest 进行异步数据查询、检索；

使用 JavaScript 将所有的东西绑定在一起。

同时AJAX 并被所有的主流浏览器支持。所以可以说AJAX 应用程序独立于浏览器和平台。

传统的web应用允许用户填写表单(form），当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因此在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

二、原生态AJAX使用介

目前几乎都用jquery来创建XMLHttpRequest对象了，这里就稍微介绍下原始的Js调用ajax的使用：

//1.建立XMLHttpRequest对象

var xmlhttp;

if(window.XMLHttpRequest){

//针对火狐 Mozillar Opera IE7 IE8

xmlhttp=new XMLHttpRequsest();

//针对某些特定的版本mosillar浏览器BUG进行修正

if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml");

}

else if(window.ActiveXObject){

//针对IE6以下

//两个可以创建XMLHTTPRequest对象的控件名称，保存在一个js数组里，前者版本新

var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

for(var i=0;i<activexName.lenghth;i++){

try{

xmlhttp=new ActiveXObject(activexName[i]);

break;

}catch(e){}

}

if(!xmlhttp){

alert("XMLHttpRequest对象创建失败");

return;

} else{

alert(xmlhttp);

}

2.注册回调函数

//注册回调函数时，需要函数名，不要加括号

//我们需要将函数注册如果加上括号就会把函数的返回值注册上错误

xmlhttp.onreadystatechange=callback;

3.设置连接信息

xmlhttp.open("GET","Servlet?name="+name,true);

//第一个参数表示http请求方式 GET/POST

//第二个是请求的url地址 get方式请求的参数也在Url中

//第三个参数表示采用异步还是同步方式交互 true 表示异步,/同步方式下 send这句话会在服务器端数据回来后才执行完 //异步方式下，send这句话会立即执行默认异步

//POST方式

xmlhttp.open("post","Server",true);

//post需要自己设置HTTP的请求头

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//post 方式发送数据

xmlhttp.send("name="+name);

4 发送数据

//回调函数、

function callback(data){data即返回的数据

5.接收相应数据

//判断对象的状态是否交互完成

if(xmlhttp.readyState==4){

//判断http交互是否成功

readyState的取值如下：0（未初始化） 1（正在装载） 2（装载完毕） 3（交互中） 4（完成）

if(xmlhttp.status==200){

//获取服务器端的返回数据

//获取服务器端输出的纯文本数据

var responseText=xmlhttp.responseText;

//获取服务器端输出的XML格式数据

var domObj= xmlhttp.responseXML;

//后台需要httpResponse.setCnontextType("text/xml;charset=utf-8");返回格式：<mess>xxx</mess>

var messNode=domObj.getElementsByTagName("mess");

var textNode=messNode[0].firstChild;

var resMess=textNode.nodeValue;

//数据显示到页面

}

三、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格式字符串传给前台。