Ajax实现--javascript
2015-01-20 20:58
253 查看
Ajax技术的好处我想我们已经不需要再过多陈述了,ajax技术现在已经被广泛运用在web应用中,比如google地图,省市级联等等
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。
废话不多说,现在先用纯javascript来实现一下ajax技术
首先是jsp页面:
服务端的servlet非常简单,就是响应给客户端一段文本内容。
ajax技术的核心就是xmlHttpRequest,对于IE来说,因为其内核与其他浏览器不一样(Firefox, Chrome),所以首先要判断一下使用的浏览器是否是IE
这样得到xmlHttpRequest以后,接下来的操作在上面代码里都有体现,流程无非就是像servlet发送请求,然后根据响应状态的转变调用回调函数,最后得到服务器端响应回来的数据,响应过来的既可以是xml文本,还可以是json数据或者是普通文本,
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。
废话不多说,现在先用纯javascript来实现一下ajax技术
首先是jsp页面:
<html> <head> <script type="text/javascript"> var xmlHttpRequest = null; function ajaxRequest() { if(window.ActiveXObject) // IE浏览器 { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) // 除IE以外的其他浏览器 { xmlHttpRequest = new XMLHttpRequest(); } if(null != xmlHttpRequest) { var v1 = document.getElementById("value1").value; var v2 = document.getElementById("value2").value; // 准备向服务器发出一个请求 /* * GET方式向服务器发出一个请求 * xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true); */ /* * POST方式向服务器发出一个请求 */ xmlHttpRequest.open("POST", "AjaxServlet", true); // 当发生状态变化时就调用这个回调函数 xmlHttpRequest.onreadystatechange = ajaxCallBack; // 使用post提交时必须加上下面这行代码 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 向服务器发出一个请求 xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2); } } function ajaxCallBack() { if(xmlHttpRequest.readyState == 4) { if(xmlHttpRequest.status == 200) { var content = xmlHttpRequest.responseText; document.getElementById("div1").innerHTML = content; } } } </script> </head> <body> <input type="button" value="get content from serve" onclick="ajaxRequest()"/><br> <input type="text" id="value1"/><br> <input type="text" id="value2"/> <div id="div1"></div> </body></html>
服务端的servlet非常简单,就是响应给客户端一段文本内容。
ajax技术的核心就是xmlHttpRequest,对于IE来说,因为其内核与其他浏览器不一样(Firefox, Chrome),所以首先要判断一下使用的浏览器是否是IE
if(window.ActiveXObject) // IE浏览器 { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) // 除IE以外的其他浏览器 { xmlHttpRequest = new XMLHttpRequest(); }
这样得到xmlHttpRequest以后,接下来的操作在上面代码里都有体现,流程无非就是像servlet发送请求,然后根据响应状态的转变调用回调函数,最后得到服务器端响应回来的数据,响应过来的既可以是xml文本,还可以是json数据或者是普通文本,
相关文章推荐
- ajax中如何实现innerHTML中javascript的运行
- Ajax - JavaScript之实现私有属性、像C++和Java一样支持基于类的继承方法之例子
- 动态创建表格js文件,javascript,Ajax,DHTML动态实现表格的创建,动态读取XML中的文件,读取dom节点的例子。
- 用 AJax 技术实现 JavaScript 访问服务器端方法
- javascript+ajax控制滑块实现滑杆拉动式评论翻页效果
- AJAX之旅(2):javascript中类的深入研究-实现和继承
- Javascript与asp.net 实现Ajax多文件无刷新上传
- javascript 实现ajax调用下的动态分页脚本
- Asp.net Ajax WebService 实现循环引用(自定义JavascriptConverter)
- AjaxControlToolkit环境下用Javascript实现简单的Dropdownlist
- AJAX基础:JavaScript中类的实现
- ajax学习笔记二:javascript实现命名空间(ajax封装类的例子)
- Javascript与asp.net 实现Ajax多文件无刷新上传
- ajax实例 - Javascript+ASP实现无组件上传类
- ASP.NET(C#)AJAX+JAVASCRIPT实现类似QQ,MSN窗口之功能(续)
- [荐]Javascript与asp.net 实现Ajax多文件无刷新上传
- Javascript与asp.net 实现Ajax多文件无刷新上传
- ajax javascript post 方法实现(与C#混合使用)
- 基于对象的JavaScript实现无刷新页面发送和获取数据Ajax.js
- HTML+javascript+aspx+c#实现ajax功能