AJAX异步

Posted 2020-12-31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX异步相关的知识，希望对你有一定的参考价值。

同步：点击连接或者提交按钮页面才会跳转，整个页面都会刷新；

异步：点击按钮或者连接只会让页面局部进行刷新；

AJAX的功能：完成页面的局部刷新，不中断用户的体验。

AJAX：异步的javascript和xml（Asynchronous Javascript And XML）

　　Asynchronous Javascript（异步的javascript）：

　　　　JavaScript中有一个对象XMLHttpRequest可以向服务器异步发送请求；

　　XML：

　　　　使用XML作为数据传输的格式；（不论什么语言都可以以XML作为数据传输的一种规范，因为各个语言都支持对xml的解析）

　　　　JSON：javascript的一个对象，它的格式是key，value的键值对。（更为小巧的数据格式）

XMLHttpRequest:

　　属性：

　　　　readyState：XMLHttpRequest的状态：

　　　　　　0（未初始化）对象已经建立，但是尚未初始化（尚未调用open方法）

　　　　　　1（初始化）对象已经建立，尚未调用send方法

　　　　　　2（发送数据）send方法已经调用，但是当前的状态及http头未知

　　　　　　3（数据传送中）已接受部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误

　　　　　　4（完成）数据接受完毕，此时可以通过responseBody和responseText获取完整的回应数据

　　　　onreadystatechange:当XMLHttpRequest状态改变的时候触发一个函数；

　　　　status：获取响应的状态码。eg：200，404...

　　　　responseText:获得响应的文本数据

　　　　responseXML:获得响应的XML数据

　　方法：

　　　　open（请求方法，请求路径，是否异步）：异步去向服务器发送请求；

　　　　send（请求参数）：发送请求；

　　　　setRequestHeader(头信息，头的值)：处理POST请求方法的中文问题；

　　创建XMLHttpRequest对象：（不同的浏览器及不同的版本获取方式不一样，一般不自行创建，js有些框架已经封装好了直接调用即可，如Jquery）

　　　　IE：将XMLHttpRequest对象封装在一个ActiveXObject组件；

　　　　Firefox：直接就可以创建XMLHttpRequest对象；

　　　　eg：

<script type="text/javascript">
        function createXMLHttpRequest(){
            var xmlHttpRequest;
            try{
                //Firefox,Opera 8.0+,Safari
                xmlHttpRequest = new XMLHttpRequest();
            }catch(e){
                try{
                    //Internet Explorer
                    xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");
                }catch(e){
                    try{
                        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                        
                    }
                }
            }
            return xmlHttpRequest;
        }
    </script>

获取XMLHttpRequest最原始的方法

AJAX的入门

　　AJAX的编写步骤：

　　　　第一步：创建一个异步对象；

　　　　第二步：设置对象状态改变触发一个函数；

　　　　第三步：设置向后台提交的路径

　　　　第四步：发送请求；

　　异步请求的两种提交方式：GET&POST：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax</title>
</head>
<script type="text/javascript">
    //        获得XMLHttpRequest对象
    function createXMLHttpRequest() {
        var xmlHttpRequest;
        try {
            //Firefox,Opera 8.0+,Safari
            xmlHttpRequest = new XMLHttpRequest();
        } catch (e) {
            try {
                //Internet Explorer
                xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {

                }
            }
        }
        return xmlHttpRequest;
    }
    //        ajax的GET请求
    function ajax_get() {
        //1.创建异步对象
        var xhr = createXMLHttpRequest();
        //2.设置状态改变的监听、回调函数。
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) { //请求发送成功
                if (xhr.status == 200) { //响应也成功
                    //获得响应数据：
                    var data = xhr.responseText;
                    //回写数据：
                    document.getElementById("ajaxdiv").innerHTML = data;
                }
            }
        }
        //3.设置请求路径
        xhr
                .open(
                        "GET",
                        "${pageContext.request.contextPath}/AjaxServlet?username=张三&password=123",
                        true);
        //4.发送请求
        xhr.send(null);//如果没有参数写null，get提交参数拼接在open()中的地址里。
    }
    //        ajax的POST请求
    function ajax_post() {
        //1.创建异步对象
        var xhr = createXMLHttpRequest();
        //2.设置状态改变的监听、回调函数。
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) { //请求发送成功
                if (xhr.status == 200) { //响应也成功
                    //获得响应数据：
                    var data = xhr.responseText;
                    //回写数据：
                    document.getElementById("ajaxdiv").innerHTML = data;
                }
            }
        }
        //3.设置请求路径
        xhr
                .open("POST", "${pageContext.request.contextPath}/AjaxServlet",
                        true);
        //4.设置头信息，解决post无法获得参数的问题
        xhr.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded")
        //5.发送请求
        xhr.send("username=张三&password=123");//如果没有参数写null，get提交参数拼接在open()中的地址里。
    }
</script>
<body>
    <div id="ajaxdiv"
        style="width: 300px; height: 300px; border: 1px solid red;"></div>
    <input type="button" onclick="ajax_get()" value="AJAX的GET请求" />
    <input type="button" onclick="ajax_post()" value="AJAX的POST请求" />
</body>
</html>

jsp页面代码

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = new String(request.getParameter("username").getBytes("iso-8859-1"), "utf-8");
        String password = new String(request.getParameter("password").getBytes("iso-8859-1"), "utf-8");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print("我是get回显的数据:username="+username+";password="+password);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print("我是post回显的数据:username="+username+";password="+password);
    }
}

servlet服务端

以上是关于AJAX异步的主要内容，如果未能解决你的问题，请参考以下文章

ajax的async属性（控制同步和异步）

jquery的ajax同步和异步