AJAX和JSP混合使用方法实例
首先要知道AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX工作原理
AJAX请求
ajax请求是依靠XMLHttpRequest对象,因此在请求前先要创建其对象
var xmlhttp;
//兼容性写法创建请求实例,IE5 6支持else里面的方法
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
接着向服务器发送请求
open函数有三个参数,请求方式,请求地址,请求是异步还是同步
send(String)函数有一个参数,只有当请求方式为post的时候,String参数才需要带上
那么GET和POST的区别呢?
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
//设置传送方式,地址,以及同步还是异步
xmlhttp.open("GET","Test.jsp?value="+escape(value),true);
xmlhttp.onreadystatechange = callback;//状态改变的时候执行这个函数,用来判断是否请求完毕
xmlhttp.send();//请求服务器,如果使用post方式,则send里面要带上传递的参数
//post方式
/**
xmlhttp.open("POST","Test.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("value="+value);
*/
然后服务器端处理并返回,这个放在实例里面有具体代码
在回调函数callback中设置对返回响应
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 200: “OK”
404: 未找到页面
相应服务器的类型
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。 这个一般当open里面的url为xml文件的时候用
function callback(){
//请求完成表示
if(xmlhttp.readyState ==4 && xmlhttp.status==200){
//设置相应操作
}
}
}
总体来说就这几个步骤,下面是详细代码
实例
首先创建一个文本框,用于测试用户名,并且添加监听事件onblur,意思是当失去焦点则执行,并在其后面创建个span空标签,用来动态显示信息,表示名称是否被占用
<form method="post" action="AJAX.jsp"> <table> <tr> <td><input type="text" id="userid" onblur="checkuser()" ><span style="color: red" id="spanid"></span></td> </tr> </table> </form>
接下来是JS代码,使用AJAX把输入的内容发送到服务器,服务器来检验
var xmlhttp;
function checkuser(){
var value = document.getElementById("userid").value;
//兼容性写法创建请求实例,IE5 6支持else里面的方法
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置传送方式,地址,以及同步还是异步
xmlhttp.open("GET","Test.jsp?value="+escape(value),true);
xmlhttp.onreadystatechange = callback;//状态改变的时候执行这个函数,用来判断是否请求完毕
xmlhttp.send();//请求服务器
}
然后服务器端获得数据后写回
<%
response.setHeader("Cache-Control","no-store");//HTTP1.1
response.setHeader("Pragma","no-cache");//HTTP1.0
response.setDateHeader("Expires",0);//禁止在服务器中缓存
String value = request.getParameter("value");//获取传送过来的参数
response.getWriter().write(value);//模拟数据写回
%>
客户端再回调函数中处理服务器写回的数据
/**
* 回调函数
*/
function callback(){
//请求完成表示
if(xmlhttp.readyState ==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);//相应返回的text
// alert(xmlhttp.responseXML);//相应返回的xml
if (xmlhttp.responseText){//这里直接判断不为空,应该根据数据库返回值来进行不同的显示
var spanid = document.getElementById("spanid");
spanid.innerHTML = "注册成功";
}
}
}
效果就是当输入框失去焦点就立即判断,当然实际判断是要连接数据库的,为了简单就直接打印出来了
以上内容是针对AJAX和JSP混合使用方法实例，希望对大家有所帮助！
相关推荐
-
实例讲解使用原生JavaScript处理AJAX请求的方法
Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制.它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面.另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载. 下面是对一个基本的 Ajax 请求进行剖析: var xhr = new XMLHttpRequest(); xhr.open('GET', 'send-ajax-data.php'); xhr.send(null); 在这里, 我们创建了一个能向服务
-
使用Ajax生成的Excel文件并下载的实例
很久沒有寫文章啦,今天分享一個如何在ASP.NET MVC里使用Ajax下載生成文件的方法,以下只是個人心得: 大家都應該知道,在ASP.NET MVC里,如果通過Ajax調用后臺控制器時,可以返回一個JSON對象,但并不能直接返回文件(除非刷新頁面,那就不是Ajax啦),所以如果想用Ajax生成文件并下載的話,那只要將生成的文件先保存到服務器上,然後再將文件路徑通過JSON返回,之後才可以進行下載,當然由於是暫時性存放,所以當下載完后就需要馬上刪除相應的文件. 以下是做法以動態生成Excel為
-
jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
-
jQuery ajax中使用confirm,确认是否删除的简单实例
jQuery ajax 中使用confirm ,确认是否删除按钮 onclick="return confirm('确认删除?');" <script type="text/javascript"> $(function(){ $("#btnDelete").click(function(){ //var user8ID = $.trim( $('#user8ID').val() ); var statu = confirm(&quo
-
Ajax和$.ajax使用实例详解(推荐)
实例一(Ajax请求基本创建格式): <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ajax练习(GET,不考虑浏览器兼容性)</title> <script type="text/JavaScript"> function doRequest() { //不考虑浏览器兼容性问题 var
-
ThinkPHP中ajax使用实例教程
本文实例讲述了ThinkPHP中使用ajax的方法,提交表单如下图所示: 点击提交,不需要刷新本页,将内容提交到数据库当中,并在本页显示提交的内容.如下图所示: 一.jquery实现方法: MessageAction.class.php页面代码如下: <?php class MessageAction extends Action{ function index(){ $this->display(); } function add(){ //ajaxReturn(数据,'提示信息',状态)
-
实例详解angularjs和ajax的结合使用
这是一篇关于easyui配合ajax使用的文章,顺带介绍angularjs的使用以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接从那种原生的httpxmlrequest 对象的js 写起了哈.看那种东西也存粹是了解 高层的东西是怎么来的 原理是啥真正做的时候写那种东西 不是扯淡么 你叼你技术牛逼整站的代码你全用那种写.html js 这种东西最开始设计出来就没考虑周全就是坨屎.还好现在有各种框架 可以帮助我们更容易的把这坨屎做的更美味.也还好由于互联网事业
-
jQuery Ajax使用实例
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的差异了. $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把
-
AJAX和JSP混合使用方法实例
首先要知道AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分
-
Springmvc ajax跨域请求处理方法实例详解
上次给一个网站写网站 前后端分离 最后跪在ajax跨域上面了 自己在网上找了个方法 亲试可用 记录一下 写一个类 继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha
-
一个简单Ajax类库及使用方法实例分析
本文实例讲述了一个简单Ajax类库及使用方法.分享给大家供大家参考,具体如下: ajax.js function Ajax(recvType){ var aj=new Object(); aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML aj.targetUrl=''; aj.sendString=''; aj.resultHandle=null; aj.createXMLHttpRequest=function(
-
ajax级联菜单实现方法实例分析
本文实例讲述了ajax级联菜单实现方法.分享给大家供大家参考,具体如下: 效果如下: 选择第一项,第二项.第三项的内容跟着改变. 选择第二项,第三项的内容跟着改变. 第三项则不影响第一项和第二项. 有几点值得提: 1.html到底是前台拼接还是后台拼接. 我选择的是前台拼接,这样可以节省流量,和后台的资源.这也比较符合程序处理,一般后台只负责提供数据. 通过json传递给前台,完了前台获取进行处理. ajax函数 function ajaxgetbigclass(val){ $.ajax({ t
-
jQuery实现form表单基于ajax无刷新提交方法实例代码
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o
-
ajax 三种实现方法实例代码
ajax即异步的javascript and xml, 本文章向码农们介绍ajax的三种实现方法(prototype实现,jquery实现,XMLHttpRequest实现) 本文主要是比较三种实现Ajax的方式,为以后的学习开个头. 准备: 1. prototype.js 2. jquery1.3.2.min.js 3. json2.js 后台处理程序(Servlet),访问路径servlet/testAjax: Java代码 package ajax.servlet; import j
-
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
本文实例讲述了PHP+Ajax实现无刷新分页的方法.分享给大家供大家参考,具体如下: 注:这里使用到的一些类库在前面文章都能找到源代码,因此为了缩短文章篇幅,都指明链接所在. 本文讲解内容为: Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/
-
原生JS实现ajax与ajax的跨域请求实例
一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null 第五步:在监听函数中,判断readyState=4&&status=200表示请求成功 第六步:使用responseText.responseXML接受响应数据,并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.
-
AJAX跨域请求数据的四种方法(实例讲解)
由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦 在这里我就不写了 通过该对象进行获取 获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请
-
JSP开发Servlet重写init（）方法实例详解
JSP开发Servlet重写init()方法实例详解 写一个Servlet时,有时需要我们重写该Servlet的初始化方法,然后,究竟是重写init(ServletConfig config),还是重写init(),这是个问题.要明了这一点,首先要知道Servlet的几个类和接口的联系: ServletConfig接口:其中有getServletName();getServletContext();getInitParameter(String name);getInitParameterNam