Front-end study notes (6) Ajax for front-end and back-end data interaction

What is Ajax

Ajax and its English name is Asynchronous JavaScript And XML. As the name suggests, asynchronous JavaScript and XML, it is a very important asynchronous interaction technology in the front-end and back-end interactions of modern networks.
Ajax is a technology that can update some web pages without loading the entire web page.

Synchronous and asynchronous conceptual diagram

Insert picture description here

Why do we need ajax

Traditional web pages (not applicable) Ajax must reload the entire web page if the content needs to be updated. It is a waste of network resources and poor user experience. In order to improve these shortcomings, the basis of ajax was born.
Using Ajax can save network resources and improve user experience.

How to use ajax

ajax implementation

Native way to write ajax

Browser side:

function fun() {
    
    
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
    
    // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
    
    // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //startup connection
    /***
     * 参数:
     * 1.请求方式,get、post
     * get方式，请求参数在URL后面拼接，send方法为空参
     * post方式， 请求参数在send方法中定义
     * 请求url
     * 同步或者异步请求，true(异步)或false(同步)
     ***/

    xmlhttp.open("GET","ajaxServlet?username=tom",true);
    //xmlhttp.send("username=tom");
    xmlhttp.send();
    //数据处理
    xmlhttp.onreadystatechange=function()
    {
    
    
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
    
    
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }
}

Server:

@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);
        response.getWriter().write("hello:"+username);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doPost(request, response);
    }
}

Write ajax in jquery

$.ajax()

Syntax: $.ajax({key-value pair});

function fun() {
    
    
    $.ajax({
    
    
       url:"ajaxServlet",
       type: "post",
        //第一种数据请求方式
       //: data:"username=jack&age=23",
        //第二种数据请求方式
       data:{
    
    "username":"jack","age":23},
        success:function (data) {
    
    
            alert(data);
        },
        error:function () {
    
    
            alert("error......")
        },
        dataType: "text"
    });
}

$. G E T () language method :$ .get (URL, [Data], [the callback], [type])
Parameters:
URL: Path request
data: Parameter Request
callback: callback function
type: the response result of the type

function fun() {
    
    
    $.get("ajaxServlet",{
    
    username:"rose"},function (data) {
    
    
        alert(data);
    },"text");
}

$.post()
is consistent with the above get

function fun() {
    
    
    $.post("ajaxServlet",{
    
    username:"rose"},function (data) {
    
    
        alert(data);
    },"text");
}