初学ajax---1

发布时间：2020-12-16 00:22:16 所属栏目：百科来源：网络整理

导读：传统的web页面对用户的每次请求都会返回一个完整的新的页面，导致用户等待时间过长。AJAX的使用会使页面只修改需要修改的部分，甚至浏览器可以不必与服务器通信，这样更新少，用户等待时间更短。 XMLHttpRequest是大多数浏览器对请求对象的叫法，可以把它发

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

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

建立AJAX请求的基本过程：

1.XMLHttpRequest

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

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

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

3.send方法

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

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

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>

POST方法。。。。

2.AJAX数据格式

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

1 XML

2 JSON

3HTML

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!