Ajax入门学习总结
来源:互联网 发布:东华理工学院行知分院 编辑:程序博客网 时间:2024/05/06 15:51
一、AJAX简介
AJAX的全称是异步的JavaScript和XML;主要用途是对于整个页面进行局部更新;
AJAX出现的目的是因为一般网页如果稍作改动,就会重新生成整个页面代码,消耗大。而AJAX能够只更新局部页面;
AJAX是在JavaScript代码中编写的;
二、XMLHttpRequest
XMLHttpRequest是整个AJAX的核心,我们通过XMLHttpRequest进行发送和接受数据;
为了取得此对象,我们需要通过以下代码:
- <script language="Javascript">
- var xmlHttp;
- function create(){
- if(window.XMLHttpRequest){
- xmlHttp = new XMLHttpRequest();
- }
- else{
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- </script>
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的拼写;
- 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");
- }
- }
- }
异步验证注册的优点:
(1)能够在没有提交前就知道用户名是否有效,现在使用的很多。
- AJAX入门学习总结
- AJAX入门学习总结 .
- Ajax入门学习总结
- AJAX入门学习总结
- AJAX学习总结(入门)
- [学习笔记]AJAX入门学习总结
- Ajax 入门总结
- 入门AJAX总结
- Ajax 入门例子总结
- (AJAX学习一) AJAX入门
- ajax入门学习
- ajax入门学习
- AJAX入门学习
- ajax 入门学习文章
- Ajax 入门 【学习手记】
- Ajax入门学习
- AJAX => 入门学习
- AJAX入门学习笔记
- Ajax初体验
- Dede URL优化拼音命名
- Spring
- 计算机科学中最重要的32个算法
- 字典树的两种实现
- Ajax入门学习总结
- 跨平台大行其道 CocoaChina 2012年9月开发者大会落幕
- C#常用控件整理
- winform程序打包(带卸载)
- javascript学习总结
- Windows的图形设备接口(GDI)入门 上篇
- Spring MVC
- Musical Theme POJ 1743
- jsp学习小结