深入理解Ajax及其核心组件-优快云博客

Ajax 基本知识

1、什么是Ajax？

Ajax 是 Asynchronous JavaScript and XML的缩写，异步刷新界面，而不需要将整个网页进行提交。

2、Ajax 所使用的技术：

·HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 
·JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。 
·DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。 
·文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

3、Ajax 的核心是 XMLHttpRequest对象

创建该对象源码：

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}

事实上，就相当于这行代码：

 //1、创建XMLHttpRequest对象
    		 var request = new XMLHttpRequest();

4、Ajax 应用程序中基本雷同的流程：

1、从 Web 表单中获取需要的数据。 
2、建立要连接的 URL。 
3、打开到服务器的连接。 
4、设置服务器在完成后要运行的函数。 
5、发送请求。

5、一个基本的Ajax 应用程序实例：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="UTF-8"%>
<!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(){
    	 document.getElementsByTagName("a")[0].onclick = function(){
    		 //1、创建XMLHttpRequest对象
    		 var request = new XMLHttpRequest();
    		 //3、准备请求发送的数据和方式:为url加上时间戳
    		 var url = this.href + "?time = " + new Date(); //new Date()是JS对象
    		 //var method = "GET";
    		 var method = "POST";
    		 //4、调用XMLHttpRequest对象的open方法
    		 request.open(method, url,true);
    		 //5、发送请求
    		// request.send(null);
    		 request.send("name='1230'");
    		 //6.为XMLHttpRequest对象添加onreadystatechange响应函数
    		 request.onreadystatechange = function(){
    			 //7.判断响应是否完成
    			 if(request.readystate == 4){
    				 //8、再判断响应是否可用:即状态值statue是否为200(OK)或304(Not Modified)
    				 if(request.status == 200 || request.status == 304){
    					 //9.打印响应结果
    					 alert(request.responseText);
    				 }
    			 }
    		 }
    		 //2.取消其默认行为
    		 return false;
    	 }
     }

</script>
</head>
<body>

	<!-- helloAjax.txt的内容为：Hello Ajax! ^_^ -->
	<a href="helloAjax.txt">HelloAjax</a>

</body>
</html>

值得注意的是：

参数 method 的取值有两种："GET" & "POST" ，这分别代表着向服务器请求的方式。

方法 request.send(method,url,async) 有三个参数：

第一个参数：请求方式

第二个参数：服务器上文件的地址

第三个参数：取值为 true ，那么将请求一个异步连接；取值为false，表示同步，代码发出请求后将等待服务器的响应。此参数可以不写。

方法send(null) 表示向服务器发送请求时不传递参数；send("name='1230'")则表示向服务器传递 name属性值为"1230"的参数，只要请求放式为"POST"使用。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

可以用开发者工具去看看请求头Header ：

6、GET ? POST ?

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

7、如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

8、Ajax 服务器的响应

获取服务器响应，有两种属性：responseText 、responseXML