ExtJS（二）--AJAX基础
|
最近在学习ExtJS，在学习到AJAX的一些基础知识时便总结出来和大家分享一下，适合于初学者看看，大神可以绕过！ 一、AJAX概念 AJAX是AsynchronousJavascript And Xml的简写，它不是一门新的技术，而是几门技术的综合应用，是WEB2.0时代出现的一种异步通信技术。其中最核心的是在Javascript中调用一个叫XMLHttpRequest类，使用XMLHttpRequest这个类可以不用刷新整个网页就可以跟服务器端进行通信，同时再由这个类负责处理服务器端响应回来的信息，然后再通过Javascript中DOM编程将处理好的信息结果添加到网页上，从而实现了一个网页的局部刷新。提升了用户的体验，同时也减轻了WEB服务器的压力。 二、AJAX的特点
三、AJAX的工作原理
如下图： 四、AJAX所包含的技术 AJAX:(AsynchronousJavaScript and XML)并不是一项新技术,是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
五、AJAX的缺陷 AJAX技术也不是很完美的，也存在下面的缺陷：
六、XMLHttpRequest对象
XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.
创建XMLHttpRequest对象（由于非标准所以实现方法不统一）
七、第一个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,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 /> 密码:<input type="password" name="userpass" /> </form> </body> </html> 三、JavaScript脚本程序 /*
* 使用ajax编程异步向服务器端发送请求的步骤：
* 第一步：创建并初始化XMLHttpRequest对象
* 第二步：往服务器端发送请求
* 第三步：处理服务端返回来的数据
*/
// 初始化XMLHttpRequest对象
function createXmlHttpRequest() {
var xmlhttp = null;
try {
// Firefox,Opera 8.0+,Safari
xmlhttp = 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技术的一点小总结，如果我哪些总结的地方写错了，希望大家能指出来，让我改正错误，快速成长起来！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |