初学ajax---1

前端之家收集整理的这篇文章主要介绍了初学ajax---1前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

传统的web页面用户的每次请求都会返回一个完整的新的页面,导致用户等待时间过长。AJAX的使用会使页面修改需要修改的部分,甚至浏览器可以不必与服务器通信,这样更新少,用户等待时间更短。

XMLHttpRequest是大多数浏览器对请求对象的叫法,可以把它发送到服务器得到响应而无需加载整个页面

建立AJAX请求的基本过程:

1.XMLHttpRequest

XMLHttpRequest实例与服务器通信时包含三个关键步骤:

1.onreadystatechange事件处理函数---由服务器触发

2.open(method ,url)方法---建立请求。URL后面可以加时间戳,即url = *** + "?time" + new Date()@H_403_16@;@H_403_16@为保证每次的都与服务器交互,要传递一个参数每次都不一样,就用了时间戳。@H_403_16@有的浏览器上js认为链接不一样就会再次取新的内容

3.send方法

接收 readyState 属性表示AJAX当前请求的状态,有1-4数字代表。4代表响应发送完成。

responseText 属性包含了从服务器发送的数据。

@H_403_16@GET方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
	//1.获取a节点,并为其添加onclick响应函数
	
document.getElementsByTagName("a")[0].onclick = function(){
   //3.创建一个XMLHttpRequest对象
   var request =new XMLHttpRequest();

   //4.准备发送请求的数据:URL
   var url = this.href;
   var method = "GET";

   //5.调用XMLHttpReques的open方法
   request.open(method,url);

   //6.调用send方法
   request.send(null);

   //7.为XMLHttpReques对象添加onreadystatestate响应函数
   request.onreadystatechange=function(){
  alert(request.readyState);
   //8.判断响应是否完成:XMLHttpReques对象readystate属性值为4的时候
	   if(request.readyState==4){
   //9.判断响应是否可用:XMLHttpReques对象state属性值为200
		   if (request.status ==200 || request.status== 304)
   //10.打印相应结果:responseText
			   alert(request.responseText);
	   }
	      }
   //2.取消节点默认行为
		return false;
	}
}
</script>
</head>
<body>
<a href = "ajax.txt">hello ajax </a>


</body>
</html>

@H_403_16@POST方法。。。。

2.AJAX数据格式

服务器端的编程语言只能以:

1 XML

2 JSON

3HTML

这三种格式返回数据,这样浏览器才能理解这些格式。这三种数据格式各有优缺点。

猜你在找的Ajax相关文章