Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json):
ajax是2005年提出的，在2006，2007年迅速的发展，⽬前很多⽹站都使⽤了ajax技术，在招聘软件⼯程师时，ajax技术是必须要求掌握的。ajax技术包含了⼏种技术:javascript、xml、css、xstl、dom、xhtml和XMLHttpRequest七种技术，所以ajax就像是粘合剂把七种技术整合到⼀起，从⽽发挥各个技术的优势，威⼒惊⼈。[新瓶装旧酒，组合拳]ajax是⼀个与服务端语⾔⽆关的技术. 即可以使⽤在(php/java ee/ ⽹站/ asp)ajax可以给客户端返回三种格式数据(⽂本格式，xml , json格式)
为什么ajax会如此流⾏，必然有它的道理。ajax技术解决了很多其它技术解决不了的问题，⽐如:
(1)页⾯⽆刷新的动态数据交换
(2)局部刷新页⾯【验证⽤户名唯⼀】
(3)界⾯的美观【增强⽤户体验】
(4)对数据库的操作
(5)可以返回简单的⽂本格式，也可以返回 xml⽂件格式, json数据格式
ajax技术的意义：
互联⽹的连接是不稳定，谁也不愿意看着⾃⼰的电脑从服务器⼀点⼀滴的下载数据，那么，ajax是不是解决了这个问题呢，说实话，与其说ajax解决了这个问题，倒不如它只是掩盖了这个问题，它只是在服务器和客户端之间充当了⼀个缓冲器，让⽤户误以为服务没有中断。精确的说，ajax并不能提⾼从服务器端下载数据的速度，⽽只是使这个等待不那么令⼈沮丧。但是正是这⼀点就⾜以产⽣巨⼤的影响和震动，它实际上也对桌⾯软件产⽣了巨⼤的冲击。
ajax在什么地⽅⽤的多
1 动态加载数据，按需取得数据。【树形菜单、联动菜单…/省市联动】
2 改善⽤户体验。【输⼊内容前提⽰、带进度条⽂件上传…】
3 电⼦商务应⽤。【购物车、邮件订阅…】
4 访问第三⽅服务。【访问搜索服务、rss阅读器】
ajax 的运⾏原理分析：
PS：最重要的就是要弄透这四道线，其中4号线需要⼀个回调函数来实现。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后⽤javascript来操作DOM⽽更新页⾯。这其中最关键的⼀步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核⼼机制，它是在IE5中⾸先引⼊的，是⼀种⽀持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，⽽不阻塞⽤户。达到⽆刷新的效果。
　我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange  每次状态改变所触发事件的事件处理程序。
responseText    从服务器进程返回数据的字符串形式。
responseXML    从服务器进程返回的DOM兼容的⽂档数据对象（document）。
status          从服务器返回的数字代码，⽐如常见的404（未到）和200（已就绪）
status Text      伴随状态码的字符串信息
　readyState      对象状态值
0 (未初始化) 对象已建⽴，但是尚未初始化（尚未调⽤open⽅法）
1 (初始化) 对象已建⽴，尚未调⽤send⽅法
2 (发送数据) send⽅法已调⽤，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕，此时可以通过通过responseXml和responseText获取完整的回应数据
5. 数据的布局刷新
使⽤ajax与服务器通信的的步骤
创建⼀个XMLHttpRequest对象（第⼀道线）
不同的浏览器创建 XMLHttpRequest 对象的⽅法是有差异的.我们使⽤js 的atch..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17function getXmlHttp()
{
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();}
catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}      catch (e){
alert("您的浏览器不⽀持AJAX！");
return false;}}
}}
创建url,data，通过 send()，发送请求。（第⼆道线）
服务器端接收 ajax的请求，做相应处理(操作数据库)，然后返回结果。（第三道线）
客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据，然后就完成局部刷新当前页⾯任务。（第四道线）经典案例：
■ ajax经典案例—⽆刷新验证⽤户名
在⽤户注册时：
1 传统的⽅法是把⽤户填写的所有信息都提交到服务器，如果⽤户名重复，就会出异常。
2 如果使⽤ajax我们可以只提交⽤户名，确认⽤户名是否存在，再让⽤户点击注册。
配置⽂件（仅使⽤了servlet):
1 2 3 4 5 6 7 8 9 10 11 12 13 14<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="/2001/XMLSchema-instance"
xmlns="/xml/ns/javaee"
xsi:schemaLocation="/xml/ns/javaee /xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<servlet>
<servlet-name>ZMC</servlet-name>
<servlet-class>com.Register</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ZMC</servlet-name>
<url-pattern>/register</url-pattern>
</servlet-mapping>
</web-app>
服务端：
1 2 3 4 5 6 7package com;
import java.io.IOException;
import javax.servlet.ServletException; import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30public class Register extends HttpServlet {
private static final long serialVersionUID = 1L;
public Register() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { }
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
if(!Parameter("user").equals("zmc")){
}
else{
}
}
}
客户端请求页⾯：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>⽆刷新验证⽤户名</title>
<script type="text/javascript">
//创建ajax引擎
//原理图中的⼀号线
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象XmlHttpRequest 对象⽅法不⼀样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest=null;//设置全局变量
//验证⽤户名是否存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//判断XMLHttpRequest对象是否创建成功
if(myXmlHttpRequest){
//通过myXmlHttpRequest对象发送请求到服务器的某个页⾯
//第⼀个参数表⽰请求的⽅式, "get" / "post"
//第⼆个参数指定url，对哪个页⾯发出ajax请求(本质仍然是http请求)
/
/第三个参数表⽰ true表⽰使⽤异步机制，如果false表⽰不使⽤异步
var data="user="+$('username').value;
var url="/AjaxDemo/register";
//打开请求.
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); myXmlHttpRequest.setRequestHeader("RequestType","ajax");
//指定回调函数.chuli是函数名
//注意在Ajax中函数是调⽤，函数()是引⽤函数地址
//状态改变的事件触发器，共四种状态
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91//真的发送请求，如果是get请求则填⼊ null即可
//如果是post请求，则填⼊实际的数据
//这就是原理图中的⼆号线
//如果是get⽅法，参数写null
myXmlHttpRequest.send(data);
}
}
//回调函数
//⼀次请求回调函数会被调⽤四次，分为四种状态，我们关⼼的是第四种状态即：完成
//原理图中的四号线
function chuli(){
//window.alert("处理函数被调回"+adyState);
//我要取出从registerPro.php页⾯返回的数据
adyState==4){//最好把响应状态码为200也加⼊判断
//取出值，根据返回信息的格式定.text
//window.alert("服务器返回"+sponseText);
$('myRes').sponseText;
}
}
//这⾥我们写⼀个函数，⼀般根据id取元素函数名都写为$
function $(id){
ElementById(id);
}
</script>
</head>
<body>
<!--
onkeyup：键⼊⼀个字符便会触发它，在这个例⼦中便是调⽤checkName()函数。
-->
<form action="" method="post">
⽤户名字:<input type="text"  onkeyup="checkName();"  name="username1" id="username">    <input type="button" onclick="checkName();"  value="验证⽤户名">
<input type="text" id="myRes">
<br/>
⽤户密码:<input type="password" name="password"><br>
电⼦邮件:<input type="text" name="email"><br/>
<input type="submit" value="⽤户注册">
</form>
<form action="" method="post">
⽤户名字:<input type="text" name="username2" >
<br/>
⽤户密码:<input type="password" name="password"><br>
电⼦邮件:<input type="text" name="email"><br/>
<input type="submit" value="⽤户注册">
</form>
</body>
</html>
响应结果图：
PS：使⽤get⽅式发出请求，如果提交的⽤户名不变化，浏览器将不会真的发请求，⽽是缓存取数据., url解决⽅法1. url 后带⼀个总是变化的参数,⽐如当前时间
1var url="/ajax/registerProcess.php?mytime="+new  Date()+"&username="+$("username").value;
2. 在服务器回送结果时，禁⽤缓存.
//这⾥两句话很重要，第⼀讲话告诉浏览器返回的数据是xml格式
header(“Content-Type: text/xml;charset=utf-8”);
//告诉浏览器不要缓存数据
header(“Cache-Control: no-cache”);
AJAX 可以在php项⽬,java ee项⽬,项⽬使⽤。在服务器端的业务逻辑层使⽤何种服务器端语⾔都可以。
htmlbutton属性
从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语⾔⼀般以如下 3 种格式返回数据：Text(⼜称Html格式)、XML、JSON。
返回Html格式
HTML 由⼀些普通⽂本组成。如果服务器通过 XMLHttpRequest 发送 HTML，⽂本将存储在 responseText 属性中。
不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插⼊到页⾯中。
插⼊ HTML 代码最简单的⽅法是更新这个元素的 innerHTML 属性。
innerHTML 并⾮ DOM 标准。
■返回xml格式优点：
XML 是⼀种通⽤的数据格式。不必把数据强加到已定义好的格式中，⽽是要为数据⾃定义合适的标记。利⽤ DOM 可以完全掌控⽂档。
缺点：如果⽂档来⾃于服务器，就必须得保证⽂档含有正确的⾸部信息。若⽂档类型不正确，那么 responseXML 的值将是空的。当浏览器接收到长的 XML ⽂件后， DOM 解析可能会很复杂
PS：不管是返回的何种类型，影响的只是三四号线
上⾯的那个例⼦便是返回了text格式，现在还是拿上⾯那个例⼦返回xml 格式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22function chuli(){
adyState==4){
//看看如果取出 xml格式数据，返回的是document对象，xml //dom
//获取mes节点
var ElementsByTagName("mes");
//取出mes节点值
//mes[0]->表⽰取出第⼀个mes节点
//mes[0].childNodes[0]->表⽰第⼀个mes节点的第⼀个⼦节点
var mes_val=mes[0].childNodes[0].nodeValue;
$('myres').value=mes_val;
}
}
//这⾥两句话很重要，第⼀讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
if(!Parameter("user").equals("zmc")){
返回JSON格式：（推荐）
JSON 只是⼀种⽂本字符串。它被存储在 responseText 属性中。为了读取存储在 responseText 属性中的 JSON 数据，需要根
据 JavaScript 的 eval 语句。函数 eval 会把⼀个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执⾏。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本⾝是可执⾏的
1 2 3 4 5 6protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
String str="{'ceshi':'这个名字可以注册'}";
String str2="{'ceshi':'这个名字不可以注册'}";
if(!Parameter("user").equals("zmc")){

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。