Ajax-XMLHttpRequest还是VS jQuery?我的问题中的代码实际上是相同的吗?

时间:2018-12-11 12:35:20

标签: javascript jquery ajax xmlhttprequest

为什么实际上没有更多这样的示例:

var xhr = new XMLHttpRequest();
// Second step is to create a callback function where I should get response from a web server, so here it is:
xhr.onreadystatechange = function()
{
    // Ready State is checking is my request succesfuly done (4 means it, that all data from server is received) and if so -> change a html
    // 200 means that everything is fine, so with checking is status 200 we ensure it's good one? 
  if(xhr.readyState === 4 && xhr.status === 200 )
  {
    // Now I should work with data I received from web server, that are stored in xhr.responseText
    document.getElementById('ajax').innerHTML = xhr.responseText;
  }
};
// Step 3 open a request
// First 

parameter is HTTP method that I'm going to use, in this case it's GET, second parameter is URL up to my data
xhr.open('GET', 'sidebar.html');
// Step 4 sending a request to the web server
xhr.send();

我今天看到的大多数代码都是这样的:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Q1:第二个示例中的代码与第一个示例中的代码是否准确地相同? 只是更短的方法?

Q2:并且可能没有人像我在第一个示例中那样写代码吗?每个人都在正确使用jQuery,因为在任何地方都看不到类似的代码?大部分代码基于第二个示例?

Q3:第二个示例中的success: success实际上等于:

if(xhr.readyState === 4 && xhr.status === 200 ) ?

1 个答案:

答案 0 :(得分:1)

Q1:$.ajax是Jquery进行Ajax请求的通用方法,您甚至拥有较短的方法,例如$.get$.getScript$.getJSON$.post等等。但是,基本上,jquery的ajax方法和XMLHttpRequest都执行ajax(异步)请求。您的示例并不相同,因为它们执行不同的操作,并且$.ajax示例是通用的,但实际上,它们的用法相同。

Q2:实际上,这实际上取决于开发人员,在大多数情况下,我们使用某种库来帮助以更友好的语法进行ajax请求(例如,我使用rails,所以我使用rails-ujs)。 jquery的好处是您需要添加jquery,如果您已经使用过jquery,则没有理由不使用它的方法。另一方面,如果您不使用jquery,那么仅针对ajax方法添加整个框架是没有意义的(如果需要类似的东西,可以添加更轻量的库)。大多数人不使用普通方法,因为使用已经添加了自定义方法并处理跨浏览器兼容性的某些框架真的很常见。如果您想使用香草方法,那么总是有https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest文档(在xmlhttprequest的搜索示例中,您会发现很多)

Q3:从文档中,readyState === 4表示请求已完成,而status === 200表示请求已成功。我不认为它们是等效的,因为有200个以上的http成功代码(所有2xx代码)。您可以检查状态是否在200到226之间,但大多数情况下成功只有200。

我将保留$.ajax文档,以确保完整性http://api.jquery.com/jquery.ajax/