Ajax —— Ajax基础

Posted 2020-12-10 码农的成长

1.   Ajax介绍

Ajax即Asynchronous javascript and XML，是异步的JavaScript与XML。Ajax提供了基于服务器交换数据并实现局部更新网页的技术，在不重新加载整个网页的情况下，可以接受来自服务器请求到的数据，提高了浏览页面的效率和用户体验。

 

2.   Ajax基础

2.1.创建Ajax对象

XMLHttpRequest是Ajax的对象，所有现代浏览器（IE7+、Firefox、Chrome、Safari、Opera）均支持XMLHttpRequest对象，而低版本的IE（IE5和IE6）使用ActiveXObject对象。XMLHttpRequest用于在后台与服务器交换数据。即可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

为了兼容所有浏览器的情况，包括低版本的IE，创建Ajax对象可以使用如下代码：

function getAjax() {
    var xhr = null;
        if(XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else if(ActiveXObject){
            xhr = new ActiveXObject("Microsoft XMLHTTP");
        }
        return xhr;
}

2.2.XHR请求

XMLHttpRequest对象用于和服务器交换数据，将请求发送到服务器，主要使用open()和send()方法

open：创建一个新的http请求，并指定此请求的方法、URL以及验证信息

语法：

XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

示例代码：

var xhr = getAjax();
    /**
     *  oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
     *  bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
     *  bstrUrl 请求的URL地址，可以为绝对地址也可以为相对地址。
     *  varAsync[可选]布尔型，指定此请求是否为异步方式，默认为true。
     *  如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
     */
    xhr.open("GET", "/getTime");
    xhr.send();

 

send：发送请求到http服务器并接收回应：

语法：

XMLHttpRequest.send(varBody);

varBody：仅用于POST请求。

对比一下简单的GET方法发送信息与POST方法发送信息：

//GET方式
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

//POST方式
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 html 表单form中那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
xhr.open("POST", "/login");
//Ajax设置请求编码 -- 使用POST请求传递参数必须加上
//位置在send之前，open之后
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//使用POST发送数据，在send里面，写入单独传参的数据
xhr.send("username=" + username + "&password=" + password);

GET和POST使用场景：

GET相对于POST传递数据更简单快捷，在不涉及信息安全的场景下可以使用；

然而，在如下情况下，请使用POST请求传递数据：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2.3.XHR异步监听

XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)，在这个方法中，当Async为true时，表示执行Ajax后端请求时是使用异步请求的方式，这里需要在响应处使用onreadystatechange事件进行监听Ajax的状态：

其中Async参数为可选布尔型，指定此请求是否为异步方式，默认为true。如果为true，当状态改变时会调用onreadystatechange属性指定的回调函数。

//Ajax的异步问题可以通过Ajax的状态来解决：Ajax执行的每一步都有它对应的一个状态 readyState
    //0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
    //1 (初始化) 对象已建立，尚未调用send方法
    //2 (发送数据) send方法已调用，但是当前的状态及http头未知
    //3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
    //4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
    //注意：一般我们只需要一个点：readyState==4时，状态已经拿到了
//Ajax对象中有一个监听器，它可以监听每一次状态的变化（onreadystatechange）
<script>
    function getTime02() {
        var xhr = getAjax(); //readyState == 0
        /**
         *  oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
         *  bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
         *  bstrUrl 请求的URL地址，可以为绝对地址也可以为相对地址。
         *  varAsync[可选]布尔型，指定此请求是否为异步方式，默认为true。
         *  如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
         */
        xhr.open("GET", "/getTime");    //readyState == 1
        //监听代码一定放在send前面
        //监听状态一般有两种情况：readyState状态和status状态
        //readyState状态：Ajax请求状态；
        //status状态：http请求响应的状态码
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                console.debug(xhr.responseText);
            }
        };
        xhr.send(); //readyState == 2  3  4；发送整个流程
        /**
         *  responseText 将前台的响应信息作为字符串返回，注意：一定是作为字符串返回的
         */
    }
    </script>
    <button onclick="getTime02()">获取时间</button>

2.4.XHR响应

如果需要获取来自服务器的响应，需要调用XMLHttpRequest对象的responseText或者responseXML属性。

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

 

 

 

 

 

 

responseText属性：

将响应信息作为字符串返回，因此你可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML属性：

如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性，比如请求books.xml文件，并解析响应：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

2.5.XHR callback函数

callback函数是一种以参数形式传递给另一个函数的函数。

在执行多个Ajax调用任务时，可以在XMLHttpRequest对象中创建一个标准的执行流程函数，每次Ajax请求都调用这个函数执行open、send一套流程。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

<script type="text/javascript">
        var xhr = null;
        function loadXMLDoc(url, cfunc) {
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else if(ActiveXObject){
                xhr = new ActiveXObject("Microsoft XMLHTTP");
            }
            xhr.open("GET", url, true);
            xhr.onreadystatechange = cfunc;
            xhr.send();
        }
        
        function myFunction() {
            loadXMLDoc("/ajax/test1.txt", function () {
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.getElementById("myDiv").innerText = xhr.responseText;
                }
            })
        }
    </script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>
</body>

 

博文参考文档W3School Ajax部分内容：https://www.w3school.com.cn/ajax/index.asp