HTML发送异步请求,使用原生JS发送ajax异步请求

Ajax

Ajax: Asynchronous javaScript and xml (异步的JavaScript和xml技术)。当我们向服务器发起请求的时候，服务器不会像浏览器响应整个页面，而是只有局部刷新。它是一个异步请求。

请求:

同步请求:只有当一次请求完全结束以后才能够发起另一次请求。

异步请求:不需要其他请求结束就可以向服务器发起请求。

Ajax的优点:

1、ajax是异步请求，浏览器页面只需要进行局部刷新，效率非常的高。

不足的地方:

1、因为ajax是异步请求，所以会导致请求服务器的次数大大增加，增加服务器的负担。

2、因为ajax使用的是JavaScript来接收服务器响应的数据。而JavaScript对浏览器的兼容性不太好。所以有时候对不同的浏览器进行区别对待。但是该问题可以通过jquery来解决。

ajax的入门程序

1. 编写服务端代码:

image.png

Servlet中的内容:

@WebServlet(name = "AjaxDemo1", value = "/AjaxDemo1")

public class AjaxDemo1 extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// 编码问题

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("utf-8");

// 获取请求参数

String username = request.getParameter("name");

// 输出请求参数

System.out.println(username);

// 响应内容

response.getWriter().print("ajax入门小程序");

}

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

/*

* 服务器向客户端响应ajax请求的时候, 可以响应text,html,xml,json数据格式

*/

doPost(request, response);

}

}

2. 编写客户端代码

Ajax请求服务器需要依赖一个非常核心的类XMLHttpRequest, 通过该对象向服务端发送异步请求，并且还可以接收服务端相应的数据。

如何创建该对象:

new XMLHttpRequest()针对现在的主流浏览器