Jquey实现Ajax

在看本文之前，如果你对Jquery的语法知识忘记了可以参见Jquery教程

一.Ajax的概念

全称: ASynchronous JavaScript And XML异步的JavaScript 和XML

同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页页面。

二.Jquery实现Ajax

我们准备好ServletDemo类：

@WebServlet("/servletDemo")
public class ServletDemo extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp){
        int i=10/0;
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        PrintWriter writer = resp.getWriter();
        writer.write("I am jack");
        resp.setContentType("text/html;charset=utf-8");
    }
}

那么他的访问路径便是:http://localhost:8080/servletDemo
Jquery实现Ajax封装了三个方法:
1.$.ajax()

参数配置举例:
 $.ajax({
      url:"http://localhost:8080/servletDemo" , // 请求路径
      type:"POST" , //请求方式
      //data: "username=jack&age=23",//请求参数
      data:{"username":"jack","age":23},
      success:function (data) {
          alert(data);
      },//响应成功后的回调函数
      error:function () {
          alert("出错啦...")
      },//表示如果请求响应出现错误，会执行的回调函数
      dataType:"text"//设置接受到的响应数据的格式,我们常用的是json
  });

关于该方法的其他参数说明:$.ajax()方法详解
测试代码1(get方式):

<script>
    $.ajax({
       url:"http://localhost:8080/servletDemo",
        type:"get",
        data:{name:"jack","age":22},
        success:function (dataResponse) {
            alert(dataResponse)
        },
        error:function () {
            alert("出错了")
        },
        dataType:"text"
    }
    );
</script>

测试代码2(post方式):

<script>
    $.ajax({
       url:"http://localhost:8080/servletDemo",
        type:"post",
        data:{name:"jack","age":22},
        success:function (dataResponse) {
            alert(dataResponse)
        },
        error:function () {
            alert("出错了")
        },
        dataType:"text"
    }
    );
</script>

补充一下就是在服务器端对于发送来的json数据我们可以使用request.getParamter的方式来获取。
2. $.get()
这个方法的作用是:发送get请求

语法:$.get(url, [data], [callback], [type])
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型

3. $.post()
这个方法的作用是:发送post请求

* 语法：$.post(url, [data], [callback], [type])
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型

最后两个留给读者自己演示。