【AJAX】是什么（原理）？怎么使用？

半花
89 阅读6分钟

AJAX的概念？

AJAX 全称 Async Javascript and XML

AJAX = 异步 JavaScript + XML

AJAX 是一种用于创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在 不重新加载 整个网页的情况下，对网页的某部分进行更新。

AJAX的原理

用JavaScript动作通过XmlHttpRequest（Http请求）对象向服务器发送异步请求

=>服务器响应

=>接收返回数据

=> 用JavaScript操作DOM更新页面 c2ea2f80c154095e1b5cef88b21a5b1e.png

如何使用

1、XHR创建对象

用XmlHttpRequest()构造函数初始化一个xmlhttp实例对象

var xmlhttp; 
if (window.XMLHttpRequest) 
{ 
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
xmlhttp=new XMLHttpRequest(); 
} 
else { 
// IE6, IE5 浏览器执行代码 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

2、XHR 请求

AJAX向服务器发送请求open()和send()

853a981955533c9e15c6371a7e2e03e6.png

GET和POST区别

288d348bea43533eaa7930484c64b2b7.png 1、GET

//案例（可能得到缓存结果）
xmlhttp.open("GET","/try/ajax/demo_get.php",true); 
xmlhttp.send();

//避免德奥缓存结果
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); 
xmlhttp.send();

//通过GET向服务器发送信息
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); 
xmlhttp.send();

2、POST

//案例
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

091b37850c00cc82b9a5973994ccc8cb.png

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

默认值是true

对于 web 开发人员来说，发送异步请求是一个巨大的进步。

很多在服务器执行的任务都相当费时。AJAX 出现之前，

这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需 等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true；

xmlhttp.open("GET","ajax_test.html",true);

1、Async=true

当使用 async=true 时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：

//实例
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ 
document.getElementById("xhh").innerHTML=xmlhttp.responseText; 
} 
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

2、Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

我们 不推荐 使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意： 当您使用 async=false 时，请 不要 编写 onreadystatechange

函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false); 
xmlhttp.send();
document.getElementById("xhh").innerHTML=xmlhttp.responseText;

3、XHR 响应

响应的属性有 1、responseText 获取字符串形式的响应数据 2、responseXML 获取XML形式的响应数据

//当用户点击上面的"获取我收藏的 CD"这个按钮，就会执行 loadXMLDoc() 函数。

//loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

//当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用 XML 数据的 填充 id="demo" 的表格元素：

// 异步加载 XML 文档

function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { 
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true); 
xhttp.send();
} 
function myFunction(xml) { 
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>"; 
var x = xmlDoc.getElementsByTagName("CD"); 
for (i = 0; i <x.length; i++) { 
table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + 
"</td><td>" + 
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; 
} 
document.getElementById("demo").innerHTML = table;
}

4、XHR readyState

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

07b42dac439336ea5e1da55cc1c2e073.png

// 一般我们想要获取数据之前会判断状态信息
//xmlhttp.readyState==4 && xmlhttp.status==200 表示：请求完成并且成功返回
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ 
document.getElementById("xhhh").innerHTML= xmlhttp.responseText;
} 
}

5、XHR ASP/PHP

在与ASP（Active Server Pages）和PHP这样的服务器端脚本语言交互时。

AJAX的主要作用是允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

这种能力极大地提升了用户体验，使得Web应用更加流畅和响应迅速。

ASP
function callASPNET() { 
var xhr = new XMLHttpRequest();
xhr.open("POST", "AjaxService.asmx/HelloWorld", true);
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8"); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
var response = JSON.parse(xhr.responseText).d; 
alert(response);
} 
}; 
xhr.send('{}'); // 发送空JSON对象，因为ASP.NET WebMethod可能需要它 
}
// 调用函数 callASPNET();
PHP
function callPHP() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "hello.php", true); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) 
{ 
alert(xhr.responseText); 
} 
}; 
xhr.send(); // 对于PHP示例，不需要发送任何数据 } 
// 调用函数 callPHP();

AJAX 实例

一个简单的AJAX实例

创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。

用AJAX加载 XML 文件

创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。

用AJAX进行一次 HEAD 请求

检索资源（文件）的头信息。

用AJAX进行一次指定的 HEAD 请求

检索资源（文件）的指定头信息。

用AJAX从ASP 文件返回数据

当用户在文本框内键入字符时网页如何与Web服务器进行通信

用AJAX从数据库返回数据

用AJAX网页如何获取数据库中的信息

用AJAX从XML 文件返回数据

创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中。

用callback函数的AJAX实例

用一个callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据。

AJAX JSON 实例

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，

JSON的语法规则

  1. 对象（Object） ：使用大括号{}表示，对象内部由若干条数据组成，每条数据由键值对（key:value）组成，键值对之间使用逗号,分隔。例如：{"name": "John", "age": 30}。
  2. 数组（Array） ：使用中括号[]表示，数组可以包含多个对象或其他数据类型（如字符串、数字等）。例如：[{"name": "John", "age": 30}, {"name": "Jane", "age": 25}]。
  3. 数据类型：JSON支持的数据类型包括字符串（String）、数字（Number）、对象（Object）、数组（Array）、布尔值（Boolean，即true和false）、null。
  4. 键和值的引号：JSON中的键和字符串类型的值必须用双引号"包围，且双引号需要使用转义字符``进行转义（如果需要在字符串中包含双引号）。

JSON的应用场景 数据交换、数据存储、数据可视化

使用 JSON.parse()方法将数据转换为 JavaScript 对象

1、获取json数据

function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var myArr = JSON.parse(this.responseText);
      myFunction(myArr)
    }
  }
  xmlhttp.open("GET","/try/ajax/json_ajax.json",true);
  xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xmlhttp.send();
}
function myFunction(arr) {
  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + 
    arr[i].title + '</a><br>';
  }
 document.getElementById("myDiv").innerHTML=out;
}

2、发送json数据

xmlhttp.send(JSON.stringify({ "email": "admin@runoob.com", "response": { "name": "runoob" } }));
avatar
文章
阅读
粉丝