Ajax引擎---XMLHttpRequest

作者: 罗志贇 | 来源:发表于2017-01-13 00:53 被阅读0次

Ajax引擎---XMLHttpRequest
AJAX引擎-XMLHttpRequest对象
ajax-1-概述
Ajax原理&ajax、axios、fetch区别
axios、 fetch、ajax
jQuery+Ajax
javascript 和 jQuery 的Ajax 用法
Ajax使用的四大步骤
AJAX
学习封装ajax

创建该对象

见下文的js代码
属性
- readdyState:只读的。返回的是short类型。
  
  作用：标识着XMLHttpRequest对象的当前状态。
  
  0：未初始化
  
  1：open方法已经调用了
  
  2：send方法已经调用了
  
  3：接收到了响应消息头，但没有接收到正文
  
  4：接收到了响应正文。响应结束
- responseText:只读的。返回的是String
  
  作用：接收服务器返回的文本类型的正文数据。
- responseXML：只读的。返回的是Document对象（JS中文档模型）
  
  作用：接收服务器返回的XML类型的正文数据。
- status：只读的。返回的是short
  
  作用：接收服务器返回的响应状态码
- statusText：只读的。返回的是String
  
  作用：接收服务器返回的响应吗描述
方法
- getAllResponseHeaders():返回所有的响应消息头。是一个String字符串
- getResponseHeander(headerName):返回指定头的值。是一个String字符串
- open(String method,String url,boolean async):建立与服务器的链接
  - method：请求方式。GET|POST
  - url：请求的服务器地址
  - async：是否是异步。true是异步的。默认就是true
- send(String data):发出请求。data参数是请求正文的内容数据
- setRequestHeander(String headerName,String headerValue):设置请求消息头
事件处理器
- onreadystatechange:指向一个函数，用于做事件处理
  
  XMLHttpRequest对象的readyState的每次变化都会触发onreadystatechange指向的事件处理器

2.执行步骤

引入的js文件

/**
 * Created by luozhiyun on 17/1/12.
 */
function getXHR() {
    var xmlHttp;

    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {

        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {

            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您的浏览器不支持AJAX！");
                return false;
            }
        }
    }
    return xmlHttp;
}

jsp源码(xhr执行步骤):

<%--
  Created by IntelliJ IDEA.
  User: luozhiyun
  Date: 17/1/12
  Time: 19:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
    <script type="application/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
    <script type="application/javascript">
        window.onload = function () {
            document.getElementById("one").onclick = function () {
                //xhr执行步骤

                //1、得到xhr（XMLHttpRequest）对象
                var xhr = getXHR();
                //2、注册状态变化监听器
                xhr.onreadystatechange = function () {
                    //做出具体的处理
                    if(xhr.readyState == 4){
                        if(xhr.status == 200) {
                            alert("服务器已经响应结束了，去看看吧");
                        }
                    }
                };

                //3、建立与服务器的链接
                //如果访问的地址相同，浏览器就不会真正的发出请求,所以指定一个time的变量,并无实际意义
                xhr.open("GET", "${pageContext.request.contextPath}/servlet/AServlet?time="+new Date().getTime());
                //4、向服务器发出请求
                xhr.send(null);//null代表没有正文
            };
        };
    </script>
  </head>
  <body>
  <input type="button" value="点我呀" id="one" >

  </body>
</html>

servlet源码:

package org.luoluo.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;

/**
 * Created by luozhiyun on 17/1/12.
 */
@WebServlet(name = "AServlet",urlPatterns = "/servlet/AServlet")
public class AServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("AServlet收到了");
    }
}