ExtJS(二)--AJAX基础
来源:互联网 发布:java image类用法 编辑:程序博客网 时间:2024/06/14 17:12
最近在学习ExtJS,在学习到AJAX的一些基础知识时便总结出来和大家分享一下,适合于初学者看看,大神可以绕过!
一、AJAX概念
AJAX是AsynchronousJavascript And Xml的简写,它不是一门新的技术,而是几门技术的综合应用,是WEB2.0时代出现的一种异步通信技术。其中最核心的是在Javascript中调用一个叫XMLHttpRequest类,使用XMLHttpRequest这个类可以不用刷新整个网页就可以跟服务器端进行通信,同时再由这个类负责处理服务器端响应回来的信息,然后再通过Javascript中DOM编程将处理好的信息结果添加到网页上,从而实现了一个网页的局部刷新。提升了用户的体验,同时也减轻了WEB服务器的压力。
二、AJAX的特点
- 页面可以保持不变都能完成用户所有的请求。也就是说在客户端浏览器请求服务器端的一个页面回来后,这个页面可以一直保持不变,用户所有的请求操作都由javascript代码发送到服务器端,当服务器响应回来的时候,也是由javascript代码进行处理返回来的信息,然后动态的添加到这个页面上,而不用刷新整个页面,页面还是原来的那个页面。
- 增强用户的体验。当用用户在浏览网页的时候,同时与服务器进行异步交互和实现网页内容的局部更新。例如:用户登陆和注册的时候,输入框的焦点失去的时候,就可使用AJAX请求异步与后台交互进行用户名的校验。还有就是密码安全等级的判断等等都应用到AJAX技术。
三、AJAX的工作原理
- AJAX技术采用异步交互方式,从而消除了传统WEB应用的同步交互方式那种“请求---响应---请求---响应.....”的过程,而可以采用“请求---请求----请求---响应---请求---响应---响应.......”这种方式,这样可以提升用户体验,减轻WEB服务器的压力。
- 用户的浏览器本身就内嵌了一个XMLHttpRequest类,使用该类的对象可以在浏览器执行任务的时候就装载AJAX引擎,这个AJAX引擎就可以跟服务器进行异步通信,它可以独立于用户与网络服务器间的交流。所以就可以使用javascript来调用AJAX引擎来代替用户产生一个HTTP动作,这样内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求就可以交给AJAX来执行了。
如下图:
四、AJAX所包含的技术
AJAX:(AsynchronousJavaScript and XML)并不是一项新技术,是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
- 服务器端语言:服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
- XML (eXtensible Markup Language,可扩展标记语言)是一种描述数据的格式。AJAX程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML是其中的一种选择。
- XHTML(eXtended Hypertext Markup Language,使用扩展超媒体标记语言)和CSS(Cascading Style Sheet,层叠样式表)标准化呈现。
- DOM(Document Object Model,文档对象模型)实现动态显示和交互。
- 使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。
- 使用JavaScript绑定和处理所有数据。
五、AJAX的缺陷
AJAX技术也不是很完美的,也存在下面的缺陷:
- AJAX大量使用javascript和ajax引擎,而这个取决于浏览器本身对AJAX技术的支持。
IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla虽然也支持AJAX,但是提供XMLHttpRequest的方式不一样。所以,使用AJAX的程序必须测试针对各个浏览器的兼容性。
AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
六、XMLHttpRequest对象
XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
- InternetExplorer把XMLHttpRequest实现为一个ActiveX对象
- 其他浏览器(Firefox、Safari、Opera…)把它实现为一个本地的JavaScript对象。
- XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,而不论这个实例创建的方法是什么。
- XMLHttpRequest对象方法
方法
描述
abort()
停止当前请求
getAllResponseHeaders()
把http请求的所有响应首部作为键/值对返回
getResponseHeader("headerLabel")
返回指定首部的串值
open(“method”,”url”)
建立对服务器的调用,method参数可以是GET,POST。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。
send(content)
向服务器发送请求
setRequestHeader("label", "value")
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
- XMLHttpRequest对象属性如下图:
七、第一个AJAX程序:用户名校验
步骤:
- 编写后台控制器Servlet程序,用于对客户端请求作出响应。
- 编写前台html静态页面。
- 编写javascript脚本程序,与服务器进行交互。(AJAX编程)
(1)创建XMLHttpRequest对象
(2)准备好要发送的数据。
(3)发送请求到后台servlet控制器
(4)处理后台程序返回来的数据,使用DOM编程动态添加到页面上。
1、Servlet程序:
package cn.itcast.ajax.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class AjaxServlet */public class AjaxServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {String username = request.getParameter("username");System.out.println(username);response.setHeader("Content-Type", "text/html; charset=UTF-8");if ("admin".equals(username)) {response.getOutputStream().write("用户名已存在".getBytes());} else {response.getOutputStream().write("用户名可以使用".getBytes());}}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}
2、html静态页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="ajaxhtm.js"></script></head><body><form action="">用户名:<input type="text" id="username" name="username" /><input id="submit"type="button" onclick="sendDataToServerByHtml()" value="检查用户名是否已经存在" /><span></span><br /> 密码:<inputtype="password" name="userpass" /></form></body></html>
三、JavaScript脚本程序
/* * 使用ajax编程异步向服务器端发送请求的步骤: * 第一步:创建并初始化XMLHttpRequest对象 * 第二步:往服务器端发送请求 * 第三步:处理服务端返回来的数据 */// 初始化XMLHttpRequest对象function createXmlHttpRequest() {var xmlhttp = null;try {// Firefox, Opera 8.0+, Safarixmlhttp = new XMLHttpRequest();} catch (e) {// IE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象var MSXML = [ 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP','Microsoft.XMLHTTP' ];for ( var i = 0; i < MSXML.length; i++) {try {xmlhttp = new ActiveXObject(MSXML[i]);break;} catch (e) {}}}// 返回对象return xmlhttp;}// 发送请求道服务器端(使用的是html的数据格式向服务器端发送请求)function sendDataToServerByHtml() {// alert("sdhfhs");var xhr = createXmlHttpRequest();var username = document.getElementById("username").value;// 这里使用getElementsByTagName方法得到的是该标签的一个集合数组var span = document.getElementsByTagName("span");// alert(span[0]);// alert(username);// 发送请求到服务器端xhr.open("get", "/ajax/AjaxServlet?username=" + username, true);/* * 注意:send方法是在使用post方式提交的时候必须发送的消息内容, * post的请求特点:请求的参数会在请求体中,因此当使用post请求提交的时候就必须使用send方法发送参数 * 但是,get的方法提交请求的时候,参数是在地址栏传送过去的,因此send方法可以不用夹带参数,即发送null即可 */xhr.send(null);// 对服务器端传递回来的信息进行处理xhr.onreadystatechange = function() {// 对象的状态 4表示完成if (xhr.readyState == 4) {// 200表示信息已经被成功返回,304表示信息没有被修改if (xhr.status == 200 || xhr.status == 304) {// 开始处理信息// alert(xhr.responseText);span[0].innerHTML = xhr.responseText;}}};}
效果图如下:
如需要这个小应用的完整工程请单击下载
这是我个人对AJAX技术的一点小总结,如果我哪些总结的地方写错了,希望大家能指出来,让我改正错误,快速成长起来!
- ExtJS(二)--AJAX基础
- ExtJS:Ajax基础
- Ajax基础(二)
- extjs基础知识点归纳二
- Ajax之二 Ajax基础
- ExtJs 入门教程二十[数据交互:AJAX]
- Ajax基础 (二)
- ExtJS学习心得(二)
- ExtJS学习心得(二)
- ExtJS学习心得(二)
- Extjs介绍(二)
- extjs Grid (二)
- extjs学习(二)
- extjs入门(二)
- 【ExtJs】ExtJs的Ajax
- ExtJS & Ajax
- AJAX学习(二)-------DOM基础
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
- curl 命令使用
- Spring framework内容整理
- 从零开始学C++之模板(四):用模板实现单例模式(线程安全)、模板方式实现动态创建对象
- Smarty模板原理
- ping命令流程详解
- ExtJS(二)--AJAX基础
- varchar和Nvarchar区别
- (译)如何使用box2d来做碰撞检测(且仅用来做碰撞检测)
- 外部用户连接到oracle
- 忘记root时密码时修改root密码
- 动态规划
- 说说Oracle分区
- hdu 2196 computer (树形dp)
- CF #192(div2)