jsp与Ajax技术

Ajax 是Asynchronous Javascript and XML的缩写，异步的JavaScript和xml。Ajax是由JavaScript、XML、CSS、DOM等多种已有技术的结合，它可以实现客户端的异步请求操作。这样可以实现不需要页面刷新的情况下与服务器进行通信，从而减少用户的等待时间。

Ajax简介

　　Ajax是一种创建交互式网页应用的网页开发技术。使用Ajax更为动态和响应更为敏感的web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的结合。

　　（1）基于XHTML和CSS标准的表示

　　（2）使用DOM进行动态显示和交互

　　（3）使用XMLHttpReques与服务器进行异步通信

　　（4）使用JavaScript绑定一切

Ajax的工作原理

在用户和服务器之间加一个中间层，使得用户和服务器响应异步化。并不是所有的请求都交给服务器，如数据验证和数据处理都交给Ajax引擎来处理，只有确定需要从服务器读取数据时再由Ajax引擎代为服务器提交请求

用什么取什么用多少取多少，不会有数据冗余和浪费减少了数据下载总量，而且更新页面时不用重载全部内容只需更新需要的那部分即可。

Ajax使用的技术

1.JavaScript脚本语言

可以实现网页特效及表单验证等功能，是丰富的面向对象编程的程序设计语言。

2.XMLHttpRequest

Ajax的核心技术，它是一个具有应用程序接口的JavaScript对象。1999年微软与IE5.0退出的。通过.XMLHttpRequest对象，Ajax可以像应用程序一样只同服务器一样进行数据层面的交换，而不用每次刷新页面，也不用每次讲数据处理交给服务器既减轻了服务器负担又加快了响应的熟读减少了用户等待的时间。。

IE浏览器

var http_request=new ActiveXObject("Microsoft.XML.HTTP");

var http_request=new ActiveXObject("Msxml2.XML.HTTP");

其他浏览器

var http_request=new XMLHttpRequest();

跨浏览器的xmlhttprequest

if(window.XMLHttpRequest){

　　XMLHttpReq=new XMLHttpRequest();

　　if(XMLHttpReq.overrideMimeType){

　　　　XMLHttpReq.overrideMimeType('text/xml');

　　}

else{

　　if(window.ActiveXObject){

　　　　try{

　　　　　　XMLHttpReq=new ActiveXObject("Msxml2.XML.HTTP")

　　　　}catche(e){

　　　　　　try{

　　　　　　　　XMLHttpReq=new ActiveXObject("Microsoft.XML.HTTP");

　　　　　　}catch(e){}

　　　　}

XMLHttpRequest常用方法

（1）open（"method","url",asyncFlag,"userName","password"）;

method一般为get或post，url为指定请求地址可以是相对也可以是绝对，asyncFlag可选参数true为同步false为异步，userName、password请求用户名请求密码为可选参数。

（2）send（）向服务器发送请求，如果请求声明为异步立刻返回否则等到接收响应为止。

send（context）context用于指定发送的数据，可以是DOM实例、输入流字符串。没有的话可以设置为null。

（3）setRequestHeader()方法请求设置http头值

setRequestHeader("label","value")在open方法之后

（4） abort()停止当前异步请求。

（5）getAllResponseHeaders()以字符串的形式返回完整的HTTP头信息，当存在参数时，表示以字符串的形式返回该参数的http头信息

XMLHttpRequest常用属性

属性	说明
onreasystatechange	每个状态改变都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态：0=为初始化、1=正在加载、2=已加载、3=交互中、4=完成
responseText	服务器的响应，表示为字符串
status	返回服务器的http状态码：200=成功、202=请求被接收但尚未成功、400=错误的请求、404=文件未找到、500=内部服务器错误
statusText	返回http状态码对应的文本
responseXML	服务器的响应，表示为XML，这个对象可以解析为一个DOM对象

3.xml语言

extensible Markup language可扩展的标记语言，它提供了用于描述结构化数据的格式。XMLHttpRequest与服务器交换的数据通常采用XML格式，也可以基于文本的其他格式。

4.DOM

document object model文件对象模型。是表示文档（如HTML文档）和访问、操作文档元素的应用程序接口。

5.CSS

cascading style sheet层叠样式表，用于增强网页样式并允许将样式信息与网页内容分离的一种标记是语言。

Ajax开发需要注意的问题

1.浏览器兼容问题

　　IE5.0、Netscape7以上。不同的浏览器XMLHttpRequest不一样。

2.XMLHttpRequest对象封装问题

　　XMLHttpRequest处理完事件之后会被销毁。

3.性能问题

　　优化fo循环、将DOM节点附加到文档上、尽量减少"."操作符的使用

4.中文编码问题

默认的字符集是utf-8.产生乱码的情况如下

（1）发送的路径参数中包含中文，在服务器端接收时产生乱码

　　当接收使用get方法提交的数据，要将编码转换为gb2312

　　String name=request.getParameter();

　　out.println("姓名"+new String(name.getBytes("iso-8859-1"),"gb2312"));//解决中文乱码

　　当接收使用post方法提交数据时要将编码转换为utf-8

　　String name=request.getParameter("name");

　 out.println("姓名"+new String(name.getBytes("iso-8859-1"),"utf-8"));//解决中文乱码

（2）返回到responseText或responseXML的值包含中文时产生乱码

　　Ajax接收数据时时按照utf-8解码的。所以要保证服务器端传递的数据utf-8编码格式。

应用Ajax局部刷新用户名

Show.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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>Say hello--Ajax请求响应</title>
<script language="javaScript">
//创建XMLhttp对象
var XMLHttpReq=false;
function createXMLHttpRequest(){
	if(window.XMLHttpRequest){
		XMLHttpReq=new XMLHttpRequest();
		if(XMLHttpReq.overrideMimeType){
			XMLHttpReq.overrideMimeType('text/xml');
		}
	}else{
		if(window.ActiveXObject){
			try{
				XMLhttpReq=new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
					XMLhttpReq=new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e){}
			}
		}
	}
}
//处理服务器响应结果
function HandleResponse(){
	//判断对象状态
	if(XMLHttpReq.readyState==4){
		if(XMLHttpReq.status==200){
			var out="";
			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.onreadystatechange=HandleResponse;
	//发送请求
	XMLHttpReq.send(null);
}
function sayHello(){
	var name=document.getElementById("name").value;
	//发送请求
	sendRequest("sayHello?name"+name);
}
</script>
</head>
<body>
<input type="text" id="name"/>
<input type="button" value="提交" onclick="sayHello()"/>
<div id="hello"></div>

</body>
</html>

　servlets/SayHellko.java

package servlets;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SayHello extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置生成文件的类型和编码格式
		response.setContentType("text/xml;cahrset=gbk");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out=response.getWriter();
		String output="";
		//处理接收到的参数，生成响应的xml文档
		if(request.getParameter("name")!=null&&request.getParameter("name").length()>0){
			output=" <response>Hello"+request.getParameter("name")+"</response>";
		}
		out.println(output);
		out.close();

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request,response);

	}

}

　　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">
  <display-name>Ajax</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
  <servlet-name>SayHello</servlet-name>
  <servlet-class>servlets.SayHello</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>SayHello</servlet-name>
  <url-pattern>/SayHello</url-pattern>
  </servlet-mapping>

</web-app>

jsp与Ajax技术的更多相关文章

Ajax+Jsp+servlet+json技术的使用
Ajax+Jsp+servlet+json技术的使用在使用json的时候,记得必须导入如下几个.jar包,最好是手动复制.jar包只lib路径下,否则可能出现异常. commons-beanutil ...
Ajax 技术一
一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...
第18天 ajax技术和javascript加强（json）
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
利用ajax技术实现用户注册。
一.ajax? 异步加载技术,在不刷新网页的前提下,实现部分网页内容的更新! AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 思考? 注册界面刚好可以应用 ...
初始ajax技术
一.AJAX是啥? 1.页面无需刷新,异步请求. 2.为什么使用ajax? 原因: 1传统模式需要将请求发送到服务器,服务器经过业务处理,返回一个页面给客户端.这样做,会很浪费资源. 2.ajax ...
AJAX技术之DWR框架
DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...
【SSH网上商城项目实战28】使用Ajax技术局部更新商品数量和总价
转自: https://blog.csdn.net/eson_15/article/details/51487323 昨天把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部 ...
2017.11.16 JavaWeb-------第八章 EL、JSTL、Ajax技术
第八章 EL.JSTL.Ajax技术 ~~ EL (expression language) 是表达式语言 ~~ JSTL(JSP Standard Tag Library) 是开源的JSP标准标签库 ...
ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得
今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术即,AJAX是一个[局部刷新 ...

随机推荐

20155237 2016-2017-2 《Java程序设计》第1周学习总结
20155237 2016-2017-2 <Java程序设计>第一周学习总结一.认真学习考核方式,理解成绩构成考核方式首先由100分构成:课堂考核12次,实验5次,团队项目(每周进度 ...
2017-2018-2 20155315《网络对抗技术》Exp4：恶意代码分析
实验目的是监控你自己系统的运行状态,看有没有可疑的程序在运行. 是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systracer套件 ...
c++ 变量共享内存-联合(union)
共享内存极少使用,所以这里我们仅作了解. .将几个变量放在相同的内存区,但其中只有一个变量在给定时刻有有效值. .程序处理许多不同类型的数据,但是一次只处理一种.要处理的类型在执行期间才能确定. .在 ...
【BZOJ1054】[HAOI2008]移动玩具
[BZOJ1054][HAOI2008]移动玩具题面 bzoj 洛谷题解太\(sb\)了,不想写了,直接点开洛谷题面单击右边蓝色按钮题解即可
2555: SubString
2555: SubString 链接题意: 动态在末尾加入一个字符串,询问一个字符串出现了多少次. 分析: 如果没有动态加入,那么建出SAM后,求出parent树上,每个点|Right|,然后走一遍 ...
win8.1下右下角出现大小写切换状态显示框解决方案
HKEY_LOCAL_MACHINE\SOFTWARE\Cambridge Silicon Radio\Harmony\Default双击右侧 OSD 将键值改成0 重启机器成功关闭显示
如何写一个Xss Bot
如何写一个Xss Bot 现在的ctf比赛里 xss的出题方式比较特殊,一般使用xss bot,所以借鉴大佬经验尝试弄一个xss题目. xss bot 就是代替管理员去完成点击页面的任务,bot需要能 ...
WebGL2系列之实例数组(Instanced Arrays)
实例化数组实例化是一种只调用一次渲染函数却能绘制出很多物体的技术,它节省渲染一个物体时从CPU到GPU的通信时间.实例数组是这样的一个对象,使用它,可以把原来的的uniform变量转换成attrib ...
VirtualBox共享文件夹 Windows 7 (宿主机) + Ubuntu 12.04
1 安装增强功能包1.1 运行Ubuntu并登陆,菜单“设备”->“安装增强功能包(Install Guest Additions)”ubun1.2 桌面上会多出一个光盘图标,光盘默认自动加载到 ...
Node of C++ Linker.
code is nothing without data. data segment - the program memory storing initialized global variable. ...

jsp与Ajax技术

jsp与Ajax技术的更多相关文章

随机推荐

热门专题