欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;