Ajax用于数据的更新等操作
xmlHttpRequest的属性和方法
方 法 |
描 述 |
abort() |
停止当前请求 |
getAllResponseHeaders() |
把HTTP请求的所有响应首部作为键/值对返回 |
getResponseHeader("header") |
返回指定首部的串值 |
open("method", "url") |
建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数 |
send(content) |
向服务器发送请求 |
setRequestHeader("header", "value") |
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
属 性 |
描 述 |
onreadystatechange |
每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数 |
readyState |
请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成 |
responseText |
服务器的响应,表示为一个串 |
responseXML |
服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 |
status |
服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等) |
statusText |
HTTP状态码的相应文本(OK或Not Found(未找到)等等) |
使用XMLHttpRequest实现Ajax效果思路;
1,创建XMLHttpRequest
2,创建回调函数callback
3,设置请求的路径
4,发送数据
5,回调函数中判断是否交互完成,是否找到页面,接受servlet返回的数据
代码实现:
Servlet代码:记得web.xml中配置
package ajaxDemo; 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; /** * * @author Administrator 通过局部刷新来实现数据的查找Ajax */ public class AjaxServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html"); request.setCharacterEncoding("GBK"); response.setCharacterEncoding("GBK"); //获取url传递的参数 String userName = request.getParameter("userName"); System.out.println(userName); //假设连接上数据库,判断 并给予返回值 ,ok表示可以注册,ON表示不可以注册 if ("123".equals(userName)) { out.write("ON"); } else { out.write("OK"); } } }
注意:(重点)
Jquery和Ajax实现局部更新;需要引Jquery的包
ajax提交数据不需要通过form表单提交,不需要submit,
需要自己获取表单框中的值,
用户名: <input type="text" id="userName" onblur="fun_user()" /> <div id="divName"></div> <br /> 密 码: <input type="password" id="userPwd" /> <div id="divPwd"></div> <input type="button" value="提交" />
Jquery+ajax关键代码:
<script type="text/javascript" src="js/jquery-1.8.3.js"> </script> </head> <body> <script type="text/javascript"> //javascript中需要引入Jquery包就不能将函数写在同一级下 var xmlHttp; function fun_user() { //使用Jquery获取id的值 var username = $("#userName").val(); //创建XMLHttpRequest的对象,js创建对象和java类似,也是使用new //XMLHttpRequest的open(),send(),abort(),readyState,responseText xmlHttp = new XMLHttpRequest(); // if(xmlHttp){ // alert("创建") // }else{ // alert("出错了"); // } //2,创建回调函数callback xmlHttp.onreadystatechange = callback; //3,创建与Servlet的连接符,定义连接的方式,是否为异步,是否需要账号和密码验证 xmlHttp.open("GET", "AjaxServlet?userName=" + username, true); //4,发送数据,数据已经通过连接方式传送,所以这里只需要发送null xmlHttp.send(null); } //回调函数callback function callback() { //判断是否Ajax交互完成 alert(xmlHttp.readyState); //readyState的书中状态 if (xmlHttp.readyState == 4) { //200表示网页是否找到 if (xmlHttp.status == 200) { //以文本的方式返回值 var xmltext = xmlHttp.responseText; //获取提示位置 var divname = document.getElementById("divName"); //设置提示信息 divname.innerHTML = xmltext; } } } </script>
运行结果:
账号存在
账号不存在
相关推荐
tools.jsp 兼容创建xmlhttprequest,update.jsp前台页面,getColor.jsp后台页面。这个只能让初学者对ajax有感性认识。
下面给大家介绍JS实现AJAX局部刷新功能,具体内容如下所示: 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 // 创建...
AJAX 使网页实现异步更新。这就是在不重新加载整个网页的情况下,对网页进行局部更新。 XMLHttpRequest 是 AJAX 的关键 现在浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。 向后台请求数据...
创建XMLHttpRequest对象var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("get", "GetDate.ashx?id=" + encodeURI("中国") + "&ts;", false); xmlhttp.onreadystatechange = function () { if ...
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据。所有现代浏览器均...
1.在实验四基础上使用AJAX技术实现异步登录功能。(40分) Ajax异步的特点为:多个事件并行发生,事件互不影响,请求之后,不刷新整张页面,页面不动,只是刷新页面的局部。异步数据获取技术 XMLHttpRequest对象方法...
xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=cfun; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myfunction(id,times) { //alert("123"); loadXMLDoc("open.jsp?id="+id+...
在XMLhttpRequest被广泛使用之前,用户停留在页面上没有办法实现局部更新的功能,只能通过刷新整个页面来获取最新的数据,而由此代码的代价是需要传输大量的数据,而且有可能临时的一些用户信息也会丢失,而ajax的...
其核心是XMLHttpRequest对象,可以在不向服务器端提交整个页面的情况下,实现局部更新网页,它是AJAX的Web应用程序架构的一项关键技术。 基本属性: 基本方法: XMLHttpRequest五步法: 第一:创建...
文件包括了:项目工程(关键部分注解详细),以及sql文件。功能:选中第一个下拉框,局部刷新第二个下拉框的值,且...主要使用了MySQL,jdbc,servlet,jsp,而异步是使用了原生的JS和XMLHttpRequest异步对象实现的。
Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则...
3、AJAX的特 Ajax可以实现动态不刷新(局部刷新) 就能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上那些没有改变过的信息。 4、XMLhttprequest对象。 Ajax的核心...
很多用户都有这样需求,比如:点击按钮,刷新 GridView 中的数据,而不是这个页面刷新。使用简单的 XMLHttpRequest就可以直接实现
用AJAX刷新一个DIV中的jsp内容 代码如下: [removed] var xmlhttp; function startrefresh(){ xmlhttp=new XMLHttpRequest(); xmlhttp.open(“POST,”ss.jsp”,true); xmlhttp.setRequestHeader(“Content-type”,”...
CSSmenu 使用Ajax+CSS实现动态菜单效果 第13章(/C13/) 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml 一个雇员列表xml文件 13.2.xsl 一个XSL...
ajax(asynchronouse javascript and xml)异步的 javascrip 和xml 2,(包含了7种技术:javascript xml xstl dom xhtml css xmlhttpRequest) 3,是一种与服务器语言无关的技术,可以用在(php/jsp/asp.net) 4,ajax的...
通过大量的实例,本书详述了AJAX的内部机制,并且紧跟时代潮流,重点描述了如何依靠异步通信机制,更快、更好、更有效地实现客户端和服务器端之间的通信。 作者简介 Shahram Khosravi,博士。他是一名资深的软件...
本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介。 AJAX即“Asynchronous Javascript And XML”(异步...DOM DOM通过javascript修改DOM,ajax可以在运行时改变用户界面,或者局部更新页面中的某
因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高; jquery 实现的ajax index.html <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title&...
因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高 小练习:计算两个数的和 方式一:这里没有指定contentType:默认是urlencode的方式发的 index.html <!DOCTYPE html> <...