AJAX学习

Posted 优才网

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX学习相关的知识，希望对你有一定的参考价值。


背景


最近的项目中大量地方需要使用AJAX，无奈，谁叫我既要写前台又要写后台呢，只好学习下这个技术点。

主要参考W3school文档：

http://www.w3school.com.cn/ajax/index.asp

记录下这些知识点，便于日后自己查阅

下面的一些测试代码建议在W3school中测试


AJAX 基础


AJAX = Asynchronous javascript and XML

即：异步的JavaScript和XML


AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在很多网站可以见到使用这种技术。


AJAX-XMLHttpRequest


  • 创建XMLHttpRequest对象


XMLHttpRequest是AJAX的基础。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。


创建XMLHttpRequest对象的语法：


variable = new XMLHttpRequest();


但是对于老版本的Internet Explorer（IE5和IE6）却是使用ActiveX对象，所以在开发中为了适应大多数的浏览器，常使用如下：


var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }


  • 向服务器发送请求


使用XMLHttpRequest对象的open()和send()方法：


xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();


method

description

open(method, url, async)

规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。string：仅用于 POST 请求


GET还是POST？


与POST相比，GET更简单也更快，并且在大部分情况下都能用。


然而，在以下情况中，请使用 POST 请求：


  • 无法使用缓存文件（更新服务器上的文件或数据库）

  • 向服务器发送大量数据（POST没有数据量限制）

  • 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠


示例：GET请求


1.简单的GET请求


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
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)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>


2.通过GET方法发送信息


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
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)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>


示例：POST请求


1.简单POST请求


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
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)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/ajax/demo_post.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>


2.像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
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)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>


注意：setRequestHeader(header, value)向请求添加 HTTP 头，header:规定头的名称，value:规定头的值。


url-服务器上的文件



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


该文件可以是任何类型的文件，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php（在传回响应之前，能够在服务器上执行任务）。


异步-True or False ？


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


对于web开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。


AJAX出现之前，这可能会引起应用程序挂起或停止。


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


  • 在等待服务器响应时执行其他脚本

  • 当响应就绪后对响应进行处理


Async=true


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


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
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)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>


Async=false


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


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


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


注释：当您使用async=false时，请不要编写onreadystatechange函数-把代码放到send()语句后面即可：


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","/ajax/test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>

  • 服务器响应


使用XMLHttpRequest对象的responseText或responseXML属性。


  • responseText获得字符串形式的响应数据。

  • responseXML获得XML形式的响应数据。


1.responseText 属性


如果来自服务器的响应并非XML，请使用responseText属性。


responseText属性返回字符串形式的响应，因此您可以这样使用：


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


2.responseXML属性


如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性：


请求books.xml文件：

http://www.w3school.com.cn/example/xmle/books.xml

并解析响应：


<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,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)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("title");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
</body>
</html>


  • onreadystatechange事件


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


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




  • onreadystatechange存储函数（或函数名），每当readyState属性改变时，就会调用该函数

  • readyState存有XMLHttpRequest的状态。从0到4发生变化。

  • 0:请求未初始化

  • 1:服务器连接已建立

  • 2:请求已接收

  • 3:请求处理中

  • 4:请求已完成，且响应已就绪

  • status

  • 200:“OK”

  • 404:未找到页面


在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。


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


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


使用Callback函数


callback函数是一种以参数形式传递给另一个函数的函数。


如果您的网站上存在多个AJAX任务，那么您应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。


该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）：


function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}


AJAX-高级


ASP/PHP请求实例-AJAX用于创造动态性更强的应用程序。

http://www.w3school.com.cn/ajax/ajax_asp_php.asp


AJAX可用来与数据库进行动态通信。

http://www.w3school.com.cn/ajax/ajax_database.asp


AJAX可用来与XML文件进行交互式通信。

http://www.w3school.com.cn/ajax/ajax_xmlfile.asp


AJAX实例


使用XMLHttpRequest对象的实例

http://www.w3school.com.cn/example/ajax_examples.asp


文章来源：

http://www.54tianzhisheng.cn/2017/06/23/AJAX/?utm_source=tuicool&utm_medium=referral


以上是关于AJAX学习的主要内容，如果未能解决你的问题，请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

vuejs学习笔记--属性，事件绑定，ajax

执行AJAX返回HTML片段中的JavaScript脚本

vuejs学习笔记--属性，事件绑定，ajax