Jquey实现Ajax-白红宇

Jquey实现Ajax

阅读量：3958 次

发布时间：2019-05-24

本文共 1709 字，大约阅读时间需要 5 分钟。

Jquey实现Ajax

在看本文之前，如果你对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  });

关于该方法的其他参数说明:

测试代码1(get方式):

在这里插入图片描述

测试代码2(post方式):

在这里插入图片描述

补充一下就是在服务器端对于发送来的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：响应结果的类型

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

转载地址：http://axlzi.baihongyu.com/

你可能感兴趣的文章