原理:
就是通过触发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()方法。
分享到:
相关推荐
Asp.net+Ajax学习总结.xls,Asp.net+Ajax学习总结.xls
NULL 博文链接:https://lc2586.iteye.com/blog/725751
根据个人学习Ajax的过程总结,整理了Ajax相关基础知识点,对Ajax的使用有较详细的介绍,通过个别举例,可以快速了解Ajax的功能,比较适合初学者入门。
NULL 博文链接:https://lc2586.iteye.com/blog/727114
简单介绍Ajax的作用及使用方法;包含一个示例(视频教程网址);扩展介绍了相关的JSON、jQuery、跨域问题;包含几个学习网址。
我总结的Ajax学习资料,希望对大家有所帮助!
NULL 博文链接:https://lc2586.iteye.com/blog/727573
NULL 博文链接:https://lc2586.iteye.com/blog/726566
AJAX技术学习总结分享.pdf 一、Ajax技术原理总结 Ajax技术是一种创建交互式网页应用的网页开发技术,也是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。...
NULL 博文链接:https://lc2586.iteye.com/blog/727532
NULL 博文链接:https://lc2586.iteye.com/blog/727018
总结的ajax基础精简资料总结的ajax基础精简资总结的ajax基础精简资总结的ajax基础精简资
NULL 博文链接:https://lc2586.iteye.com/blog/727905
NULL 博文链接:https://lc2586.iteye.com/blog/728353
耗费几天晚上终于写了一个像样的东西出来了,提供一个Ajax学习总结和部分示例,供需要学习ajax的朋友参考!
Ajax学习资料 (完整资料 12册pdf+示例 简单-深入)+示例+总结
令人兴奋的技术,宝贵的实用经验和心得!
NULL 博文链接:https://lc2586.iteye.com/blog/731375