拉勾技术人年薪【50W+】成长计划!

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

内容来源于网络如有侵权请私信删除