Ajax笔记

来源：互联网发布：讲文明知礼仪演讲稿编辑：程序博客网时间：2024/05/02 13:25

Ajax简介

AJAX即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

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

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

实际应用如下
例如：检测注册的用户名时候已经被注册过
部分更新内容（查看下一页 / 上一页的订单）

Ajax的JQuery实现（推荐使用JQuery）
前端代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>     <!--使用百度的库，使用百度在线库--><script type="text/javascript">$(document).ready(function(){       //确保在文档加载完之后才能运行$("#name").change(function(){$.ajax({         url:"CheckID",       //请求路径   ，例子访问jsp虚拟路径已在web.xml配置好“/CheckID”    type:"POST",          //访问类型    GET    dataType: "json",       //一般常用json    data:{             //POST使用data:  GET:自动转换成url路径参数    name: $("#name").val()        },    success:function(s2){    //请求成功时的回调函数，变量为返回的json对象      alert(s2.isSet);    //使用json对象      if(s2.isSet){      $("#isSetName").text("用户名已存在！");      alert("leo");      }else{      alert("false");            }        },    error:function(jqXHR){    //请求失败时的回调函数    alert("请求失败");    }});});});</script></head><body><h3 id="t1">请填写注册信息</h3><form action="" method="post">name: <input type="text" name="name" id="name"/><span id="isSetName"></span><br/>password: <input type="password" name="password"/><br/><input type="submit" value="提交注册"/></form></body></html>

后端代码：

public class CheckID extends HttpServlet {/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String string = "{\"isSet\":\"true\"}";//response.setContentType("application/json");    //最好加上返回文本格式response.getWriter().println(string);}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request,response);}}

web.xml配置：

<servlet>    <description></description>    <display-name>CheckID</display-name>    <servlet-name>CheckID</servlet-name>    <servlet-class>com.ajax.CheckID</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>CheckID</servlet-name>    <url-pattern>/CheckID</url-pattern>  </servlet-mapping>

0 0