• AJAX入门学习总结



    一、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>
    浏览器有两种内核,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");
    		}
    	} 
    }


    异步验证注册的优点:

    (1)能够在没有提交前就知道用户名是否有效,现在使用的很多。





    作者:xiazdong
    出处:http://blog.xiazdong.info
    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
  • 相关阅读:
    [对对子队]会议记录4.10(Scrum Meeting 1)
    [对对子队]团队任务拆解Alpha
    [对对子队]功能规格说明书
    [对对子队]技术规格说明书
    团队项目选择
    团队作业第四次—项目系统设计与数据库设计
    团队作业第三次—项目需求分析
    团队作业第二次——团队Github实战训练
    团队作业第一次—团队展示和项目展示
    贡献分分配规则
  • 原文地址:https://www.cnblogs.com/xiazdong/p/3058114.html
Copyright © 2020-2023  润新知