Ajax学习汇总

• Ajax的概念
  • Ajax是Asynchronous Javascript And Xml的简写，它不是一项具体的技术，而是几门技术的综合应用(进行异步处理的一种方法)
  • 核心思想：是在Javascript中调用一个称为XMLHttpRequest的Javascript类，这个类可以与Web服务器使用HTTP协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的JavaScript对象发送请求，再由这个JavaScript对象接收响应，并将响应结果用DOM编程方式挂到原来的网页上
  • 特点：在不重新加载整个页面时，可能进行局部的更新内容
• Ajax包括的内容
  • 异步数据获取技术：使用 XMLHttpRequest
  • 基于标准的表示技术：使用 XHTML 与 CSS
  • 动态显示和交互技术：使用 Document Object Model(文档对象模型，简称DOM)
  • 数据互换和操作技术：使用 XML 或 JSON 等
  • JavaScript，将以上技术融合在一起
• Ajax的创建步骤

  • 步骤一：XMLHttpRequest对象的创建，为了满足各种不同浏览器的兼容性，需要检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject

    var xmlhttp;
    if (window.XMLHttpRequest)
      {	// code for IE7+, Firefox, Chrome, Opera, Safari
      	xmlhttp=new XMLHttpRequest();
      }
    else
      {	// code for IE6, IE5
      	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    

  • 步骤二：指定异步的提交目标和提交方式

    xmlHttp.open(“提交方式”, “提交目标”, true);
    

  • 步骤三：指定当 xmlHttp 状态改变时，并需要进行相应的处理，一般以回调函数进行处理；

    	xmlHttp.onreadystatechange=function() { 
    	//处理代码 
       	} 
    

  • 步骤四：编写相应的处理代码（这里根据自己的需要进行编写）

    	if (xmlHttp.readyState==4) { 
    	infoDiv.innerHTML = xmlHttp.responseText; 
    	} 
    

  • 步骤五：发出请求，调用xmlHtto的send函数

    xmlHttp.send(); 
    //如果请求方式是 get 的话，send 可以没有参数， 或者参数为 null；
    // 若请求方式是 post,可以将需要传送的内容传入 send 函数中以字符串的形式发出。
    

  • XMLHttpRequest对象的属性简介

属性名	描述
onreadystatechange	状态改变事件触发器，每个状态改变都会触发这个事件触发器
readyState	异步请求过程中的各种状态：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完 成
responseText	服务器的响应是字符串
responseXML	服务器的响应是XML。该对象可以解析为一个DOM对象
status	服务器返回的HTTP状态码 ，如404未找到,200就绪
statusText	HTTP状态码的相应文本

• Ajax响应类型：文本类型（XMLHttpRequest.responseText）、XML类型(XMLHttpRequest.responseXML)

• Ajax例子：

  //相应的JavaScript代码
  <SCRIPT LANGUAGE="JavaScript">
  	function login() {
  		var account = document.loginForm.account.value;
  		var password = document.loginForm.password.value;
  		var xmlHttp;
  		if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  			xmlHttp = new XMLHttpRequest();
  		} else { // code for IE6, IE5
  			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  		}
  		var url = "servlet/LoginServlet?account=" + account + "&password="+ password;//这里是请求servlet中处理方法（这里就不给出servlet中代码）
  		xmlHttp.open("POST", url, true);
  		xmlHttp.onreadystatechange = function() {
  			if (xmlHttp.readyState == 4) {
  				resultDiv.innerHTML = xmlHttp.responseText;
  			} else {
  				resultDiv.innerHTML += "正在登录，请稍候......";
  			}
  		}
  		xmlHttp.send();
  	}
  </SCRIPT>	
  
  //login.jsp代码
  <div id="resultDiv">
  <form name="loginForm">
  	请您输入账号:<input type="text" name="account"><BR>
  	 请您输入密码:<input type="password" name="password"><BR> 
  	<input type="button" value="登录" onclick="login()">
  </form>
  

• Ajax优点和缺点（任何东西都有其双面性，有优有缺才堪称完美）

  • Ajax优点：减轻服务器负担，能进行局部页面数据更新
  • Ajax缺点：有一些浏览器可能会不兼容、Ajax 中没有刷新页面，浏览器上的"后退"按钮是失效的，因此，客户经常无法回退到以前的操作
    ##小生才学疏浅，上述表述内容有什么出入的，希望各位来宾们不吝赐教，得到你们的指点是小生的荣幸##
    ##如若上面有侵权行为请联系博主进行删除##