js--AJAX-CSDN博客

本文链接：https://blog.csdn.net/qq_42176520/article/details/103509980

AJAX

AJAX=异步javascript和XML。用于创建快速动态网页。

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。意思是可以在不重新加载整个页面的情况下，对网页的某部份进行更新。

同步(sync)：发出一个功能调用时，在没有得到结果前，该调用不不返回或继续执行后面的操作。具体过程：客户端提交请求-》等待服务器处理-》处理完毕返回，在这个过程中客户端不能做其他操作。

异步(async)：当一个异步调用发出后，调用者在没有得到结果之前，就可以继续执行后续操作。当这个调用完成后，一般通过状态、通知和回调来通知调用者。具体过程：客户端发出AJAX请求-》服务端处理-》处理完成后执行客户端回调，在客户端发出请求后，仍然可以做其他操作。

XML：可扩展标识语言，被设计用来传输和数据存储；AJAX是核心技术；XMLHttpRequest对象（简称XHR）
XHR:用于在后台与服务器交换数据，意味着可以在不重新加载整个页面的情况下，对网页的某部份进行更新。
XMLHttpRequest是AJAX的基础

步骤：1、创建ajax核心对象。2、与服务器建立连接。3、向服务器发送请求。4、接收服务器响应的数据。

创建XMLHttpRequest对象

//创建XHR对象语法：
variable=new XMLHttpRequest();


//老版本IE（IE5/IE6）使用ActiveX对象
variable=new ActiveXObject('Microsoft.XMLHTTP');

为了应对所有浏览器，包括IE5和IE6，首先检查浏览器是否支持XMLHttpRequest对象，如果支持则创建XMLHttpRequest对象，如果不支持，则创建ActiveXObject:

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
} else {
    xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}

向服务器发送请求

如需将请求发送到服务器，使用XMLHttpRequest对象的open()和send()方法。

var xmlhttp=new XMLHttpRequest();
xmlhttp.open('GET','test.php',true);
xmlhttp.send();

open(method,url,async)；//method:规定请求的类型.URL:文件在服务器上的位置。async:是否异步处理请求(true[异步]或false[同步])。

send(string);//将请求发送到服务器。string：仅用于post请求。

XMLHttpRequest对象如果用于AJAX的话，其open()方法的async参数必须设置为true。

使用GET还是POST?

与POST相比，GET更简单也更快，并且在大部分情况下都能用。然而在以下情况中，需使用POST请求：

1、无法使用缓存文件（更新服务器上的文凭或数据库）

2、向服务器发送大量数据（POST没有数据量限制）

3、发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

onreadystatechange事件

在onreadystatechange事件中，规定当服务器响应已做好被处理的准备时所执行的任务。

当请求被发送到服务器时，需要执行一些基于响应的任务。每当readystate改变时，就会触发onreadystatechange事件.readystate属性存有XMLHttpRequest对象的三个重要属性：

onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用 该函数

readyState:存有XMLHttpRequest状态，从0到4发生的变化：

0：请求未初始化

1:服务器连接已建立

2：请求已接收

3:请求处理中

4:请求已完成，且响应已就绪

status:200:"OK"  404:未找到页面

Callback函数

是一种认参数形式传递给另一个函数的函数。

服务器响应

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

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


var xmlhttp=new XMLHttpRequest()
responseText属性：来自服务器的响应并非XML
例：document.getElementById('idname').innerHTML=xmlhttp.responseText;
responseXML属性：来自服务器的响应是XML，而且需要作为XML对象进行解析。

xmlDoc=xmlhttp.responseXML;//XMLDOM文档
txt='';
x=xmlDoc.getElementsByTagName('');//获取响应的XMLDOM文档
for (var i=0;i<x.length;i++) {
    txt=txt + x[i].childNodes[0].nodeValue + "<br/>"
}

document.getElementById('mydiv').innerHTML=txt;//获取到的数据改变div内容

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#my{height: 100px;width: 100px;background: red;}
	</style>
</head>
<body>
<div id='my'><p>ccacsas</p></div>
<script type="text/javascript">
var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
} else {
    xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
console.log(xmlhttp);
xmlhttp.onreadystatechange=function() {
	if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
		console.log(xmlhttp.readyState);
		document.getElementById('my').innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open('GET','1.txt',true);
xmlhttp.send();



//post
var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
} else {
    xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
console.log(xmlhttp);
xmlhttp.onreadystatechange=function() {
	if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
		console.log(xmlhttp.readyState);
		document.getElementById('my').innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open('POST','1.php',true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
</script>
</body>
</html>