`
百合不是茶
  • 浏览: 354958 次
社区版块
存档分类
最新评论

XMLHttpRequest实现Ajax局部更新效果

阅读更多

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>

 

运行结果:

 

账号存在

 

账号不存在

 

  • 大小: 810 Bytes
  • 大小: 992 Bytes
0
0
分享到:
评论

相关推荐

    java实现ajax局部刷新

    这里的"Java实现Ajax局部刷新"是一个基础的示例,旨在帮助初学者理解Ajax的工作原理及其在实际开发中的应用。 首先,让我们详细解释Ajax的核心概念。Ajax并非一种单一的技术,而是一种综合运用多种Web技术...

    ajax局部刷新技术ajax局部刷新技术ajax局部刷新技术

    本篇文章主要介绍的是“AJAX局部刷新”这一技术的应用及其实现方法。 #### 二、AJAX局部刷新技术概述 局部刷新是指只对页面的部分区域进行刷新或更新,而不是整个页面。这种技术可以显著提高用户体验,减少网络...

    AJAX局部刷新案例

    在"AJAX局部刷新案例"中,我们关注的是如何通过JavaScript和相关的DOM操作来实现网页的局部刷新。这种技术通常涉及到以下几个关键组件: 1. **XMLHttpRequest对象**:这是AJAX的核心,它创建了一个异步的HTTP请求,...

    Ajax局部刷新c#源码

    Ajax局部刷新技术是一种在网页不进行整个页面刷新的情况下,通过后台与服务器异步交换数据并局部更新页面的技术。这种技术极大地提升了用户体验,因为它允许用户在交互时无需等待整个页面加载,仅更新必要的部分。C#...

    ajax与php利用json传输数据,实现局部刷新

    Ajax的核心在于创建XMLHttpRequest对象,通过异步发送HTTP请求到服务器,获取响应,然后在客户端处理这些数据,更新DOM元素,实现局部刷新。PHP作为服务器端脚本语言,常用于处理和返回数据,特别是JSON格式的数据,...

    ajax实现局部刷新

    综上所述,Ajax技术在JSP中实现局部刷新,能够显著提升网页的交互性和用户体验,尤其适用于实时更新内容的场景,如视频播放评论区。通过掌握Ajax的使用和原理,开发者可以创建出更加动态、高效的Web应用。

    AJAX实现地图拖动效果

    AJAX(Asynchronous JavaScript and XML)技术能够帮助我们实现这种效果,让用户无需刷新整个页面就能实时更新地图区域。本文将详细介绍如何利用AJAX来实现类似Google地图的地图拖动功能。 首先,我们需要理解AJAX...

    ajax进度条,实现很炫的效果

    2. 在`script.txt`中编写JavaScript代码,使用`XMLHttpRequest`对象实现Ajax请求和进度条更新: ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求的URL和类型 xhr.open('GET',...

    AJAX局部刷新技术

    它的核心在于使用JavaScript与服务器进行异步数据交换,通过XML或者JSON等格式传输数据,并且更新DOM(Document Object Model)来实现页面的局部刷新。这种技术极大地提升了用户体验,因为用户无需等待整个页面加载...

    购物车和AJAX局部刷新两个实例源码

    为了深入理解这个示例,你可以打开这个文件查看具体的实现细节,包括如何创建AJAX请求,如何处理服务器响应,以及如何更新DOM元素以实现局部刷新效果。 总的来说,购物车和AJAX局部刷新是提升Web应用用户体验的关键...

    Ajax using XMLHttpRequest and Struts

    Ajax技术的核心是XMLHttpRequest对象,它允许网页在不重新加载整个页面的情况下,与服务器进行数据交换,从而实现局部刷新,提升响应速度和交互性。 ### Ajax与XMLHttpRequest Ajax技术最早由Adaptive Path提出,...

    Ajax页面局部异步刷新技术

    通过以上分析可以看出,通过Ajax技术中的`XMLHttpRequest`对象可以轻松地实现页面局部的异步刷新,极大地提升了用户的交互体验。此外,还需要注意编码、请求方式、同步/异步模式的选择等因素对请求的影响。在实际...

    ajax 局部刷新的例子

    要实现Ajax局部刷新,我们需要以下几个关键步骤: 1. **创建XMLHttpRequest对象**:这是Ajax的核心,它允许JavaScript与服务器进行通信。在所有现代浏览器中,可以使用`new XMLHttpRequest()`创建这个对象。 2. **...

    Ajax局部刷新分页

    Ajax局部刷新分页就是一种这样的应用,它允许用户在不重新加载整个页面的情况下,仅更新页面中与分页相关的部分。这种技术在大数据量、多页展示的场景下特别有用,如电商产品列表、论坛帖子等。 首先,我们需要理解...

    asp.net中ajax局部刷新

    ### ASP.NET中Ajax局部刷新详解 #### 一、引言 在Web开发中,局部刷新是一种常见的技术,它能够在不重新加载整个页面的情况下更新部分页面内容。这种技术极大地提升了用户体验,尤其是在复杂的Web应用中,局部刷新...

    Ajax局部刷新小实验

    Ajax局部刷新技术是一种在网页无需整体刷新的情况下更新部分页面内容的方法,主要依赖于JavaScript和XMLHttpRequest对象。在本文中,我们将深入探讨Ajax的基本概念、核心代码以及如何实现局部刷新。 首先,了解Ajax...

    ajax实现页面内部模块更新

    **Ajax 实现页面内部模块更新** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过JavaScript与服务器进行异步数据交换,使用户可以与网页进行交互,...

    使用Ajax实现页面无刷新(局部刷新),

    它的核心是JavaScript对象XMLHttpRequest,通过这个对象,我们可以向服务器发送异步请求,获取数据并动态更新页面内容,从而实现页面的无刷新或局部刷新。 **一、Ajax的基本工作原理** Ajax的核心是创建...

    ajax技术 局部更新内容

    Ajax(Asynchronous JavaScript and XML)技术是Web开发中的一种重要技术,它允许在不刷新整个网页的情况下,通过后台...在实际项目中,应结合使用Ajax技术,并考虑兼容性、性能优化和错误处理等问题,以实现最佳效果。

Global site tag (gtag.js) - Google Analytics