AJAX笔记-基本使用

发布时间：2020-12-16 01:40:24 所属栏目：百科来源：网络整理

导读：Ajax Asynchronous JavaScript and XML功能。页面不刷新同服务器通信的功能统称为Ajax。XMLHttpRequest:该对象是对JavaScript的一个扩展，可以使网页与服务器进行通信。是创建Ajax的最佳选择，实际上通常把Ajax当成是XMLHttpRequest对象的代名词。缺点：由

Ajax

Asynchronous JavaScript and XML功能。页面不刷新同服务器通信的功能统称为Ajax。XMLHttpRequest:该对象是对JavaScript的一个扩展，可以使网页与服务器进行通信。是创建Ajax的最佳选择，实际上通常把Ajax当成是XMLHttpRequest对象的代名词。

缺点：

由于AJAX是采取的局部刷新，导致后退等功能失效。

方法：

xmlHttp = new XMLHttpRequest(); 创建对象

xmlHttp.abort(); 终止请求
xmlHttp.getAllResponseHeaders() 把HTTP请求的素有响应头部作为键值对返回
xmlHttp.getResponseHeader("header") 返回指定头部的串值
xmlHttp.open("method","url",true) 建立对服务器的调用，Method可以是GET，POST或者PUT.url参数,第三个方法规定应当对请求进行异步地处理。
xmlHttp.send(content) 向服务器发送请求
xmlHttp.setRequestHeader("header","value")把指定头部设置为所提供的值，在设置任何头部前必须先调用open()

属性：

onreadystatechange 时间处理器，通常会被赋值为一个js函数，每个状态改变都会触发这个事件处理器。
readyState 用来判断当前交互的状态
//0 请求未初始化（在调用 open() 之前）
//1 请求已提出（调用 send() 之前）
//2 请求已发送（这里通常可以从响应得到内容头部）
//3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
//4 请求已完成（可以访问服务器响应并使用它）
responseText 服务器的响应，表示为一个串
responseXML 服务器的响应，表示为XML，该对象可以解析为DOM对象
status 服务器的HTTP状态吗(200表示OK，404表示未找到网页...)

statusText Http状态码对应的文本( OK,NotFound ...)

实例(注意要在服务器启动后才可以执行)

<html>
<head>
<script>
	window.onload = function(){
		document.getElementById("href").onclick = function(){
			var xmlHttp = new XMLHttpRequest();
			
			xmlHttp.onreadystatechange = function(){ //onreadystatechange属性的赋值一定要在下面open，send的前面。
				if((xmlHttp.readyState == 4) && (xmlHttp.status == 200 || xmlHttp.status == 304)){
					console.log(xmlHttp.responseText)
				}
			}
			
			xmlHttp.open("get","ajaxtest.html",true); //先配置各种属性，然后再send
			xmlHttp.send(null);
			
				
			return false;
		};
	};
</script>
</head>
<body>
	<!-- 将正常的页面跳转取消，然后通过Ajax进行异步获取内容，并在控制台输出html内容。 -->
	<a href="ajaxtest.html" id="href">ajaxtest</a>
</body>
</html>

<完>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!