标签:异步 create window put 设置 back call 异步请求 加载
Ajax的核心是JavaScript对象XMLHttpRequest(简称XHR)。它是一种支持异步请求的技术。可以通过使用XHR对象向服务器提出请求并处理响应,而不阻塞用户。
Ajax可以完成的功能有:
1.1 Ajax简介
Ajax可以说 是目前最流行的 WEB 技术,它采用客户端脚本与 Web 服务器交换数据,也就是说,客户端的表单请求不是直接给 WEB 服务器,而是一些 Javascript 脚本,再通过 JS 内置的 xmlhttprequest 对象,异步的将请求发送给 WEB 服务器, WEB 服务器处理完之后再回发给 Javascript 脚本 , 然后动态的更新页面数据。由此可见 AJAX 并不是一种独立的技术,而是由 Javascript+DHTML+DOM+HTML 多种技术的组合 , 它少了等待服务器响应的时间,并且它可以使页面局部刷新,由此增强了用户体验。
2.1XMLHttpRequest对象
Ajax核心对象XmlHttpRequest对象的常用的方法和属性如下:
XMLHttpRequest对象的创建以及与服务器的交互如下代码所示:
<script language="javascript" type="text/javascript"> function callServer() { var xmlHttp = new XMLHttpRequest(); var ID = document.getElementById("ID").value; var PASS= document.getElementById("PASS").value;
if((ID == null) ||(ID == "")) return;
if((PASS== null) ||(PASS == "")) return; //创建url链接 var url = "Login?Id="+escape(ID)+"&PASS="+escape(PASS);
//最后一个参数如果是true的话,那么将请求一个异步连结 xmlHttp.open("POST",url,true); //如果服务器完成请求,RefreshPage函数被触发 xmlHttp.onreaadstatechange = RefreshPage; //发送请求 xmlHttp.send(null); } function RefreshPage() { if(xmlHttp.readyState == 4) { alert(‘服务器返回的数据为: ‘ + xmlHttp.responseText); } } </script>
2.2 获取Request对象:
由于不同浏览器的差异,获取XmlHttpRequest对象需要采用不同的方式
<script language="javascript" type="text/javascript"> <!-- var xmlhttp; // 创建XMLHTTPRequest对象 function createXMLHTTPRequest(){ if(window.ActiveXObject){ // 判断是否支持ActiveX控件 xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象 } else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象 xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例(本地javascript对象) } } //--> </script>
2.3 Ajax的基本请求/响应类型
Ajax应用程序中处理服务请求的流程如下:
2.4 调用Ajax过程
<form> <p>用户ID:<input type="text" name="ID" id="city" size="10" onChange="callServer();"/> </p> <p>口令:<input type="text" name="PASS" id="state" size="16" onChange="callServer();"/> </p> </form>
标签:异步 create window put 设置 back call 异步请求 加载
原文地址:http://www.cnblogs.com/babybluevino/p/2827509.html