AJAX

AJAX(Asynchronous JavaScript And XML)涉及到7项技术,其中Javascript、XMLHttpRequest、Dom、XML是最为重要
XMLHttpRequest对象
    XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据交换,却不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既可减轻服务器负担又加快了响应速度、缩短了用户等待时间。
 IE5.0开始,开发人员可以在Web页面内部使用XMLHTTPActiveX组件扩展自身的功能,不用从当前Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。Mozilla1.0以及NetScape7则是创建继承XML代理类XMLHttpRequest;对应大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性类似,只是部分属性不同


Javascript/DOM/XML

Javascript一直被定位为客户端的脚本语言,应用最多的地方就是表单数据的校验。现在,可以通过javascript操作XMLHttpRequest,来跟数据库打交道

DOM(Document Object Model)是提供给Html和XML使用的一组API,提供了文件的表述结构,并可以利用它改变其中的内容。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如,document就代表页面对象本身
XML,是网上传输的数据,文档符合统一的标准。Xml可以很容易让所有程序共享

 ajax开发步骤

 

function createXmlHttp(fun){
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//  alert(xmlhttp.responseText);
  fun(xmlhttp.responseText);
  }
}
return xmlhttp;
}
function ajaxGetCall(url,fun){
var xmlhttp=createXmlHttp(fun);
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function ajaxPostCall(url,sendStr,fun){
var xmlhttp=createXmlHttp(fun);
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(sendStr);
}
function callBack(result){
    alert(result);
}
ajaxPostCall("servlet/ajax","xxxx=yyy&xxx=yyy",callBack);//对应servlet的doPost

servlet:doPost

request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=gbk");
PrintWriter out = response.getWriter();
String xxx=request.getParameter("xxx");
out.prrintln(xxx);
out.flush();
out.close();

 

你可能感兴趣的:(Ajax)