`
小笨熊
  • 浏览: 62365 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Ajax学习小结

阅读更多

原理:

          就是通过触发JavaScript事件,调用服务器程序(可以是Servlet,也可以是Action),得到所需要的值。这个值再通过载  体,返回给JavaScript,从而返回给界面,实现局部刷新!而中间的这个载体就是ActiveXObject("MSXML2.XMLHTTP");

核心流程:
 1、HTML 中执行 JavaScript
 2、JavaScript 中去实例化 xmlHttp
 3、xmlHttp 去发出请求调用后台 Servlet
 4、Servlet 返回响应给 xmlHttp
 5、xmlHttp 拿着响应信息去更新 HTML

核心代码:

<script><!---->
  var xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");//只是IE的;

  function sendRequest(){
   //open方法用来设置请求发送,有三个参数(1、请求方式;2、请求地址;3、为true时用异步方式发送);
   xmlHttp.open('get','http://localhost:8080/WebModule1/ajaxservlet?name='+f.uname.value,true);
   //onreadystatechange方法设置谁来接收;
   xmlHttp.onreadystatechange=getResponse;
   //send请求真正的发出;
   xmlHttp.send(null);
  }

  function getResponse(){
   //readyState判断响应的4种状态(4为响应结束);
   if(xmlHttp.readyState==4){
    //status=200表示页面响应是正确的;400,404,500
    if(xmlHttp.status==200){
     ds.innerHTML=xmlHttp.responseText;
    }
   }
  }

</script>
 

终上所述:

          现在已经可以实现一个Ajax程序了(只用上面这两个方法就可以了)。只需在界面调用sendRequest()方法。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics