JavaWeb JS原生Ajax技术

一、Ajax概述

Jquery的Ajax技术：https://blog.csdn.net/young_1004/article/details/81979009

1.什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都随时可以随意做其他的事情，不会被卡死。

 

2.Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会将请求提交给服务器端，在这段时间内，客户端可以进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

 

二、JS原生的Ajax技术

JS原生的Ajax其实就是围绕浏览器内置的Ajax引擎对象进行学习的，要使用JS原生的Ajax完成异步操作，有如下几个步骤：

1.创建Ajax引擎对象

2.为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）

3.绑定提交地址

4.发送请求

5.接收响应数据

 

ajax.html

ajaxServlet

package com.ma.ajax;



import java.io.IOException;



import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



/**

* Servlet implementation class AjaxServlet

*/

public class AjaxServlet extends HttpServlet {

    

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

        try {

            Thread.sleep(5000);

        } catch (InterruptedException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

        response.getWriter().write(Math.random()+"");

    }



    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

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

        // TODO Auto-generated method stub

    }



}

 

效果

异步

同步

说明

Ajax通常称为“异步请求”，还有一种叫法称为“局部刷新”，在ajax请求的时候客户端可以进行任意操作，而同步的话客户端必须得等待服务器端响应后才可以进行下一步操作。