@Dale-Lin 2019-08-19T11:34:51.000000Z 字数 3028 阅读 731

AJAX

web开发技术

Ajax 用于在不重新加载整个网页的情况下，对网页的某部分进行更新，核心是 XMLHttpRequest 对象。

XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 的基础，用于在后台和服务器交换数据：

var xmlhttp = new XMLHttpRequest();

使用 window.XMLHttpRequest() 创建 XMLHttpRequest 对象。

向服务器发送请求

使用 XMLHttpRequest 对象的 open(methodStr, urlStr, asyncBool) 和 send() 方法发送请求到服务器：

xmlhttp.open("GET", "/try/ajax/demo_get.php", true);    //创建请求
xmlhttp.send();     //发送请求

open()
- methodStr：请求的类型；"GET" / "POST"。
- urlStr：请求路径。
- asyncBool：是否使用异步。
send()
- 发送 http 请求。

可以使用 xmlhttp.setRequestHeader(header, value) 来设置 HTTP 头。

使用异步请求时，应规定响应处于 onreadystatechange 事件处理程序中的就绪状态时执行的函数：

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

服务器响应

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

responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。

onreadystatechange 事件

每当请求的 readyState 改变时，会触发该事件。
readyState 属性存有 XMLHttpRequest 对象的状态信息：

属性	描述
readyState	0：xhr 对象被创建，尚未调用 open 方法 1：调用了 open()，可以设置请求头部 2：send() 已调用，可以获得响应头 3：下载中，包含部分响应主体 4：请求已全部完成，且响应已就绪
status	HTTP 状态码

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

实例

看一个向服务器发送查询请求的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  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)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 
</body>
</html>

当用户在输入框中键入字符串时，会利用这个字符串来向服务器发送查询请求，然后将响应文本显示在另一个输入框内。

服务器端的数据可以用 ASP/PHP。

服务器也可以返回 XML 文件来被操作：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<body>
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>
<script>
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.responseText;
  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;
}
</script>
</body>
</html>

上例使用的服务器页面实际上是一个名为 cd_catalog.xml 的页面。

优点

改善用户体验：允许网页持续更新，每次交互少量数据，并局部更新数据。
减少带宽使用。
支持异步请求数据。

缺点

页面不能通过前进后退键操作状态：浏览器只能记录静态页面，动态更新不能取消。
安全问题：跨站脚本攻击。
增加服务器负担（频繁请求）。