[AJAX] ajax详解

原创

Golang梦工厂 2022-08-30 14:31:56 博主文章分类：AJAX ©著作权

©著作权归作者所有：来自51CTO博客作者Golang梦工厂的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言：
最近在复习AJAX，所以打算在博客中记录一下AJAX。

什么是AJAX?

AJAX = Asynchronous JavaScript and XML。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX过程？

创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定其请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新
例如：

var xhr = null; // 创建异步对象
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest(); // ie7+等现代浏览器
}else if(window.ActiveXObject){ // ie6，老版Opera
  xhr = new ActiveXObject('Microsft.XMLHTTP');
}
xhr.open('get','http://localhost:4000/test',true); // true是异步，可省略
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // post 必须设置
xhr.onreadystatechange = function(){ // 若为同步，此代码不用写，直接在send后，用`xhr.responseText`即可。
    if(xhr.readyState==4 && xhr.status==200){
    /* 
    readyState
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
    status
        200 OK
        404 Not Found
    */
      xhr.responseText;
      xhr.responseXML.children[0].children;
      JSON.parse(xhr.responseText);
    }
}
xhr.send(String); // 用于post传参，形式："a=1&b=2"，而get传参就在url后面用“?”拼接

AJAX优缺点

优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
缺点：：对搜索引擎不友好，要实现ajax下的前进后退功能成本较大；跨域问题限制

Ajax、jQuery.ajax、Axios和Fetch的区别

ajax最早出现的发送后端请求技术，利用用XMLHttpRequest对象。
$.ajax是jQuery中的发送后端请求技术，基于原生Ajax的封装。
Axios不是原生JS的，需要进行安装。它在client-side和server-side都可以使用。也可以在请求和响应阶段进行拦截。它是基于promise对象的
Fetch号称是AJAX的替代品，使用了ES6中的promise对象。其参数有点像jQuery.ajax。但是fetch不是对ajax的封装，而是原生js实现的，并没有使用XMLHttpRequest对象。

AJAX下使用get还是post

GET与POST相比，GET更简单也更快，并且在大部分情况下都能用。
然后在以下情况下，请使用POST请求：

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量的数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定更可靠

AJAX异步

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
MLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

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

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：

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

AJAX中 loadXMLDoc()函数

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

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符：

function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
    xx=x[i].getElementsByTagName("ARTIST");
      {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}