标签：版本 属性 解析 html 状态改变 eval 问题 相同 接收
Ajax即Asynchronous JavaScript and XML，是异步的JavaScript与XML。Ajax提供了基于服务器交换数据并实现局部更新网页的技术，在不重新加载整个网页的情况下，可以接受来自服务器请求到的数据，提高了浏览页面的效率和用户体验。
XMLHttpRequest是Ajax的对象，所有现代浏览器（IE7+、Firefox、Chrome、Safari、Opera）均支持XMLHttpRequest对象，而低版本的IE（IE5和IE6）使用ActiveXObject对象。XMLHttpRequest用于在后台与服务器交换数据。即可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
为了兼容所有浏览器的情况，包括低版本的IE，创建Ajax对象可以使用如下代码：
function getAjax() { var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(ActiveXObject){ xhr = new ActiveXObject("Microsoft XMLHTTP"); } return xhr; }
XMLHttpRequest对象用于和服务器交换数据，将请求发送到服务器，主要使用open()和send()方法
open：创建一个新的http请求，并指定此请求的方法、URL以及验证信息
语法：
XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
示例代码：
var xhr = getAjax(); /** * oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); * bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 * bstrUrl 请求的URL地址，可以为绝对地址也可以为相对地址。 * varAsync[可选]布尔型，指定此请求是否为异步方式，默认为true。 * 如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 */ xhr.open("GET", "/getTime"); xhr.send();
send：发送请求到http服务器并接收回应：
语法：
XMLHttpRequest.send(varBody);
varBody：仅用于POST请求。
对比一下简单的GET方法发送信息与POST方法发送信息：
//GET方式 xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true); xmlhttp.send(); //POST方式 xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
如果需要像 HTML 表单form中那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
var username = document.getElementById("username").value; var password = document.getElementById("password").value; xhr.open("POST", "/login"); //Ajax设置请求编码 -- 使用POST请求传递参数必须加上 //位置在send之前，open之后 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //使用POST发送数据，在send里面，写入单独传参的数据 xhr.send("username=" + username + "&password=" + password);
GET和POST使用场景：
GET相对于POST传递数据更简单快捷，在不涉及信息安全的场景下可以使用；
然而，在如下情况下，请使用POST请求传递数据：
XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)，在这个方法中，当Async为true时，表示执行Ajax后端请求时是使用异步请求的方式，这里需要在响应处使用onreadystatechange事件进行监听Ajax的状态：
其中Async参数为可选布尔型，指定此请求是否为异步方式，默认为true。如果为true，当状态改变时会调用onreadystatechange属性指定的回调函数。
//Ajax的异步问题可以通过Ajax的状态来解决：Ajax执行的每一步都有它对应的一个状态 readyState //0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） //1 (初始化) 对象已建立，尚未调用send方法 //2 (发送数据) send方法已调用，但是当前的状态及http头未知 //3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， //4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 //注意：一般我们只需要一个点：readyState==4时，状态已经拿到了 //Ajax对象中有一个监听器，它可以监听每一次状态的变化（onreadystatechange） <script> function getTime02() { var xhr = getAjax(); //readyState == 0 /** * oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); * bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 * bstrUrl 请求的URL地址，可以为绝对地址也可以为相对地址。 * varAsync[可选]布尔型，指定此请求是否为异步方式，默认为true。 * 如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 */ xhr.open("GET", "/getTime"); //readyState == 1 //监听代码一定放在send前面 //监听状态一般有两种情况：readyState状态和status状态 //readyState状态：Ajax请求状态； //status状态：http请求响应的状态码 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ console.debug(xhr.responseText); } }; xhr.send(); //readyState == 2 3 4；发送整个流程 /** * responseText 将前台的响应信息作为字符串返回，注意：一定是作为字符串返回的 */ } </script> <button onclick="getTime02()">获取时间</button>
如果需要获取来自服务器的响应，需要调用XMLHttpRequest对象的responseText或者responseXML属性。
|
属性 |
描述 |
|
responseText |
获得字符串形式的响应数据 |
|
responseXML |
获得XML形式的响应数据 |
responseText属性：
将响应信息作为字符串返回，因此你可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML属性：
如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性，比如请求books.xml文件，并解析响应：
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;
callback函数是一种以参数形式传递给另一个函数的函数。
在执行多个Ajax调用任务时，可以在XMLHttpRequest对象中创建一个标准的执行流程函数，每次Ajax请求都调用这个函数执行open、send一套流程。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
<script type="text/javascript">
var xhr = null;
function loadXMLDoc(url, cfunc) {
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(ActiveXObject){
xhr = new ActiveXObject("Microsoft XMLHTTP");
}
xhr.open("GET", url, true);
xhr.onreadystatechange = cfunc;
xhr.send();
}
function myFunction() {
loadXMLDoc("/ajax/test1.txt", function () {
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("myDiv").innerText = xhr.responseText;
}
})
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>
</body>
博文参考文档W3School Ajax部分内容：https://www.w3school.com.cn/ajax/index.asp
标签：版本 属性 解析 html 状态改变 eval 问题 相同 接收
原文地址：https://www.cnblogs.com/yif0118/p/13124483.html
