Ajax学习

AJAX(AsynchronousJavascript And XML)异步JavaScript和XML可实现异步更新。

什么是同步，什么是异步？

同步好比我们在泡茶的时候，先要将水烧开然后在放茶叶。异步好比，我们在烧水的同时，可以将茶叶口撕开。

在浏览网站进行注册的时候会发现，我们输入用户名后，会自动的进行校验是否可用

这用到Ajax请求：

$.post{url,[data],[callback],[type]} {}

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text,_default。(具体参考API)

案例：用户名进行校验

//失去焦点的时候，进行事件绑定，异步处理

function textBlur(usertext){

$.get(“/CompleteWeb/LoginServlet”,{“username”:usertext.value},

function(data){

if(data>0){

alert("用户名已存在");

//如果想要动态显示

${"span:first"}.html("该用户名已占用").css({color:red,"font-size":"10px"});

}else{

alert("用户名不存在");

${"span:first"}.append();//这个也可以

}

});

}

在servlet中，我们要响应回给jsp（1和0就是我们返回的数据）

Response.getWriter().println(1);

Response.getWriter().println(0);

html标签中进行事件绑定：

二、利用JSon进行数据封装，将结果集返回到界面

$.post()还有一个参数type，如果我们进行异步处理的需要将某个结果集返回到界面的时候，需要将数据封装到json中，然后进行获取

例如：我们在淘宝上输入一个字：春，会在下拉框会联想很多内容。

事件：键盘录入事件

在jsp页面用AJAX进行校验：

FunctionSearchMethod(text){

//内容为空的时候 下拉框为空 ，输入了内容 进行删除

if(text.value=”“){

$("#completeShow").hide();

return;

}

$.post(“/SearchPro/SearchServlet”,{“pname”:text.value},function(data){

//data 为json封装的数据对象 可以data.pname

$("#ulid").append("<li>"+this.pname+"</li>");

$("#completeShow").show();

},"json");

}

在servlet 对数据进行JSon封装

Listlist=service.search(searTest);

StringjsonStr=JSONArray.fromObject(list).toString();

//将list集合编程字符串形式

Response.getWriter().write(jsonStr);

总结：$.post是用post提交方式进行异步请求处理的，请求成功时可调用回调函数。