您的位置：首页 > 其它

Ajax入门学习总结

2012-09-06 10:43 246 查看

一、AJAX简介

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

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

AJAX是在JavaScript代码中编写的；

二、XMLHttpRequest

XMLHttpRequest是整个AJAX的核心，我们通过XMLHttpRequest进行发送和接受数据；

为了取得此对象，我们需要通过以下代码：

[html] view
plaincopy

<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] view
plaincopy

<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

[java] view
plaincopy

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)能够在没有提交前就知道用户名是否有效，现在使用的很多。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航