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实现无刷新效果。
相关推荐
ajax知识点总结
Ajax由html、javascript技术、dhtml和DOM组成这个方法可以将web界面转化成交互性的ajax应用程序
学习ajax基础知识,让自己的前端技术更上一层,学会与后台交互
对Ajax技术的简要总结,关键对象,属性,方法的功能描述,供你查询。
史上最全面的Ajax知识点归纳总结
根据个人学习Ajax的过程总结,整理了Ajax相关基础知识点,对Ajax的使用有较详细的介绍,通过个别举例,可以快速了解Ajax的功能,比较适合初学者入门。
AJAX和HTML5的简介,主要是一些基础知识方面的
使用Ajax和Web Service 重构网上书店的基础知识总结
个人总结的一些ajax资料和jquery资料,对于初学者有很大的帮助
ajax总结知识,大家一起共赏吧,很不错的,希望能给你帮助!
本羽阐述了Ajax开发技术的方方面面:不仅全面介绍了Ajax的基础知识,更有对令人高山仰止的架构和模式的深刻探讨,也有潺潺流水般细致的实例展示,而且还涵盖了专业Ajax开发必不可少的可用性、安全和性能等主题。...
本书是目前Ajax领域最为全面深入的一本著作,其中不仅有对于基础知识的介绍,还有对于Ajax开发中重大的体系架构问题的深入探讨,总结了大量Ajax开发中的设计模式,并讨论了框架、安全性与性能等等。书中提供了几个...
本书是目前Ajax领域最为全面深入的一本著作,其中不仅有对于基础知识的介绍,还有对于Ajax开发中重大的体系架构问题的深入探讨,总结了大量Ajax开发中的设计模式,并讨论了框架、安全性与性能等等。书中提供了几个...
web前端知识汇总,html、css、js、jq、ajax、vue等知识的综合知识点
该专题包含以下内容: 1. 专题思路. 2. 体验AJAX 3. 知识架构 4. 实例说明 5. 专题总结
Java学习更是如此,知识点总结目录如下: 目录 一、 Java概述 3 二、 Java语法基础 5 数据类型 5 运算符号 14 语句 15 函数 15 方法重载(Overloadjing)与重写(Overriding) 16 数组 17 总结 18 三、 常见关键字 ...
对ajax和json的知识点记性一个总结,并使其按照一定的架构,构建成一个思维导图,便于之后对于知识点的理解和记忆,同时这样的一个架构也可以适用自己的知识总结。 Ajax是一种在无需重新加载整个网页的情况下,能够...
有关ajax的知识点很全面 在jquery的ajax函数中,可以传入3种类型的数据 1.文本:"uname=alice&mobileIpt=110&birthday=1983-05-12" 2.json对象:{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'} 3.json数组: ...
开发工具与关键技术:Visual Studio 2015 与 JavaScript JavaScript异步Ajax与json总结相关知识点
总结不易,知识全面,愿以此帮助更多对Ajax迷茫的人!