Ajax专题整理

（一）Ajax的简介

Ajax在W3C的解析如下：

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

 

（二）Ajax的应用场景

Ajax主要应用于网页于后台在无刷新的场景下实现数据的交互，例如数据加载、实时校验等客户端与服务端的交互场景

（三）Ajax的js原生实现方式

Js的xmlHttpRequest主要用于与服务器进行数据交换而且适用于所有现代浏览器。

在js的实现方式为：

1、创建请求

var xmlHttpRequest = new XMLHttpRequest();

2、设置请求状态变化时所触发的事件

xmlHttpRequest.readyState的状态

0连接未创建

1连接已经创建

2请求已经接收

3请求处理中

4请求已经完成，响应已经就绪

xmlHttpRequest.onreadystatechange = function () {

if(xmlHttpRequest.readyState == 4){

if(xmlHttpRequest.status == 200){

alert(xmlHttpRequest.responseText);

}

}

}

3、创建连接

xmlHttpRequest.open("post","http://loocalhost:8080/testWeb/AJAXServletTest",true);

4、发送请求

xmlHttpRequest.send();

 

服务器端：

response.getWriter().println(request.getParameter("username"));

 

 

 

（四）Ajax的jQuery应用方式

1．Ajax方式

[$|jQuery].ajax({

type:["GET"|"POST"],

url:请求的地址,

data：提交的数据

success:响应完成后需要执行的方法

});

 

不管是原生的还是jQuery的ajax,都需要设置5个部分

1,type:请求方式

2,url:请求的路径

3,data:请求的参数

4,success:回调函数-用于处理服务器发给回来的数据

5,对于post请求,需要设置一个头Content-Type  jQuery已经帮我们实现

 

get方式：

$.ajax({

type:"GET",

url:请求地址,

data:提交数据,

success:function(){

$("#div01").html(msg+"GET");

}

});

 

post方式

$.ajax({

type:"POST",

url:请求地址,

data:提交数据,

success:function(){

$("#div01").html(msg+"POST");

}

});

 

2．get方式

get方式:

两个参数：

url：设置请求的地址

fn：设置请求响应完成后要执行的方法

 

eg：

$.get(url,function (data){

alert("ddd");

});

三个参数：

url：设置请求的地址，

data：设置向服务器提交的数据json格式，

fn：设置请求响应完成后要执行的方法

eg：

$.post(url,data,function (data){

 alert("ddddd");

});

3．post方式

post方式：

三个参数

url:设置请求的地址

data:设置向服务器提交的数据

"username=zhangsan&password=123"

{username:"zhangsan",password:"123"}

fn:设置请求响应完成后要执行的方法

举例:

$.post("/myJQueryAJAX/JQueryAJAXServlet","username=zhangsan",function(msg) {

$("#div01").html(msg);

});

4．load方式

load方式：

一个参数：

url

eg：

$("div").load(url);

 

两个参数：

url：

data：

$("div").load(url,data);

eg:

举例:$("#div01").load("/myJQueryAJAX/JQueryAJAXServlet","username=lisi");

 

注意:

load方法是由标签来调用的,他可以直接把服务器传过来的数据塞到调用它的jQuery标签对象里面

load方法可以根据参数的不同,选择不同的提交方式,只有第二个参数是js对象的时候,才会使用post方式

实际开发中 用的最多 get和post

应用场景

如果你仅仅想得到一些数据,如某个商品的信息,传一个页码,或者商品的编号,用get请求

像表单登录, 验证,重要程度比较高的 用post方式,相对比较安全

 

 

（五）Ajax下json做数据交换的常用方式

json数据处理：

//jsonlib

//JSONArray可以将数组，List转换成json格式的数据

//JSONObject可以将对象，Map转换成json格式的数据

服务器端：

JSONArray jsonArray = JSONArray.fromObject(ss);

out.println(jsonArray.toString());//将json数组对象的字符串形式发送出去

客户端：

data = eval("("+data+")");

Eg：

服务器端：

JSONObject json = new JSONObject();

Map<String, Object> returnMap = new HashMap<>();

returnMap.put("result", "success");

returnMap.put("msg", "处理成功！");

response.getWriter().println(json.fromObject(returnMap).toString());

 

客户端：

$.ajax({

type:"POST",

url:"${pageContext.request.contextPath }/ProductServlet",

data:{"op":"getProductByAjax","categoryid":"${param.categoryid}"},

success:function (data) {

data = eval("("+data+")");

if("success" == data.result){

if(data.lp.length == 0){

$("table").append("<tr><td colspan='6'>查无数据</td></tr>");

}

$(data.lp).each(function (){

 var s = "<tr>";

 s += "<td><input type='checkbox' name='pids' value='"+this.pid+"'/></td>";

s += "</tr>";

$("table").append(s);

});

} else if ("fail" == data.result){

$("table").append("<tr><td colspan='5'><font color='red'>发生错误，请联系系统管理员！</font></td></tr>");

} else {

$("table").append("<tr><td colspan='5'><font color='red'>发生未知错误，请联系系统管理员！</font></td></tr>");

}

}

});