文章目录



AJAX

使用jQuery提供的函数实现Ajax请求的处理。代替直接使用XMLHttpRequest，但是jQuery实际还是使用的异步对象。

jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法，您能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON同时能够把接收的数据更新到DOM对象。

1.$.ajax() 核心函数

$.ajax()是jQuery中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。

1.1语法

$.ajax({name:value,name:value,....})//json格式的参数
//json格式的参数：key是定义好的，需要开发人员给key赋值。这些key是用来表示Ajax请求必须的参数。

PS:

1.参数是json数据，包含请求方式，数据，回调方法等。

2.json格式的参数：key是定义好的，需要开发人员给key赋值。这些key是用来表示Ajax请求必须的参数。

3.例如：请求的url地址，是不是异步请求，请求的方式等等。

$.ajax({
    //除了必用的，其他的都可以省略
    url:"queryProvinceServlet",//必用的。
    type:"get",
    data:{"name":"李四","age":20},
    dataType:"json",
    success:function(resp){  开发人员获取数据，更新dom对象  },//必用的。
    error:function(){alert("请求错误")}
})

参数：

url:服务器端的地址，例如某个servlet的访问地址。queryProvinceServlet

type:表示请求方式，get,post。默认是get。这个值不用区分大小写。

data：表示提交的请求参数，可以是String，数组，json类型的。推荐使用json格式。

例如：data：（“name”:“李四”,“age”:20）

jQuery在发送请求时，会把json中的key作为请求的参数使用，key对应的值作为参数数据。

queryProvinceServlet转为的结果：http://localhost:8080/myweb/queryProvinceServlet?name=李四&age=20

dataType:

数据格式，可以是HTML、text、xml、json等等。表示发起请求后，希望服务器端返回的数据格式。

jQuery可以尝试使用对应格式处理返回的数据。比如你指定了dataType，表示希望服务器返回的是json格式数据。然后jQuery把json数据转为json对象。

服务器代码可以获取到dataType的内容。

例如：请求中dataType:“json”,jQuery发起请求后，在请求头中

Accept

application/json, text/javascript, /; q=0.01

如果dataType:“text”,请求中Accept:text/plain,/;q=0.01

success:

函数function。当服务器端返回了数据，jQuery处理完数据后，执行这个函数。等同于异步对象的

readyState==4&&status==200//表示接收数据

的情况。

例如:sucess:function(resp){开发人员处理服务器返回的数据}

resp是自定义形参，相当于 resp = xhr.responseText;

error:

function()，当请求错误时，执行这个函数。

contentType:

表示请求的参数数据格式。例如application/json，这个内容可以不写。

async:

是一个Boolean值，表示请求是同步的还是异步的。true是异步的，默认是true；false是同步的。

2 $.get()

$.get()这个函数就是执行get请求方式的ajax。

2.1语法

$.get(url,请求参数,success函数,dataType);

2.2例子

这种方式比$.ajax()要简便很多。

$.get("queryName",{"proid":1},function(resp){获取省份名称},"text");

3 $.post()

$.get()这个函数就是执行get请求方式的ajax。

3.1语法

$.post("queryName",{"proid":1},function(resp){获取省份名称},"text");

4.实战（对比）

之前使用js语句实现Ajax，但是使用jQuery实现Ajax更简便清晰。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>使用Ajax查询省份名称</title>
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
    $(function () {
      //给按钮绑定事件    开始
      $("#btnSearch").on("click",function () {
        //alert("button click");
        $.ajax({
          url:"queryJson",
          type:"get",
          data:{"proid":$("#proid").val()},
          dataType:"json",
          success:function (resp) {
            //resp是服务器返回的数据，这个数据先通过jQuery处理的。
            //jQuery按照dataType的格式，可以把服务器返回的数据转为json对象。
            //alert("resp===="+resp) //[object]
            //更新dom
            $("#proname").val(resp.name);
            $("#projiancheng").val(resp.jiancheng);
            $("#proshenghui").val(resp.shenghui);
          }
        })
      })
      //事件完成
      $("#btnGet").click(function () {
        $.get("queryJson",
                {"proid":$("#proid").val()},
                function (resp) {alert("收到的数据="+resp)},
                "json"
        )
      })
    })
  </script>
</head>
<body>
<div align="center">
  <p>根据id查询省份全部信息</p>
  <table>
    <tr>
      <td>省份id:</td>
      <td><input type="text" id="proid"></td>
    </tr>
    <tr>
      <td>省份名称</td>
      <td><input type="text" id="proname"></td>

    </tr>
    <tr>
      <td>省份简称:</td>
      <td><input type="text" id="projiancheng"></td>
    </tr>
    <tr>
      <td>省会名称:</td>
      <td><input type="text" id="proshenghui"></td>
    </tr>
    <tr>
      <td>操作</td>
      <td><input type="button" id="btnSearch" value="查询" >
      <input type="button" id="btnGet" value="Get查询"></td>
    </tr>
  </table>
</div>
</body>
</html>

Ajax详解第六篇（jQuery实现Ajax）_jquery

public class QueryProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String json ="";

        String strProid = request.getParameter("proid");
        Province p = null;
        //判断是否为空，并且不为空字符串
        if(strProid!=null&&!strProid.trim().equals("")){

            ProvinceDao dao = new ProvinceDao();
            p = dao.queryProvinceName(Integer.valueOf(strProid));

            //把对象转为json，才通过HttpServletResponse输出。

            if(p!=null){//说明查出了真实的对象。

                ObjectMapper om = new ObjectMapper();
                json = om.writeValueAsString(p);
                //得到一个JSON格式的字符串
            }
        }

        //获取请求头中的accept
        String accept=request.getHeader("Accept");
        System.out.println("请求头accept = "+accept);

        System.out.println("sevlet province转为json==="+json);
        //可以处理不同的请求
        if(accept.startsWith("application/json")){
            response.setContentType("application/json;charset=utf-8");
            PrintWriter out = response.getWriter();
            out.println(json);
            out.flush();
            out.close();
        }else if(accept.startsWith("text/plain")){
            response.setContentType("application/json;charset=utf-8");
            PrintWriter out = response.getWriter();
            out.println("文本数据="+p.toString());
            out.flush();
            out.close();
        }

        //输出json给ajax请求。

        //application/json;给浏览器输出的是一个json格式的数据格式
        /*
        response.setContentType("application/json;charset=utf-8");

        PrintWriter out = response.getWriter();

        out.println(json);
        out.flush();
        out.close();
        */
    }
}

Ajax详解第六篇（jQuery实现Ajax）_jquery_02