原生Aajax 和jQuery Ajax 写法个人总结

原生Ajax与jQuery Ajax写法个人总结

简介

Ajax（Asynchronous JavaScript and XML）是指一种创建交互式、快速动态网页的技术，在不重新加载整个网页的情况下，能够异步地更新部分网页内容。本文将介绍原生Ajax与jQuery Ajax的写法及其异同点。

原生Ajax写法

XMLHttpRequest对象

原生Ajax基于XMLHttpRequest对象实现。XMLHttpRequest对象是由浏览器提供的内置对象，可用于客户端与服务器之间的数据传输。

发送AJAX请求

原生Ajax的主要过程是创建XMLHttpRequest对象，向服务器发送请求，接收服务器的响应并处理结果。代码示例如下：

let xhr = new XMLHttpRequest();
xhr.open('GET', '/example.php', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

1. new XMLHttpRequest()：创建一下请求对象。
2. xhr.open()：初始化请求对象。
3. xhr.onreadystatechange：指定当readyState值改变时，要调用的方法。
4. xhr.send()：向服务器发送请求。

以上代码是使用GET方法向/example.php发送请求，并在响应成功后输出响应内容。

发送POST请求

与GET请求不同，POST请求需要在请求头中加入Content-Type字段，指定请求的数据类型。代码示例如下：

let xhr = new XMLHttpRequest();
xhr.open('POST', '/example.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send('data=test');

1. xhr.setRequestHeader()：将一个请求头信息附加到XMLHttpRequest上。
2. xhr.send()：该方法向服务器端发送请求。

以上代码是使用POST方法向/example.php发送请求，并提交了data=test的数据。

jQuery Ajax写法

$.ajax()

jQuery的Ajax方法只需要调用$.ajax()即可。与原生AJAX相比，jQuery的异步请求可以更加简洁明了。以下示例中，我们使用$.ajax()高效地获取服务器端返回的数据。

$.ajax({
  type: 'GET',
  url: '/example.php',
  success: function(response) {
    console.log(response);
  }
});

与原生Ajax的代码相比，$.ajax()的API调用更为简洁明了，同时也可以通过$.ajax()进行POST请求。示例代码如下：

$.ajax({
  type: 'POST',
  url: '/example.php',
  data: {data: 'test'},
  dataType: 'json',
  success: function(response) {
    console.log(response);
  }
});

1. dataType: 'json'：表示响应数据的类型，需根据服务器端的数据类型进行设定，以便获取正确的响应结果。

异同点总结

异同点

1. jQuery Ajax相比原生Ajax略为简洁，并且API更为明了。
2. 原生Ajax能够处理更多的数据类型与低版本浏览器，但使用较为繁琐。
3. jQuery Ajax能够容易地处理JSONP跨域，适合较为简单的数据交互场景。

示例说明

以下给出两条示例说明。

1. 原生Ajax获取JSON数据

let xhr = new XMLHttpRequest();
xhr.open('GET', '/example.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

以上代码中，我们使用原生Ajax获取JSON数据并输出到控制台。

1. jQuery Ajax获取HTML数据，显示在页面上

$.ajax({
  type: 'GET',
  url: '/example.html',
  success: function(response) {
    $('#result-container').html(response);
  }
});

以上代码中，我们使用jQuery Ajax获取HTML数据，并将它显示在id为result-container的容器上。