java和Ajax
原博(实在太啰嗦了):https://netbeans.org/kb/docs/web/ajax-quickstart_zh_CN.html
1、Ajax的基本原理
Ajax 代表异步 JavaScript 和 XML。
Ajax 交互在后台异步处理。同时,用户可以继续使用页面。Ajax 交互由 JavaScript 代码启动。Ajax 交互完成后,JavaScript 会更新页面的HTML 源代码。这些更改会立即进行,
不需要刷新页面。
Ajax 交互的应用场景:如使用服务器端逻辑验证窗体条目(当用户输入窗体条目时)、检索服务器中的详细数据、动态更新页面上的数据,以及从页面提交部分窗体。
Ajax 的工作原理是使用 XMLHttpRequest
对象在客户端和服务器之间异步传递请求和响应
流程:
- 用户触发一个事件,例如,在键入姓名时释放一个按键。这会引发调用初始化
XMLHttpRequest
对象的 JavaScript 函数。 XMLHttpRequest
对象将使用一个请求参数进行配置,该参数将包含触发该事件的组件 ID 以及用户所输入的任何值。然后,XMLHttpRequest
对象将向 Web 服务器发出异步请求。- 在 Web 服务器上,诸如 servlet 或监听程序之类的对象会处理该请求。从数据存储检索数据,并且准备一个响应,其中包含 XML 文档形式的数据。
- 最后,
XMLHttpRequest
对象使用回调函数接收 XML 数据并对其进行处理,然后更新 HTML DOM(文档对象模型)以显示包含新数据的页面。
二、客户端编程
js关键代码:
<script type="text/javascript">
var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp() {
try {
xmlhttp = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
} catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
} catch (failed) {
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp();
if (!xmlhttp) {
//创建XMLHttpRequest 对象失败!
} else {
//创建成功!
}
xmlhttp.open("get", "http://www.cnblogs.com", true);
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send();
function getResult() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
</script>var xhr = null;
var xhr = null;
function createXHR(){
if (window.XMLHttpRequest){
// 新浏览器
xhr = new XMLHttpRequest();
}else if (window.ActiveXObject){
// IE5,IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
<script type="text/javascript"> //无参数调用 $(document).ready(function() { $('#btn1').click(function() { $.ajax({ type: "POST", //访问WebService使用Post方式请求 contentType: "application/json", url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 data: "{}", //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到 dataType: 'json', //WebService 会返回Json类型 success: function(result) { //回调函数,result,返回值 alert(result.d); } }); }); }); //有参数调用 $(document).ready(function() { $("#btn2").click(function() { $.ajax({ type: "POST", contentType: "application/json", url: "Default2.aspx/GetWish", data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}", dataType: 'json', success: function(result) { alert(result.d); } }); }); }); //返回集合(引用自网络,很说明问题) $(document).ready(function() { $("#btn3").click(function() { $.ajax({ type: "POST", contentType: "application/json", url: "Default2.aspx/GetArray", data: "{i:10}", dataType: 'json', success: function(result) { $(result.d).each(function() { alert(this); $('#dictionary').append(this.toString() + " "); //alert(result.d.join(" | ")); }); } }); }); }); //返回复合类型 $(document).ready(function() { $('#btn4').click(function() { $.ajax({ type: "POST", contentType: "application/json", url: "Default2.aspx/GetClass", data: "{}", dataType: 'json', success: function(result) { $(result.d).each(function() { //alert(this); $('#dictionary').append(this['ID'] + " " + this['Value']); //alert(result.d.join(" | ")); }); } }); }); }); //Ajax 为用户提供反馈,他们两个方法可以添加给jQuery对象在Ajax前后回调 //但对与Ajax的监控,本身是全局性的 $(document).ready(function() { $('#loading').ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide(); }); }); // 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开 $(document).ready(function() { $('btn').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }); </script>
XMLHttpRequest
对象是 Ajax 的核心,并已经成为通过 HTTP 异步传递 XML 数据的实际标准。
当您创建 XMLHttpRequest
对象时会指定三个参数:URL、HTTP 方法(GET
或 POST
),以及此交互是否为异步交互。
open(method, url, async, username, password)
req.open("GET", url, true);
如果此交互设为异步交互,则必须指定回调函数。如:req.onreadystatechange = callback;
三、服务器端编程
使用Servlet处理
1)、返回xml格式
response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache");
2)、返回json格式 Servlet处理 (从servlet中返回给ajax的dataType类型可以是text,json)
Json简单讲就是Javascript对象或数组.
Json形式一: javascript对象 { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }
Json形式二: javascript数组 [{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]
1、在servlet中构造json文本,再response.getWriter()给ajax,返回json text文本 dataType:"text"
2、用字符串构造json数据,返回json对象
servlet中返回application/json response.setContentType("application/json;charset=utf-8")
ajax中dateType用json dataType:"json",
3、返回json对象,但是在servlet中直接用把一个数组或集合转换成为json类型的数组对象
EmployeeDao employeeDao = new EmployeeDao(); ArrayList<Employee> employees = employeeDao.select(username); JSONArray jsonArray=JSONArray.fromObject(employees); PrintWriter out = response.getWriter(); out.println(jsonArray.toString());//在jsp中的数据类型dataType:"json"
<script type="text/javascript"> function check(){ var resultNode = $("#result"); var username = $("#username").val(); $.ajax({ url:"ShowEmp_ajax_json2", type:"POST", data:{username:username}, dataType:"json",//注意此时这里是json success:function(data){ //转换成jquery对象 var s = "<table border='1' width='100' height='100'>"; //若servlet中要是用 // JSONArray jsonArray=JSONArray.fromObject(employees); // out.println(jsonArray.toString()) // 这样的形式返回json对象,那么将相当于返回了一个json数组, // 类似这样[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}], // 而不是这样{"emp":[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]} // 这样在jsp中就可以直接遍历data这个json数组,不需要再转换,也不需要用data.emp(本身在servlet转换过来的也没有emp), // servlet中的contentType为application/json jsp中dataType为json $.each(data,function(index,element){ // alert(element.empNo+element.ename); s+="<tr>"; s += "<td>"+element.empNo+"</td>"; s += "<td>"+element.ename+"</td>"; s += "<td>"+element.job+"</td>"; s += "<td>"+element.mgr+"</td>"; s += "<td>"+element.date+"</td>"; s += "<td>"+element.sal+"</td>"; s += "<td>"+element.comm+"</td>"; s += "<td>"+element.deptNo+"</td>"; s+="</tr>"; }); s += "</table>"; $("#result").html(s); } }); } </script>
String userName = request.getParameter("userName"); userName=URLDecoder.decode(userName, "UTF-8"); String content = request.getParameter("content"); content=URLDecoder.decode(content, "UTF-8"); System.out.println("userName:"+userName); System.out.println("content:"+content); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); //将数据拼接成JSON格式 out.print("{\"yourName\":\"" + userName + "\",\"yourContent\":\""+content+"\"}"); out.flush(); out.close();
3)、返回纯文本
使用Struts框架
四、创建回调函数
定义回调函数,以处理服务器的响应,同时添加一些必要的功能,以反映用户所查看页面中的更改。
js核心代码:
function callback() { if (req.readyState == 4) { if (req.status == 200) { parseMessages(req.responseXML); } } }
java和Ajax的更多相关文章
- JAVA中AJAX的使用
AJAX<%@ page language="java" import="java.util.*" pageEncoding="UTF-8&qu ...
- Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
- Java实现ajax
jsp端的代码,sucess:function(){} 里面就是返回的处理 function ChangeTime(){ alert("www"); var startYmd = ...
- 分页 工具类 前后台代码 Java JavaScript (ajax) 实现 讲解
[博客园cnblogs笔者m-yb原创, 转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708]http ...
- java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)
1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...
- java,jq,ajax写分页
1.先写好html基础样式 我懒得去写css样式233,能看就行 <style> #page { width: 20px; } </style> <table> & ...
- java + jquery + ajax + json 交互
前端js部分: $.ajax({ async:true, cache:false, type:"POST", dataType : 'json', url:"/shopp ...
- java操作AJAX
1,get方式的AJAX function sendAjaxReq() { //1,创建ajax引擎 XMLHttpRequest对象 var req = new XMLHttpRequest() | ...
- java Springmvc ajax上传
ajax上传方式相对于普通的form上传方式要便捷,在更多的时候都会使用ajax (简单的小示例) 1.要先去下载一个 jquery.ajaxfileupload.js(基于jquery.js上的js ...
随机推荐
- CST 公共生成树
本实验只讨论CST(公共的生成树) 一.实验前先理解生成树决策的4 个步骤: 二.实验拓扑 1. 实验描述: 由于业务的要求,要有可靠的链路,要对链路实现冗余,但链路的冗余有可能给网络带来广播风暴,重 ...
- xmppserver
http://highscalability.com/blog/2014/1/6/how-hipchat-stores-and-indexes-billions-of-messages-using-e ...
- call_grant_exec.sql
set echo off feedback off verify off pagesize 0 linesize 120 define v_grantee = & ...
- 【简单dp】 poj 2346
题意:给定一个N 求一共有多少个N位数 前N/2个数的和等于后N/2个数的和思路:令F[i][j] 为sum值为j的i位数的个数则问题转化成 求 sum(F[n/2][j] * F[n/2][ ...
- 关于Application.Lock…Application.Unlock有什么作用?
因为Application变量里一般存储的是供所有连接到服务器的用户共享的信息(就像程序中所说的 "全局变量 "), 由于是全局变量,所以就容易出现两个或者多个用户同时对这一变量进 ...
- 转:Web 测试的创作与调试技术
摘要:学习有关 Visual Studio 2005 Web 测试的更多知识,包括 Web 测试引擎和记录器如何工作,以及如何创建有效的 Web 测试. 本页内容 读者 简介 记录一个 Web 测试 ...
- 关于struts2的web.xml配置
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...
- js浏览器兼容
//window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...
- STM32开发指南-跑马灯实验
简单对I/O口的控制,主要通过对寄存器的读写控制.主要通过I/O的寄存器来控制:1. 控制I/O的方向2. 控制I/O的输出电平或上下来电阻3. 存储I/O口当前的输入状态(高低电平) 对使用LED灯 ...
- 安卓 Android题目大全
安卓001个人事务管理系统(单端) 安卓002手机订餐系统 安卓003无线点菜 安卓004酒店房间预定系统 安卓005个人相册管理系统(单端) 安卓006计算器(单端) 安卓007英语学习(单端) ...