Ajax简介
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
Web开发技术演变过程
分为三个阶段:
阶段一:使用简单的静态页面
阶段二:使用ASP、JSP和PHP等动态脚本语言
阶段三: Web2.0阶段,其中Ajax是Web2.0的核心技术
Ajax原理
在基于Ajax的Web应用模型中,用户在页面上获取的数据是通过Ajax引擎提供的。由于页面不需要直接与服务器进行交互,因此客户端浏览器不需要刷新页面就能获得服务器的信息,故而提高了相应速度和页面的友好度。
Ajax实质上也遵循Request/Server模式,所以这个框架基本的流程如下:
一、 创建XMLHttpRequest对象
二、 使用XMLHttpRequest对象发送请求
三、 服务器端处理用户请求
四、 客户端处理服务器响应
Ajax示例(局部显示用户名)
- 创建JSP页面
源码:AjaxShow.jsp
代码说明:在这个JSP页面中,使用Javascript创建了XMLHttpRequest对象,通过这个对象把用户的输入信息作为参数传递给服务器。而且在JSP页面中,还接收服务器返回的处理结果,并在特定区域内显示处理结果。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script language="JavaScript">
var XMLHttpReq;
function createXMLHttpRequest() {
//适应不同的浏览器
if(window.XMLHttpRequest)
XMLHttpReq=new XMLHttpRequest();
else {
if(window.ActiveXObject)
try{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try {
XMLHttpReq=new ActiveXObject("Miscrosoft.XMLHTTP");
}catch (e){
}
}
}
}
//处理服务器响应结果
function handleResponse() {
if(XMLHttpReq.readyState==4) {
if (XMLHttpReq.status == 200) {
var res = XMLHttpReq.responseXML;
var response = res.getElementsByTagName("response")[0].firstChild.nodeValue;
document.getElementById("hello").innerHTML = response;
}
}
}
//发送客户端请求
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("get",url,true);
XMLHttpReq.send(null);
XMLHttpReq.onreadystatechange=handleResponse;
}
//开始调用Ajax功能
function sayHello() {
var name=document.getElementById("name").value;
window.alert(name);
sendRequest("SayHello?name="+name);
}
</script>
</head>
<body>
姓名:<input type="text" id="name" /> <input type="button" value="提交" onclick="sayHello()" />
<div id="hello"></div>
</body>
</html>
- 编写servlet文件
源码:SayHello.java
代码说明:在servlet中,接收XMLHttpRequest对象传递过来的参数,并且根据处理的结果生成XML文档,然后把XML文档返回给JSP页面。
package com;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class SayHello extends HttpServlet{
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
response.setContentType("text/xml;charset=GB2312");
response.setHeader("Cache-Control","no-cache");
PrintWriter out=response.getWriter();
String output=" ";
if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
output="<response>Hello "+request.getParameter("name")+"</response>";
out.println(output);
out.close();
}
public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
doPost(request,response);
}
}
- 配置web.xml
源码:web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<!-- 完成Servlet中name和class之间的匹配 -->
<servlet>
<servlet-name>SayHello</servlet-name>
<servlet-class>com.SayHello</servlet-class>
</servlet>
<!-- 完成URL地址到name中的映射,然后到< servlet>标签中匹配 -->
<servlet-mapping>
<servlet-name>SayHello</servlet-name>
<url-pattern>/SayHello</url-pattern>
</servlet-mapping>
</web-app>
运行效果
代码片段解释
一、 创建XMLHttpRequest对象
var XMLHttpReq;
function createXMLHttpRequest() {
//适应不同的浏览器
if(window.XMLHttpRequest)
XMLHttpReq=new XMLHttpRequest();
else {
if(window.ActiveXObject)
try{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try {
XMLHttpReq=new ActiveXObject("Miscrosoft.XMLHTTP");
}catch (e){
}
}
}
}
XMLHttpRequest对象在Ajax中占据十分重要的地位,Ajax中的客户端就是通过XMLHttpRequest对象与服务器通信的。在IE浏览器中,XMLRequest对象是以ActiveX组建的形式提供的(不同版本不同使用方式);而在其他浏览器其中则使用Javascript的本地方法创建。
二、 使用XMLHttpRequest对象发送请求
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("get",url,true);
XMLHttpReq.send(null);
XMLHttpReq.onreadystatechange=handleResponse;
}
在向服务器发送请求之前,首先使用XMLHttpRequest对象的open方法建立对服务器调用,然后才能向服务器发送请求消息。如果发送请求的数据量较少则直接使用传参的方式发送,send方法中的参数用null代替。如果发送请求的数据量多则可把发送的内容组成XML文档,然后通过send(“content”)即可,其中content参数就是XML文档的内容。
三、 服务器端处理用户请求
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
response.setContentType("text/xml;charset=GB2312");
response.setHeader("Cache-Control","no-cache");
PrintWriter out=response.getWriter();
String output=" ";
if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
output="<response>Hello "+request.getParameter("name")+"</response>";
out.println(output);
out.close();
}
当客户端使用超链接传递参数时,服务器端的处理比较简单,仅仅通过request.getParament(“参数名称”)即可取出对应参数的值,然后根据取得的值进行相应的逻辑操作。
生成XML文档内容;把生成的内容放在Print Writer对象中返回给用户。
四、 客户端处理服务器响应
function handleResponse() {
if(XMLHttpReq.readyState==4) {
if (XMLHttpReq.status == 200) {
var res = XMLHttpReq.responseXML;
var response = res.getElementsByTagName("response")[0].firstChild.nodeValue;
document.getElementById("hello").innerHTML = response;
}
}
}
当服务器端用Print Writer对象返回一般字符串时,在客户端可以通过XMLHttpRequest对象的responseText属性取出服务器返回的内容。
更多时候服务器会用XML文档返回逻辑处理结果,在客户端可以通过XMLHttpRequest对象的responseXML属性取出服务器返回的响应文档。在JavaScript中,可以用DOM方式分析这个XML文档,从而取出用户需要的内容。
通过使用innerText或者innerHTML可以设置HTML页面元素内的显示内容,这种操作不会对整个页面进行刷新。
小结
Ajax真是一个不错的东西,尤其是对于性能比较差的机器来说,用的最多的还是查询,好东西哇