ajax 博客分类： 前端 ajaxXMLHttpRequest

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

创建新的XMLHttpRequest对象，它负责处理所有服务器通信的对象。
<script language="javascript" type="text/javascript'>
    var xmlHttp = new XMLHttpRequest();
</script>

Ajax基本上就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给一些JavaScript代码而不是直接发送给服务器。相反，JavaScript代码捕获表单数据并向服务器发送请求。请求是异步发送的,不用等待服务器的响应。然后服务器将数据返回JavaScript代码，后者决定如何处理这些数据。

得到XMLHttpRequest的句柄后，其他的JavaScript代码就非常简单了。事实上，我们将使用JavaScript代码完成非常基本的任务：
获取表单数据：JavaScript代码很容易从HTML表单中抽取数据并发送到服务器。
修改表单上的数据：更新表单很简单，从设置字段值到迅速替换图像。
解析HTML和XML：使用JavaScript代码操纵DOM，处理HTML表单服务器返回的XML数据的结构。

在Mirosoft浏览器上创建XMLHttpRequest对象
var xmlHttp = false;
try{
   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
   try{
      xmlHtt = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e2){
      xmlHttp = false;
   }
}
处理Mozilla和Microsoft浏览器
var xmlHttp = new XMLHttpRequest();

支持多种浏览器的方式创建XMLHttpRequest对象
/* Create a new XMLHttpRequest object to talk to the WEB server*/
var xmlHttp = false;
/*@cc_on @*/
/@if (@_jscript_version >=5)
try{
   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
   try{
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e2){
       xmlHttp = false;
   }
}
@end @*/
if(!xmlHttp&&typeof XMLHttpRequest != 'undefined'){
   xmlHttp = new XMLHttpRequest();
}

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

function callServer(){
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  if(city==null || city=="") return null;
  if(state==null || state=="") return null;
  var url = "/scripts/getZipCode.php?city="+escape(city)+"&state="+escape(state);
  //Open a connection to the server
  xmlHttp.open("GET",url.true);
  //Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage; 
  //Send the request
  xmlHttp.send(null);
}

处理响应：
什么也不要做，直到xmlHttp.readyState属性的值等于4
服务器将把响应填充到xmlHttp.responseText属性中
function updatePage(){
   if(xmlHttp.readyState == 4){
       var response = xmlHttp.responseText;
       document.getElementById("zipCode").value= response;
   }
}

XMLHttpRequest简介
open()：建立到服务器的新情求
send()：向服务器发送请求
abort()：推出当前请求
readyState：提供当前HTML的就绪状态
reponseText：服务器返回的请求响应文本