二十—XMLHttpRequest和AJAX解决方案
最后更新于：2022-04-01 20:32:34
## 一、AJAX概述
AJAX是Asynchronous JavaScript and XML的缩写，中文译作异步JavaScript和XML。AJAX 不是新的编程语言，而是一种使用现有标准的新方法，在不重新加载页面的情况下，与服务器交换数据并更新部分网页的艺术。其核心是：客户端的Javascript能够与web服务器进行异步数据交换。
## 二、AJAX基础---XMLHttpRequest对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
1、创建 XMLHttpRequest 对象的语法：
var obj1 = new XMLHttpRequest();；
IE5和IE6中，使用ActiveX对象：var obj2 = new ActiveXObject("Micorosoft.XMLHTTP");
可以用如下方式保持兼容：
~~~
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");
}
~~~
2、XMLHttpRequest 对象的方法和属性
XMLHttpRequest 对象的方法和属性用来向服务器发送请求和从服务器获取响应。
2.1 发送请求：open()和send()
open()方法用于创建一个请求，创建的HTTP请求并未发送，直到调用send()方法才被发送
method不区分大小写；URL可以是绝对或者相对地址；async默认为true，意味着并不会立即返回数据。string参数可选，用于定义发送请求的正文（最好用字符串格式，并且使用setRequestHeader()方法定义请求报头的内容内型及编码方式）。
2.2 setRequestHeader()：设置请求报头，将和请求一同发送到服务端
~~~
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
~~~
2.3 abort():终止请求 ，没有参数。
## 三、AJAX获取服务器响应
利用XMLHttpRequest对象和属性获取服务器的响应，包括HTTP报头和响应的正文。
1、xmlObj.getAllResponseHeaders():获取所有响应的报头，以字符串形式返回。每个HTTP报头名称和值用冒号分隔，如myheader:myvalue，并以\r\n结束。
2、xmlObj.getResponseHeader(param):获取响应中某个特定的字段值，参数param是一个响应的HTPP字段名。
3、responseText和responseXML属性
均为只读属性，用于返回服务器中响应的正文。
~~~
//responseText属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
////responseXML属性
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i
';