ajax简单使用

程序员文章站 2022-06-17 15:00:34

...

ajax简单使用

1.ajax简介

ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）；
实现与服务器的数据交互，使用XMLHttpRequest与服务器进行异步通信；

1.1Ajax的优势：

1.减轻服务器的负担
AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
2.带来更好的用户体验，无刷新更新页面，减少用户心理和实际的等待时间。

1.2 ajax的使用

对象创建(XMLHttpRequest)：
根据不同的浏览器，对XMLHttpRequest对象的初始化有所不同：

 <script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//method：请求的类型；GET 或 POST
                                                       //url：文件在服务器上的位置
                                                       //async：true（异步）或 false（同步）
	xmlhttp.send();//发送到服务器，
}
</script>
</head>
<body>
<div id="myDiv"><h2> AJAX </h2></div>
<button type="button" onclick="loadXMLDoc()">查看</button>
</body>

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
XMLHttpRequest的readyState状态：
0=未初始化
1=读取中
2=已读取
3=交互中
4=完成
status 200: “OK”
404: 未找到页面

1.3open参数

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

异步 - True 或 False

通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数,如上代码所示。

1.4服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得 XML 形式的响应数据

responseText:
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

上一篇： jQuery+ajax实现局部刷新的两种方法

下一篇： Flask--使用ajax进行局部刷新(GET,POST方法)

ajax简单使用