AJAX

简介

（1）AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

（2）AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

（3）AJAX 是一种用于创建快速动态网页的技术。

原理

动态页面&静态页面

静态页面：页面固定，页面内数据内容固定写入，每一个具体功能需要一个独立的page来支撑

动态页面：页面page根据数据动态生成，大部分页面由几个固定模板页面来动态生成

同步加载&异步加载

同步加载：页面在加载新的内容时候，整个页面无法进行其他操作，容易导致页面出现假死

异步加载：页面的多个功能操作可以同时执行，而不会互相影响而出现假死状态

AJAX

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

优点

（1）在页面不刷新的情况下异步加载数据

（2）实现页面数据动态更新

（3）实现页面数据局部刷新

实现机制

XMLHttpRequest

XMLHttpRequest对象是AJAX技术的核心对象

属性

属性	说明
readyState	XMLHttpRequest对象的状态： 0：未初始化。对象已创建，未调用open； 1：open方法成功调用，但Sendf方法未调用； 2：send方法已经调用，尚未开始接受数据； 3：正在接受数据。Http响应头信息已经接受，但尚未接收完成； 4：完成，即响应数据接受完成。
responseText	服务器响应的文本内容
responseXML	服务器响应的XML内容对应的DOM对象
status	服务器返回的http状态码(200、404、500)
onreadystatechange	请求状态改变的事件触发器 readyState变化时会调用这个属性上注册的javascript函数

方法

方法	说明
open(method,url,asynch,username,password)	指定和服务器端交互的HTTP方法，URL地址，即其他请求信息； Method:表示http请求方法，一般使用”GET”,”POST”. url：表示请求的服务器的地址； asynch：表示是否采用异步方法，true为异步，false为同步； 提供http认证机制需要的用户名和密码，后边两个可以不指定
send(content)	向服务器发出请求，如果采用异步方式，该方法会立即返回 content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。
setRequestHeader(header,Value)	设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用，一般在post方式中使用。

实现思路

1、创建核心请求对象XMLHttpRequest

2、打开链接，配置请求信息：open(method,url,asynch)

3、请求发送:send(content)

4、定义回调函数，定义获取反馈消息后的执行操作：onreadystatechange

请求方式

GET

特点

（1）请求需要携带的参数通过open方法第二个参数后面带上

（2）携带参数格式：？param=value&param=value&param=value

demo

index.html

  //1、兼容性判断
    var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
   /*
    2、打开连接，配置请求信息
    参数1：GET/POST   参数2：后台响应servlet  参数3：true（同步）/ false（异步）
    */
    xhr.open("GET","Servlet?name=cgt&psd=123",true);
    //3、请求发送
    xhr.send(null);
    //4、定义回调函数
    xhr.onreadystatechange = function () {
        //判断XMLHttpRequest对象状态，若是4则响应数据接收完成
        if(xhr.readyState==4){
            //判断服务器返回的http状态码，若是200则连接成功
            if(xhr.status==200){
                //获取服务器响应数据
                var result = xhr.responseText;
                console.log(result);
            }
        }
    }

Servlet

@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    @Override
    public void init() throws ServletException {
        System.out.println("成功连接到Servlet");
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("doGet");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().write("已成功以GET方法连接");
        String name = req.getParameter("name");
        String psd = req.getParameter("psd");
        System.out.println("name="+name);
        System.out.println("psd="+psd);

    }

   @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       System.out.println("doPost");
       resp.getWriter().write("已成功以POST方法连接");
    }
}

结果

POST

特点

（1）参数不能在url后面携带

（2）参数必须通过send方法后面发送过去，格式：parm=value&parm=value

（3）send方法之前必须还得发送请求头：setRequestHeader

demo

index.html

   //1、兼容性判断
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    /*
     2、打开连接，配置请求信息
     参数1：GET/POST   参数2：后台响应servlet  参数3：true（同步）/ false（异步）
     */
    xhr.open("POST", "Servlet", true);
    //3、请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //4、请求发送
    xhr.send("name=cgt&psd=123");
    //5、定义回调函数
    xhr.onreadystatechange = function () {
        //判断XMLHttpRequest对象状态，若是4则响应数据接收完成
        if (xhr.readyState == 4) {
            //判断服务器返回的http状态码，若是200则连接成功
            if (xhr.status == 200) {
                //获取服务器响应数据
                var result = xhr.responseText;
                console.log(result);
            }
        }
    }

Servlet

@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    @Override
    public void init() throws ServletException {
        System.out.println("成功连接到Servlet");
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("doGet");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().write("已成功以GET方法连接");
        String name = req.getParameter("name");
        String psd = req.getParameter("psd");
        System.out.println("name="+name);
        System.out.println("psd="+psd);

    }

   @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       System.out.println("doPost");
       resp.setCharacterEncoding("UTF-8");
       resp.getWriter().write("已成功以POST方法连接");
       String name = req.getParameter("name");
       String psd = req.getParameter("psd");
       System.out.println("name="+name);
       System.out.println("psd="+psd);
    }
}

结果

总结

1、前端和后台服务数据交互方式：get和post

（1）get方式提交，所有的参数都会在超链接后面通过？的方式提交过去，多个参数之间通过&符号进行间隔

（2）post方式：参数不能通过超链接携带，而是通过服务器传参

注意：超链接提交数据，统一都是用get方式提交

2、AJAX

post请求与get请求区别：

（1）参数不能在url后面携带

（2）参数必须通过send方法后面发送过去，格式：parm=value&parm=value

（3）send方法之前必须发送请求头：setRequestHeader