基本介绍

asynchronous JavaScript and XML
并非编程语言，而是组合了浏览器内建的 XMLHttpRequest 对象和 JavaScript 和 HTMLDOM 对象，使得通过场景后页面的 web 服务器数据来异步更新网页。
功能

不刷新页面而更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台想服务器发送数据 ```javascript <!DOCTYPE html>

XMLHttpRequest 对象

<a name="E03aB"></a>
# XMLHttpRequest 对象
Ajax 核心是XMLHttpRequest 对象，后者用于同服务器交换数据，
- 创建XMLHttpRequest 对象
```javascript
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p id="demo">让 AJAX 改变这段文本。</p>
<button type="button" onclick="loadDoc()">更改内容</button>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/example/js/ajax_info.txt", true);
  xhttp.send();
}
</script>

XMLHttpRequest 跨域访问

<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p id="demo">让 AJAX 改变这段文本。</p>
<button type="button" onclick="loadDoc()">更改内容</button>
<script>
function loadDoc() {
  var xhttp;
  if (window.XMLHttpRequest) {
    // 针对现代浏览器的代码
    xhttp = new XMLHttpRequest();
  } else {
    // 针对 IE6、IE5 的代码
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/example/js/ajax_info.txt", true);
  xhttp.send();
}
</script>
</body>
</html>

XMLHttpRequest 对象属性

onreadystatechange
- 定义当 readystate 属性发生变化时被调用的函数
readyState
- 保存XMLHttpRequest 的状态
  - 0：请求未初始化
  - 1：服务器连接已经建立
  - 2: 请求已收到
  - 3：正在处理请求
  - 4：请求完成且相应已就绪
responseText
- 以字符串返回相应数据
responseXML
- 以 XML 数据返回相应数据
status
- 返回请求状态号
  - 200：OK
  - 403：forbidden
  - 404：notfound
statusText
- 返回状态文本（如 OK、NotFound）
  XMLHttpRequest 对象方法
new XMLHttpRequest()
- 创建新的 XMLHttpRequest 对象
abort()
- 取消当前请求
getAllResponseHeader（）
- 返回头部消息
getResponseHeader（）
- 返回特定的头部信息
open（method，url，async，user，psw）
- 规定请求
  - method：请求类型 get或者post
  - url：文件位置
  - async：true 异步、false 同步
  - user：可选的用户名称
  - psw：可选的密码
send（）
- 将请求发送到服务器，用于 get 请求
send(string）
- 将请求发送到服务，用于post 请求
setResponseHeader（）
- 向要发送的报头添加标签\值对
  get 和 post 区别
get 比 post 更简单和快速，用于大多数情况下，
以下情况用于 post
- 缓存文件不是选项（更新服务器上的文件或数据库）
- 向服务器发送大量数据
- 发送用户输入（可包含位置字符）post 比 get 更加安全

post 请求

<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">请求数据</button>
<p id="demo"></p>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "/demo/demo_post.asp", true);
  xhttp.send();
}
</script>

onreadystatechange 属性

<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">更改内容</button>
</div>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "/example/js/ajax_info.txt", true);
  xhttp.send();
}
</script>

使用回调函数

回调函数是哟中作为参数被传递到另一个函数的函数
如果网站中有多个ajax 任务，那么应该创建一个执行 XMLHttpRquest 对象的函数，一个一个供每个 ajax 任务的回调函数
该函数应当包含 url 以及当相应就绪时调用的函数 ```javascript <!DOCTYPE html>

XMLHttpRequest 对象

``` ## 实例 ```javascript

```javascript
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<h2>请在下面的输入字段中键入字母 A-Z：</h2>
<p>搜索建议：<span id="txtHint"></span></p> 
<p>姓名：<input type="text" id="txt1" onkeyup="showHint(this.value)"></p>
<script>
function showHint(str) {
  var xhttp;
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/demo/gethint.php?q="+str, true);
  xhttp.send();   
}

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>
<p>请点击某个曲目，可显示专辑信息。</p>
<p id='showMUSIC'></p>
<table id="demo"></table>
<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/demo/music_list.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("TRACK");
table="<tr><th>艺术家</th><th>曲目</th></tr>";
for (i = 0; i <x.length; i++) { 
  table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
  table += x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
  table += "</td><td>";
  table +=  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
  table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
function displayMUSIC(i) {
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li>曲目：" +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li>艺术家：" +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>专辑：" +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>国家：" +    
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>公司：" +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>年份：" + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}
</script>
</body>
</html>

ajax

基本介绍

XMLHttpRequest 对象

XMLHttpRequest 跨域访问

XMLHttpRequest 对象属性

XMLHttpRequest 对象方法

get 和 post 区别

post 请求

onreadystatechange 属性

使用回调函数

XMLHttpRequest 对象