AJAX异步更新

AJAX学习 本文总阅读量次

什么是 AJAX ？

  • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），意思就是用JavaScript执行异步网络请求。
  • AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
  • AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
  • 用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。
  • 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象

步骤

  1. 创建XMLHttpRequest对象：通过检测window对象是否有XMLHttpRequest属性来判断浏览器是否支持标准的XMLHttpRequest，创建XMLHttpRequest对象（不支持则创建ActiveXObject对象）。
  2. 判断对象状态：通过XMLHttpRequest的onreadystatechange事件（以及readyState还有status属性）判断对象状态（请求是否初始化、服务器连接是否建立、请求是否接收、请求是否处理中、请求是否已完成且响应已就绪）。
  3. 获取响应数据：判断到“请求已完成且响应已就绪”时可使用XMLHttpRequest 对象的 responseText 或 responseXML 属性来获得响应数据。
  4. 向服务器发送请求：使用XMLHttpRequest 对象（或者ActiveXObject对象）的 open() 和 send() 方法向服务器发送请求。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
//1.创建XMLHttpRequest对象
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
//2.每当XMLHttpRequest对象状态发生变化时，调用onreadystatechange属性
xmlhttp.onreadystatechange=function()
  {//3.通过readyState和status判断请求是否初始化等（具体看readyState参数值）
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {//4.判断出“请求已完成，且响应已就绪”时,
    //通过responseText属性获取来自服务器响应的数据
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
//5.向服务器发送请求
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>


使用多个AJAX任务的步骤

  • 如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
  • 该函数调用应该包含 URL (发送请求时open方法的参数url)以及发生 onreadystatechange 事件（发生状态变化）时执行的任务（每次调用可能不尽相同）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<script type="text/javascript">
var xmlhttp;
//标准函数loadXMLDoc
function loadXMLDoc(url,cfunc)
{
//1.判断是否含有XMLHttpRequest属性，创建对象
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
//2.每当 XMLHttpRequest对象状态发生改变时，就会调用onreadystatechange（也就是cfunc）
xmlhttp.onreadystatechange=cfunc;
//4.向服务器发送请求
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {//3.调用标准函数，把url传入并编写标准函数中的cfunc（即：每当XMLHttpRequest对象状态发生改变时会调用的函数）
  if (xmlhttp.readyState===4 && xmlhttp.status===200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

</body>
</html>

原链接

AJAX 的基础：XMLHttpRequest()

  • XMLHttpRequest 对象用于和服务器交换数据。

创建 XMLHttpRequest 对象

  • 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
  • 但是老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象.
  • 所以为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();//创建 XMLHttpRequest 对象
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建ActiveX 对象
      }
  • 通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest。注意，不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断JavaScript特性将非常复杂。

向服务器发送请求

  • 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
    1
    2
    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型,GET 或 POST
url:文件在服务器上的位置
async:true（异步）或 false（同步）,默认true，可不写
send(string) 将请求发送到服务器。
string:仅用于 POST 请求
  • 最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
  • 注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。

GET 还是 POST？

  • 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
  • 然而，在以下情况中，请使用 POST 请求：
  1. 无法使用缓存文件（更新服务器上的文件或数据库）
  2. 向服务器发送大量数据（POST 没有数据量限制）
  3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
  • 注意区分:表单中的method属性值默认GET，推荐使用 POST（更加安全）。
  • GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据
responseXML 获得 XML 形式的响应数据

responseText属性

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

responseXML 属性

  • 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
  • 请求 books.xml 文件，并解析响应：
    1
    2
    3
    4
    5
    6
    7
    8
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;
  • 完整例子

onreadystatechange 事件

  • 每当 readyState 改变时(即XMLHttpRequest对象的状态发生变化时)，就会触发 onreadystatechange 事件。
    • 类似image对象的onload事件和onerror事件。
  • readyState 属性存有 XMLHttpRequest 的状态信息。
  • 下面是XMLHttpRequest 对象的三个重要的属性：
属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 200: “OK” ；404: 未找到页面
  • 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
  • 当 readyState 等于 4 且状态为 200 时，表示响应已就绪。

使用 Callback 函数

  • callback 函数是一种以参数形式传递给另一个函数的函数。
  • 如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
  • 该函数调用应该包含 URL (发送请求时open方法的参数url)以及发生 onreadystatechange 事件（发生状态变化）时执行的任务（每次调用可能不尽相同）
  • 函数调用：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function myFunction()
    {
    //调用标准函数，把url传入并编写标准函数中的cfunc（即：每当readyState 属性改变时会调用的函数）
    loadXMLDoc("/ajax/test1.txt",function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
    }
  • 被调用的标准的函数：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function loadXMLDoc(url,cfunc)
    {
    //判断是否含有XMLHttpRequest属性，创建对象
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    //每当 readyState 属性改变时，就会调用onreadystatechange（也就是cfunc）
    xmlhttp.onreadystatechange=cfunc;
    //向服务器发送请求
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    }
  • 例子

jQuery中的ajax方法

注意：HTTP请求的类型不止GET和POST，还有PUT、PATCH、DELETE

$.ajax()执行异步 AJAX 请求

  • ajax() 方法用于执行 AJAX（异步 HTTP）请求。
  • 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
  • 语法：$.ajax({name:value, name:value, ... })
  • 返回值：一个Promise对象
  • 该参数规定 AJAX 请求的一个或多个名称/值对。

    url:规定发送请求的 URL。默认是当前页面。
    success(result,status,xhr):当请求成功时运行的函数。

  • 更多参数可参考菜鸟教程
  • 例子

$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据

  • $.get() 方法使用 HTTP GET 请求从服务器加载数据。
  • 语法：$.get(URL,data,function(data,status,xhr),dataType)
    参数
  • 返回值：一个Promise对象
  • 例子

$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据

  • $.post() 方法使用 HTTP POST 请求从服务器加载数据.
  • 语法：$(selector).post(URL,data,function(data,status,xhr),dataType)
    参数
  • 返回值：一个Promise对象
  • 例子

中断ajax请求

XMLHttpRequest.abort()

jquery ajax abort()

AJAX学习