初步了解Ajax 以及注意事项 Hijax初步认识

最新推荐文章于 2019-06-24 16:35:43 发布

原创最新推荐文章于 2019-06-24 16:35:43 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Ajax技术的基本原理及其应用。通过创建XMLHttpRequest对象实现局部页面更新，避免了整个页面的重新加载，有效提升了用户体验。文中还提供了示例代码，并讨论了跨域请求限制等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

简单的说就是只更新你要更新的部分。

ajax的核心就是XMLHttpRequest 对象这个对象就像是浏览器与服务器之间的中间人，js可以通过这个对象发送请求也可以处理响应。

首先创建一个例子，保存为Ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax</title>
</head>
<body>
	<div id="new"></div>
	<script src="js/addLoadEvent.js"></script>
	<script src="js/getHTTPObject.js"></script>
	<script src="js/getNewContent.js"></script>
</body>
</html>

其中的addLoadEvent.js，getHTTPObject.js，getNewContent.js 位于项目中的js文件夹（自己创建）。与 ajax.html并列的的文件example.txt（自己创建随便打几个文字）。

下面编写addLoadEvent.js 主要功能就是在页面加载玩执行函数（只有一个参数要执行的函数）可以多次使用。

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;

	}else{
		window.onload = function (argument) {
			oldonload();
			func();
		}
	}
}

编写getHTTPObject.js 。创建 XMLHttpRequest对象。兼容了不同的浏览器

function getHTTPObject() {
	if (typeof XMLHttpRequest == 'undefined') {
		XMLHttpRequest = function(){
			try{
				return new ActiveXObject("Msxml2.XMLHTTP.6.0");
			}catch(e){}
			try{
				return new ActiveXObject("Msxml2.XMLHTTP.3.0");
			}catch(e){}
			try{
				return new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){}
			return false;
		}
	}
		return new XMLHttpRequest();
}

处理响应 getNewContent.js

function getNewContent() {
	var request = getHTTPObject();
	if (request) {
		request.open("GET","example.txt",true);
		request.onreadystatechange = function () {
			if (request.readyState == 4) {
				alert("revice");
				var para = document.createElement("p");
				var txt = document.createTextNode(request.responseText);
				para.appendChild(txt);
				document.getElementById('new').appendChild(para);
			}
		};
		request.send(null);
	}else{
		alert("不行");
	}
	alert("fundone");
}
addLoadEvent(getNewContent);

得到以下的内容