什么是XMLHTTPRequest对象

XMLHTTPRequest对象是一个API，用于从服务器获取数据。XMLHTTPRequest基本上用于Ajax编程。它检索任何类型的数据，如json、xml、文本等。它在后台请求数据并更新页面，而无需在客户端重新加载页面。一个XMLHTTPRequest的对象用于客户端和服务器之间的异步通信。.ajax()方法被用来创建XMLHTTPRequest对象。.ajax()在后台进行以下步骤。

• 从后台发送数据。
• 接收来自服务器的数据。
• 更新网页而不需要重新加载页面。

下面我们将看到如何用$.ajax()方法创建XMLHTTPRequest对象。

语法:

var XHR = $.ajax({configs});

示例:

// Example showing how XMLHTTPRequest object created
var XMLO = $.ajax({
 
    // Our sample URL to make the request
    url: 'https://jsonplaceholder.typicode.com/todos/1',
 
    // type of Request
    type: "GET"
});

现在我们将看到我们可以从服务器上检索的数据类型，以及我们对各自的数据类型有什么预处理程序。

数据类型：这些是我们可以向服务器请求的数据类型。可用的数据类型有文本、xml、html、脚本、jsonp和json。在这些数据类型的基础上，我们在处理XMLHTTPRequest对象的处理程序之前对响应指定预处理程序。以下是指定的数据类型的预处理程序。

• Text。如果数据类型是文本，则不会对响应进行预处理。它可以通过XMLHTTPRequest对象的responseText属性来访问。
• xml。在XML的情况下，预处理器jQuery.parseXML被应用到响应，然后作为xml文档传递给处理程序。它可以通过XMLRequestHTTPRequest对象的responseXML属性访问。
• html。在html数据类型的情况下，我们没有为响应指定任何预处理程序。它可以通过responseText属性来访问。
• string。在脚本的情况下，脚本将首先运行，然后以字符串的形式处理给处理器。
• jsonp。在请求jsong的情况下，我们必须指定$.ajax()方法的jsonpCallback属性，它将在将json对象传递给后续处理程序之前执行。
• json: 在json的情况下，响应被解析为jQuery.parseJSON，然后再传递一个对象给处理程序。

属性： XMLHTTPRequest对象有许多有用的类属性，有助于灵活处理响应。XMLHTTPRequest对象的属性如下。

• readyState。该属性表示连接的状态。
• status。它包含来自服务器的http响应代码。
• statusText。它包含来自服务器的http响应字符串。响应文本。它包含来自服务器的文本格式的响应。
• responseXML。它包含来自服务器的响应Xml。
• getAllResponseHeaders。该属性以字符串形式返回所有的头文件名称。
• getResponseHeader。它接收头的名称并返回头的文本值。
• setReaquestHeader。它用于设置请求头的值。
• overrideMimeType。此属性用于设置mime类型，该类型用于将响应数据类型处理为文本或XML类型。

示例:

// Demonstrating Properties of XMLHTTPRequest object
<script>
 
var xmlObj = $.ajax({
 
    // Our sample url to make request
    url: 'https://jsonplaceholder.typicode.com/todos/1',
 
    // type of Request
    type: "GET"
});
 
xmlObj.always(function(a, b, c) {
    console.log(" # Status of request is : ", c.status);
    console.log(" # readyState of request is : ", c.readyState);
    console.log(" # statusText of request is : ", c.statusText);
    console.log(" # All Response Headers of request is : ",
           c.getAllResponseHeaders);
 });
</script>

输出:

# Status of request is : 200
# readyState of request is : 4
# statusText of request is : success
# All Response Headers of request is : function(){return h?p:null}

下面是XMLHTTPRequest对象的一些属性的例子。

方法：我们知道XMLHTTPRequest进行异步通信，因此它返回承诺。我们有许多jQuery XMLHTTPRequest对象的承诺方法。可用的承诺方法有。

• xmlObject.then()。这个方法需要两个回调函数func1、func2作为参数。func1在承诺被成功解决时调用。而func2在请求失败时被调用。
• xmlObject.always()。这个方法采取单一的回调函数。这个方法使处理程序在请求被解决或拒绝时被调用。参数函数总是被调用而不关心请求。
• xmlObject.then()。这个方法接受单一的回调函数。当我们的请求被解决时，这个方法将被调用。参数函数将随着请求的解决而运行。
• xmlObject.fail(): 这个方法接受单一的回调函数。当我们的请求被拒绝时就会调用这个方法。

下面是XMLHTTPRequest对象的一些方法的例子。

示例:

// Example demonstrating methods of XMLHTTPRequest
// object
<script>
 
var xmlObj = $.ajax({
 
    // Our sample url to make request
    url: 'https://jsonplaceholder.typicode.com/todos/1',
     
    // type of Request
    type: "GET",
});
 
xmlObj.then(function(){
    console.log(" #Then is resolved ");
});
 
xmlObj.fail(function(){
    console.log(" #Fail is resolved ");
});
 
xmlObj.always(function(){
    console.log(" #Always is resolved ");
});
 
xmlObj.done(function(){
    console.log(" #Done is resolved ");
});
         
</script>

输出:

#Always is resolved 
#Done is resolved 
#Then is resolved