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();//这个也可以

     }

   });

   }

Response.getWriter().println(1);

Response.getWriter().println(0);

html标签中进行事件绑定：

<input type="text" class="form-control" id="username" name="username"onblur="textBlur(this)" placeholder="请输入用户名">

二、利用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封装

List<Product>list=service.search(searTest);

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

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

Response.getWriter().write(jsonStr);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!