Ajax and jQuery Ajax

我们做前端的，肯定不会只满足于写一些静态网页，我们希望做到网站(与服务器)的数据交互。不得不说，现在前端的发展真是太快了，不断的更新迭代，新的技术就如同雨后春笋，需要我们具备持续的学习能力才能更好的完成工作。
本文主要介绍原生Ajax和jQuery Ajax的使用。能够实现AJAX功能的还有两种现在比较流行的技术，Axios、Fetch。
好了，废话不多说，开始进入正题。

在这里插入图片描述

简单说一下这四者的区别吧：
Ajax:

全称Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

jquery Ajax:

是 jQuery 底层 AJAX 实现。简单易用的高层实现，$.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。jQuery ajax - ajax() 方法

Axios:

axios不是原生JS的，需要进行安装，它不但可以在客户端使用，也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于Promise对象的。特性：从浏览器中创建 XMLHttpRequests、从 node.js 创建 http 请求、支持 Promise API、拦截请求和响应等。Axios 中文文档传送门

Fetch:

Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是service workers、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。Fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的Promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

一、什么是Ajax

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，较少网络数据的传输量。同时，由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅。

二、Ajax原理是什么

在这里插入图片描述

三、原生Ajax怎么写

创建一个ajax请求，依赖一个xhr对象

var xhr;
if (window.XMLHttpRequest) { // 兼容IE7+, Firefox, Chrome, Opera, Safari
      xhr = new XMLHttpRequest();
} else { // 兼容 IE6, IE5
       xhr = new ActiveXObject("Microsoft.XMLHTTP");
 }

监听xhr对象的状态

   xhr.onreadystatechange = function() {
       if (xhr.readyState == 4) { 
             if (xhr.status == 200) { 
                 console.log(xhr.responseText);
              }
           }
    }

 汇总XHR的属性和方法及事件
 【属性】
 	• xhr.response 响应主体内容
 	• xhr.responseText 响应主体的内容是字符串（JSON或者XML格式字符串都可以）
 	• xhr.responseXML 响应主体的内容是XML文档
 	• xhr.status 返回的HTTP状态码
 	• xhr.statusText 状态码的描述
 	• xhr.timeout 设置请求超时的时间
 	• xhr.withCredentials 在跨域请求中是否允许携带证书（携带COOKIE）
 【方法】
 	• xhr.abort() 强制中断AJAX请求
 	• xhr.getAllResponseHeaders() 获取所有响应头的信息
 	• xhr.getResponseHeader([key]) 获取KEY对应的响应头信息 
 		例如：xhr.getResponseHeader( 'date') 就是在获取响应中的服务器时间
 	• xhr.open() 打开URL请求
 	• xhr.overrideMimeType() 重写MIME类型
 	• xhr.send() 发送AJAX请求
 	• xhr.setRequestHeader() 设置请求头

建立连接
GET请求实例：

xhr.open('GET', 'tologon.php?username=' + input.value, true);
xhr.send(null);

xhr.open(method,url,async);
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置，如果是get请求，参数已？号开头下载地址后面
- async：true（异步）或 false（同步）
xhr.send(string);
- post请求时才使用字符串参数，否则不用带参数。

POST请求实例：

 xhr.open("POST", 'Topost.php', true);
 // 设置一个请求头，post请求在发送之前，得把post请求的参数格式指定一下
 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
 // 发送 post请求的参数写在send中 // key1=value1&key2=value2
 xhr.send("uname=" + uname.value);

四、jQuery Ajax怎么写

jQuery Ajax是对原生XHR的封装，除此以外还增添了对JSONP的支持。

注意：JQuery 1.9版本版本以下不支持大文件请求

post请求实例

 $.ajax({
    type: "POST",
    url: "jq.php",
    //请求的媒体类型
    contentType: "application/json;charset=UTF-8",
    data: {
    "username": $("input").val(),
    "score": 100
    },
    success: function(data) {
    	console.log(data)
    },
    error: function(err) {
        console.log(err)
      }
  })

type:请求方式 (“POST” 或 “GET”)，默认为 “GET”。
data:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
success:请求成功后的回调函数。
error:请求失败时调用此函数。
链接: jQuery ajax - ajax() 方法.