[学习笔记]AJAX入门学习总结
来源:互联网 发布:pdg2pic mac 编辑:程序博客网 时间:2024/05/21 10:27
一、AJAX简介
AJAX的全称是异步的JavaScript和XML;主要用途是对于整个页面进行局部更新;
AJAX出现的目的是因为一般网页如果稍作改动,就会重新生成整个页面代码,消耗大。而AJAX能够只更新局部页面;
AJAX是在JavaScript代码中编写的;
二、XMLHttpRequest
XMLHttpRequest是整个AJAX的核心,我们通过XMLHttpRequest进行发送和接受数据;
为了取得此对象,我们需要通过以下代码:
[html] view plain copy
- <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] view plain copy
- <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的拼写;
[java] view plain copy
- 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)能够在没有提交前就知道用户名是否有效,现在使用的很多。
0 0
- [学习笔记]AJAX入门学习总结
- AJAX入门学习总结
- AJAX入门学习总结 .
- Ajax入门学习总结
- AJAX入门学习总结
- AJAX入门学习笔记
- Ajax学习笔记-入门笔记
- AJAX学习总结(入门)
- js+ajax学习笔记总结
- ajax学习笔记-Dom入门1
- [知了堂学习笔记] Ajax入门
- Ajax学习笔记总结(未完待续)
- ajax,json学习笔记(五)总结
- (AJAX学习一) AJAX入门
- ajax入门学习
- ajax入门学习
- AJAX入门学习
- ajax 入门学习文章
- cocos2dx的数据保存之UserDault
- [学习笔记]JSTL使用总结(1)
- PHPH中的超全局数组
- 魔板拼图
- BaseAdapter 的优化
- [学习笔记]AJAX入门学习总结
- Web研发模式演变
- Struts2 入门学习笔记(五)——上传下载
- ZJU oj 2969 Easy Task(水题)
- EF异常:“System.InvalidOperationException”类型的未经处理的异常在 mscorlib.dll 中发生
- nyoj 20 吝啬的国度<vector容器>
- MySQL免安装版完整配置
- 同时修改多个文件后缀名
- 关于href="javascript:void 0;"