ajax起步 (二)

Ajax的关键在于XMLHttpRequest对象,如下基本用法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div>
			<button>Apples</button>
			<button>Cherries</button>
			<button>Bananas</button>
		</div>
		<div id="target">
			press a button
		</div>
		<script type="text/javascript">
			var buttons=document.getElementsByTagName("button")
			for(var i=0;i<buttons.length;i++){
				buttons[i].onclick=handleButtonPress;
			}
			function handleButtonPress(e){
				var httpRequest=new XMLHttpRequest();
				httpRequest.onreadystatechange=handleResponse;
				httpRequest.open("GET",e.target.innehttpRequest=new XMLHttpRequest();rHTML+".html")
				httpRequest.send()
			}
			function handleResponse(e){
				if(e.target.readyState==XMLHttpRequest.DONE&&e.target.status==200){
					document.getElementById("target").innerHTML=e.target.responseText;
				}
			}
		</script>
	</body>
</html>

    第一步是创建一个新的XMLHttpRequest对象。与之前在DOM中见过的大多数对象不同,你并非通过浏览器定义的某个全局变量来访问这类对象,而是使用关键词new如:var httpRequest=new XMLHttpRequest();
    下一步是给readystatechange事件设置一个事件处理器。这个事件会在请求过程中被多次触发,向你提供事情的进展情况。将onreadystatechange属性的值设为handleResponse;httpRequest.onreadystatechange=handleResponse;可以告诉XMLHttpRequest对象你想要做什么,使用open方法来指定HTTP方法(在这里是GET)和需要请求的URL:httpRequest.open("GET",e.target.innerHTML+".html")
    注:上述展示的是open方法最简单的形式。你还可以给浏览器提供向服务器发送请求使用的认证消息,就如:httpRequest.open("GET",e.target.innerHTML+''.html",true,"adam","secret")最后两个参数是应当发送给服务器的用户和密码。剩下的那个参数指定了该请求是否应当异步执行。它应该始终设置为true.
    注:GET请求适用于安全的交互行为,就是那些你可以反复发起而不会带来副作用的请求。POS请求用于不安全的交互行为,意思是每一个请求都会导致服务器端发生某种变化,而重复的请求可能会带来问题。虽然还有些别的HTTP方法,但GET和POST是使用最为广泛的。
    函数的最后一步是调用send()方法,如:httpRequest.send();上述例子里没有向服务器发送任何数据,所以send方法无参数可用。

posted @ 2017-12-31 23:31  Sarah119  Views(103)  Comments(0Edit  收藏  举报