前言

本文为Ajax简介与基本使用相关知识，首先将对Ajax进行简介（包含：什么是Ajax、Ajax的作用、Ajax的好处），然后介绍JS方式Ajax的实现（包含发送 Ajax 请求的五个步骤、创建 XMLHttpRequest 对象、向服务器发送请求、服务器响应等），最后介绍jQuery框架中的Ajax（具体包含：jQuery框架的Ajax简介、$.ajax()方法、$.get()方法、$.post()方法等）。

📌博主主页：小新要变强 的主页
👉Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
👉算法刷题路线可参考：算法刷题路线总结与相关资料分享，内含最详尽的算法刷题路线指南及相关资料分享~
👉Java微服务开源项目可参考：企业级Java微服务开源项目（开源框架，用于学习、毕设、公司项目、私活等，减少开发工作，让您只关注业务！）

目录

一、Ajax简介

1️⃣什么是Ajax

• Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
• Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
• Ajax 是一种用于创建快速动态网页的技术。
• Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
• 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2️⃣Ajax的作用

Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，部分更新。

3️⃣Ajax的好处

• 减轻服务器负担，按需要获得数据
• 无刷新更新页面，减少用户实际和心理的等待时间
• 只更新部分页面，有效利用带宽
• 主流浏览器都支持Ajax

二、JS方式Ajax的实现

JS的Ajax：出现最早，使用一个对象XmlHttpRequest对象。专门用于进行Ajax请求发送，和响应的接收使用Ajax发请求，使用Ajax接收响应，使用JS进行页面刷新。

存在的缺点：

• 若使用JS的Ajax技术，为了实现简单功能，需要书写大量复制代码
• JS的Ajax代码，浏览器兼容性比较差

1️⃣发送 Ajax 请求的五个步骤

其实也就是 使用 XMLHttpRequest 对象的五个步骤。

• 请求的网址、请求方法get/post。
• 提交请求的内容数据、请求主体等。
• 接收响应回来的内容。

发送 Ajax 请求的五个步骤：

• （1）创建异步对象。即 XMLHttpRequest 对象。
• （2）设置请求的参数。包括：请求的方法、请求的url。
• （3）发送请求。
• （4）注册事件。onreadystatechange事件，状态改变时就会调用。如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
• （5）获取返回的数据。

2️⃣创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建XMLHttpRequest对象的语法：

var xmlhttp=new XMLHttpRequest();

3️⃣向服务器发送请求

XMLHttpRequest对象用于和服务器交换数据。如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法。

🍀GET请求

一个简单的GET请求：

xmlhttp.open("GET","DemoAJAXServlet",true);
xmlhttp.send();

🍀POST请求

一个简单POST请求：

xmlhttp.open("POST","DemoAJAXServlet",true);
xmlhttp.send();

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中填写发送的数据：

xmlhttp.open("POST","DemoAJAXServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=tom&age=20");

4️⃣服务器响应

获得来自服务器的响应，使用XMLHttpRequest对象的responseText或responseXML属性。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

请求被发送到服务器时，需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。

下面是XMLHttpRequest对象的三个重要的属性：

在onreadystatechange事件中，当readyState等于4且状态为200时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

5️⃣代码实现

//1.创建ajax核心对象XMLHttpRequest
var ajax = new XMLHttpRequest();
//2.与服务器建立连接
ajax.open("post","testAjax");
//3.设置请求头,如果请求方式为post，请求头必须设置
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.注册事件监听，监听服务器端对象状态的改变
//作用：服务器处理之后，响应客户端，通过此函数来接收响应的数据，此后在ajax中此函数被称为回调函数
ajax.onreadystatechange = function(){
  //判断服务器对象的状态是否为完成状态
  if(ajax.readyState == 4){ //4表示服务器完成
    //判断服务器是否处理成功
    if(ajax.status == 200){ //200响应状态码，表示处理成功
      alert("响应回的数据：" + ajax.responseText);
    }else {
      alert("处理失败：" + ajax.status);
    }
  }
}
//5.发送请求
var name = document.getElementById("name").value;
ajax.send("name="+name);

三、jQuery中的Ajax

1️⃣jQuery框架的Ajax简介

jQuery是一个优秀的JS框架，对JS原生的Ajax进行了封装。
与Ajax操作相关的jQuery方法在开发中经常使用的有三种：POST、GET、AJAX

2️⃣$.ajax()方法

$ .ajax()方法用于执行AJAX异步请求。所有的jQuery AJAX方法都使用$ .ajax()方法。该方法通常用于其他方法不能完成的请求。

语法：

$.ajax({name:value, name:value, ... })

该参数规定AJAX请求的一个或多个名称/值对。下面的表格中列出了可能的名称/值：

代码示例：

$.ajax({
  url : "checkUsername",
  type : "post",
  dataType : "text",
  data : "username="+$("#username").val(),
  beforeSend : function(){
    if($("#username").val()==""){
      alert("用户名不能为空");
      return false;
    }
    return true;
  },
  success : function(data){
    alert(data);
  }
});

3️⃣$.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据。

语法：

$.get(URL,data,callback,type);

参数解析：

• URL：请求的路径地址，必需项
• data：发送Key/value请求参数
• callback：请求成功后所执行的回调函数
• type：返回内容格式，xml, html, script, json, text, _default

代码示例：

$.get("checkUsername",{ username : $("#username").val() },function(data){
  alert(data);
});

4️⃣$.post()方法

$.post()方法通过HTTP POST请求从服务器上请求数据。

语法：

$.post(URL,data,callback,type);

参数解析：

• URL：请求的路径地址，必需项
• data：发送Key/value请求参数
• callback：请求成功后所执行的回调函数
• type：返回内容格式，xml, html, script, json, text, _default

代码示例：

$.post("checkUsername",{ username : $("#username").val() },function(data){
  alert(data);
});

后记

👉Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
👉算法刷题路线可参考：算法刷题路线总结与相关资料分享，内含最详尽的算法刷题路线指南及相关资料分享~