Ajax简介与基本使用

前言

本文为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()方法。

方法	描述	参数
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求	method：请求的方式，GET或POST；url：请求路径；async：true（异步）或 false（同步）
send(string)	将请求发送到服务器	string：请求参数，仅用于POST请求。格式：名1=值1&名2=值2

🍀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属性改变时，就会调用该函数
readyState	存有XMLHttpRequest的状态。从0到4发生变化。0: 请求未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪
status	响应状态码。200: 成功；404: 未找到页面

在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请求的一个或多个名称/值对。下面的表格中列出了可能的名称/值：

名称	值	描述
async	Boolean	表示请求是否异步处理。默认true
beforeSend(xhr)	Function	发送请求前运行的函数。
cache	Boolean	表示浏览器是否缓存被请求页面。默认true
complete(xhr,status)	Function	请求完成时运行的函数（在请求成功或失败之后均调用，即在success和error函数之后）
contentType	String	发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”
context	Object	为所有AJAX相关的回调函数规定 “this” 值
data	Object,String	规定要发送到服务器的数据
dataFilter(data,type)	Function	用于处理XMLHttpRequest原始响应数据的函数
dataType	String	预期的服务器响应的数据类型。text：返回纯文本字符串；json：返回JSON数据
error(xhr,status,error)	Function	如果请求失败要运行的函数
global	Boolean	规定是否为请求触发全局AJAX事件处理程序。默认true
ifModified	Boolean	规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认false
jsonp	String	在一个jsonp中重写回调函数的字符串
jsonpCallback	String	在一个jsonp中规定回调函数的名称
password	String	规定在HTTP访问认证请求中使用的密码
processData	Boolean	规定通过请求发送的数据是否转换为查询字符串。默认true
scriptCharset	String	规定请求的字符集
success(result,status,xhr)	Function,Array	当请求成功时运行的函数
timeout	Number	设置本地的请求超时时间（以毫秒计）
traditional	Boolean	规定是否使用参数序列化的传统样式
type	String	规定请求的类型（GET或POST）
url	String	规定发送请求的URL。默认是当前页面
username	String	规定在HTTP访问认证请求中使用的用户名
xhr	Function	用于创建XMLHttpRequest对象的函数

代码示例：

$.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全栈学习技术清单~
👉算法刷题路线可参考：算法刷题路线总结与相关资料分享，内含最详尽的算法刷题路线指南及相关资料分享~