ajax

什么是ajax

异步的javaScript 和 xml

1、异步和同步：在客户端和服务器互相通信的基础上

同步：客户端必须等待服务器的响应，在等待期间不能做其他操作

异步：客户端不必等待服务器的响应，在期间能做其他操作

2、Ajax是一种无需重新加载整个网页的情况下，可以更新部分网页的技术

jQuery可以通过三种方式进行数据的传值

$.post()：jQuery.post(url,[data],[callback],[type])

$.get()：jQuery.get(url,[type])

$.ajax({})：jQuery.ajax(url,[settings])

属性：

ur：待载入页面的URL地址

data：待发送 Key/value 参数

callback：载入成功时回调函数

type：返回内容格式，xml,html,script,json,text,_default

案例

servlet类

package com.xmcc.servlet;

import javax.servlet.servletexception;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
        String username = request.getParameter("username");
        System.out.println(username);

        String age = request.getParameter("age");
        System.out.println(age);
        response.getWriter().write("ssssssss");

    }

    protected void doGet(HttpServletRequest request,IOException {
        doPost(request,response );
    }
}

jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="js/jquery-3.3.1.min.js"></script>

<script>
    //字符串拼接
        function aaa() {
            //使用ajax提交请求
            $.ajax({
                url:"/ajaxServlet",data:"username=coco&age=12",type:"POST",success:function (obj) {
                    alert(obj)
                }
            })
        }

        //json格式
        function bbb() {
            //使用ajax提交请求
            $.ajax({
                url:"/ajaxServlet",data:{"username":"coco","age":12},success:function (obj) {
                    alert(obj)
                },error:function () {
                    alert("111111111111")
                },//服务器响应的数据格式
                dataType:"text"
            })
        }

    function ccc() {
        //使用$.get()提交请求
        $.get("/ajaxServlet","username=coco",function (obj) {
            alert(obj)
        },"text")

        //使用$.post()提交请求
        $.post("/ajaxServlet","text")

    }

</script>
<html>
<head>
    <title>Title</title>
</head>
<body>

<button id="btn" onclick="aaa()">点击1</button>

<button id="btn" onclick="bbb()">点击2</button>

<button id="btn" onclick="ccc()">点击3</button> </body></html>

相关推荐