`

ajax知识总结

    博客分类:
  • ajax
阅读更多

 

AJAX的全称是异步的JavaScript和XML;主要用途是对于整个页面进行局部更新;

AJAX出现的目的是因为一般网页如果稍作改动,就会重新生成整个页面代码,消耗大。而AJAX能够只更新局部页面;

AJAX是在JavaScript代码中编写的;

 

<script language="Javascript">
			var xmlHttp;
			function create(){
				if(window.XMLHttpRequest){
					xmlHttp = new XMLHttpRequest();
				}
				else{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
</script>

浏览器有两种内核,IE内核和firefox内核;因此需要根据当前用户浏览器进行判断;

XMLHttpRequest有一些常用属性:

(1)readyState:请求的状态;(4 表示已经响应完毕)

(2)onreadystatechange:readyState改变时调用,通常用于回调函数的返回值;

(3)responseText:返回纯文本对象;

(4)responseXML:返回XML数据的对象;

(5)status:返回当前HTTP的状态(200为正常)

XMLHttpRequest的常用函数:

(1)open("GET/POST","url");: 创建请求,指定是post还是get,并且指定发送的目的地URL;

(2)send(param);:发送请求,通常param=null;

知识回顾:

在JavaScript中

(1)document.getElementById("name").innerHTML可以设定此控件的值;

(2)onblur事件表示失去焦点时调用; 

 

登录异步验证代码:

这里使用DAO进行连接数据库,因此这段代码忽略;

 

<html>
	<head>
		<title>Title</title>
		<script language="Javascript">
			var xmlHttp;
			var flag = false;
			function create(){
				if(window.XMLHttpRequest){
					xmlHttp = new XMLHttpRequest();
				}
				else{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			function checkId(id){
				create();
				xmlHttp.open("GET","CheckServlet?id="+id);
				xmlHttp.send(null);
				flag = true;
				xmlHttp.onreadystatechange = callback;
				document.getElementById("msg").innerHTML = "正在验证";
			}
			function callback(){
				if(xmlHttp.readyState==4){
					if(xmlHttp.status==200){
						var text = xmlHttp.responseText;
						if(text=="true"){
							document.getElementById("msg").innerHTML = "id正确";
						}
						else{
							document.getElementById("msg").innerHTML = "id重复";
						}
					}
				}
			}
			function ischecked(){
				return flag;
			}
		</script>
	</head>
	<body>
	<form action="" method="post" onSubmit="return ischecked()">
		用户ID:<input type="text" name="id" onBlur="checkId(this.value)"/><br />
		姓  名:<input type="text" name="name"/><br />
		密  码:<input type="text" name="password"/><br />
		<input type="submit" value="注册"/>
		<span id="msg"></span>
	</form>
	</body>
</html>

 注意:

(1)调用回调函数不需要加括号。

(2)readyState的拼写;

CheckServlet.java

 

package org.servlet;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import org.dao.factory.*;
public class CheckServlet extends HttpServlet{
	public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
		String id = req.getParameter("id");
		PrintWriter out = resp.getWriter();
		boolean flag=false;
		try{
			flag = DAOFactory.getInstance().findById(id);
		}
		catch(Exception e){}
		if(flag){
			out.print("true");
		}
		else{
			out.print("false");
		}
	} 
}

 在VS中利用UpdatePanel和ScriptManager实现无刷新效果。

  • 大小: 109.7 KB
  • 大小: 142.2 KB
分享到:
评论

相关推荐

    ajax知识点总结

    **Ajax(Asynchronous JavaScript and XML)技术概述** Ajax是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。它的核心是利用JavaScript与服务器进行异步数据交换,通过XML或者JSON等格式传输数据,...

    Ajax知识点总结

    Ajax由html、javascript技术、dhtml和DOM组成这个方法可以将web界面转化成交互性的ajax应用程序

    ajax基础知识总结

    学习ajax基础知识,让自己的前端技术更上一层,学会与后台交互

    Ajax知识要点总结

    ### Ajax知识要点总结 #### 一、Ajax简介与 XMLHttpRequest 对象 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换...

    Ajax第二天.xmind

    ajax知识总结: ajxa默认属于异步操作:可以通过open方法,设置false改为同步操作 ajax实现局部更新的基本步骤: 1.创建 XMLHttpRequest 对象:这是 AJAX 的核心,用于与服务器交换数据 2.配置请求:设置请求的...

    Ajax第一天.xmind

    ajax知识总结: 网络的基本知识: 1.物理层:源设备到目的设备 底层传输就是比特流 2.数据链路层 进行电信号的处理 进行数据的分组 3.网路层 进行数据包的传递 进行不同网络的选择 4.传输层:数据包的传输 建立...

    AJAX学习总结(一)--基于jQuery第一个实例

    在本篇“AJAX学习总结(一)--基于jQuery第一个实例”中,我们将探讨如何使用jQuery库实现异步JavaScript和XML(AJAX)技术。AJAX允许我们在不刷新整个页面的情况下,更新网页的部分内容,从而提供更流畅的用户体验...

    ajax详细总结

    ### AJAX详解 #### 一、什么是AJAX? AJAX(Asynchronous JavaScript and XML)是一种用于创建更快、更响应式Web...通过掌握上述基础知识,开发者可以轻松地在其项目中集成AJAX功能,实现更加流畅和高效的用户界面。

    AJAX电子书(总结)

    **AJAX电子书总结** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术的出现极大地提升了用户体验,因为它允许后台与服务器进行数据交换,而用户界面...

    史上最全面的Ajax知识点归纳总结

    史上最全面的Ajax知识点归纳总结

    Ajax的知识结构和内容

    Ajax,即Asynchronous JavaScript and XML,是一种用于创建高效、交互性强的Web应用程序的技术。它并不是一项全新的技术,而是由已有的...理解和掌握Ajax的知识结构,对于提升Web开发能力、构建高效的Web应用至关重要。

    Ajax技术总结,上面是对ajax技术的使用总结

    总结,Ajax技术通过组合各种Web技术,极大地提升了网页的交互性和用户体验,但在使用时需要根据具体场景选择合适的应用,避免造成不必要的困扰。同时,XML作为数据交换的载体,与Ajax配合,共同推动了Web应用程序的...

    ajax技术总结,主要是基础方面的知识

    **Ajax技术总结** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术的核心是JavaScript...

    ajax工作总结

    以下是对“ajax工作总结”这一主题的详细解释和相关知识点: 1. **异步通信**: Ajax的核心是浏览器内置的XMLHttpRequest对象,它提供了与服务器进行异步数据交换的能力。这意味着在用户与网页交互时,后台可以默默...

    Ajax+jquery知识点总结

    总结,Ajax和jQuery在Web开发中起到了关键作用,它们极大地提高了网页的动态性和交互性。学习和掌握这些技术,对于任何Web开发者来说都是必要的。通过使用jQuery,我们可以更高效、更优雅地实现Ajax功能,提高开发...

    Ajax刷新 java Ajax 页面刷新

    下面将详细探讨Ajax在Java中的应用以及页面刷新的相关知识点。 一、Ajax的基本原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与服务器进行通信。通过创建XMLHttpRequest对象,发送HTTP...

    AJAx知识大全 超强悍的

    **AJAx知识大全** 在网页开发中,AJAX(Asynchronous JavaScript and XML)是一种核心技术,它允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验,因为用户不再需要...

    深入浅出Ajax(Head Rush Ajax) 源码 书中代码

    **Ajax 概述** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新...通过阅读和研究这些源码,不仅可以深化理论知识,还能提高实际编程能力,为成为精通Ajax的开发者打下坚实基础。

    Ajax 解析XML+json总结

    下面我们将深入探讨Ajax解析XML和JSON的相关知识点。 **一、Ajax基本原理** 1. **异步通信**:Ajax的核心是XMLHttpRequest对象,它允许浏览器向服务器发送异步请求,获取服务器响应,而无需重新加载整个页面。 2. *...

    jquery+ajax例子

    总结起来,"jQuery+Ajax例子"是一个展示如何在MyEclipse环境下使用jQuery进行Ajax请求的实践项目。它涵盖了jQuery的Ajax方法、与Java后端的交互以及开源精神的应用,对于理解Web开发中的异步通信具有很高的参考价值...

Global site tag (gtag.js) - Google Analytics