Ajax简介（JS&jQuery中的ajax）

前言
目录
一、Ajax简介
1️⃣什么是Ajax
2️⃣Ajax的作用
3️⃣Ajax的好处
二、JS方式Ajax的实现
1️⃣发送 Ajax 请求的五个步骤
2️⃣创建 XMLHttpRequest 对象
3️⃣向服务器发送请求
4️⃣服务器响应
5️⃣代码实现
三、jQuery中的Ajax
1️⃣jQuery框架的Ajax简介
2️⃣$.ajax()方法
3️⃣$.get()方法
4️⃣$.post()方法
 

---

一、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请求：

🍀POST请求

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

一个简单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);
});