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是一个[局部刷新 ...

随机推荐

BZOJ1026_windy数_KEY
题目传送门数位DP,其实只要求1~A-1和1~B就可以了.两数相减即为答案. 考虑怎们求1~A. 设f[i][j]表示到第i位,为j的windy数总数. 由前一位差值大于1的方程转移. 但是统计答案 ...
洛谷 1440 求m区间内的最小值
洛谷 1440 求m区间内的最小值题目描述一个含有n项的数列(n<=2000000),求出每一项前的m个数到它这个区间内的最小值.若前面的数不足m项则从第1个数开始,若前面没有数则输出0. ...
【转载】COM 组件设计与应用（七）——编译、注册、调用
原文:http://vckbase.com/index.php/wv/1218.html 一.前言上两回中,咱们用 ATL 写了第一个 COM 组件程序,这回中,主要介绍编译.册和调用方法.示例程序 ...
用 GSL 求解超定方程组及矩阵的奇异值分解(SVD) 2
接上一篇... 下面我们将 SVD 相关的功能封装成一个类,以方便我们提取 S 和 V 的值. 另外,当我们一个 A 有多组 x 需要求解时,也只需要计算一次 SVD 分解,用下面的类能减少很多计算量 ...
设置 idea 运行前不去检查其他类的错误的方法
问题描述 MainClass为要运行的正常类,目录下存在一个类ErrorClass有错误,运行MainClass时会无法运行. 现在需要忽略ErrorClass中的错误,执行MainClass中的代码 ...
Model详解
一.数据库操作 Model操作: 创建数据库表结构(建表) 操作数据库表(增删改查) 做一部分的验证(验证) a.建表 1.表字段 AutoField(Field) - int自增列,必须填入参数 p ...
MVC Redirect 页面跳转不了
1:如果是AJAX调取后台控制器的方法,那么最后跳转的步骤应该在AJAX的success方法里面执行跳转若果要在控制器跳转那么应该是前端页面进行表单提交在控制器直接用 redire等跳转方法
yum 出现error: db5 error
yum 安装k8s的过程中用了 Ctrl+ z, 然后yum 再也不能使用了: Error: rpmdb open failed 解决方法: rpm --rebuilddb yum clean all ...
CF刷题-Codeforces Round #481-F. Mentors
题目链接:https://codeforces.com/contest/978/problem/F 题目大意: n个程序员,k对仇家,每个程序员有一个能力值,当甲程序员的能力值绝对大于乙程序员的能力值 ...
[Lua] 尾调用消除（tail-call elimination）
<Lua程序设计(第2版)> 6.3 正确的尾调用(proper tail call) Lua是支持尾调用消除(tail-call elimination)的,如下面对函数g的调用就是尾调 ...

jsp与Ajax技术

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

随机推荐

热门专题