频道导航

AJAX入门学习总结

2020-05-19 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了AJAX入门学习总结，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、AJAX简介

@H_404_5@

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

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

AJAX是在JavaScript代码中编写的；

二、XMLHttpRequest

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

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

[html] view plain copy print ?

<script language="Javascript">
var xmlHttp;
function create(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>

<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;

知识回顾：

@H_404_5@

在JavaScript中

(1)document.getElementById("name").innerHTML可以设定此控件的值；

(2)onblur事件表示失去焦点时调用；

登录异步验证代码：

@H_404_5@

这里使用DAO进行连接数据库，因此这段代码忽略；

[html] view plain copy print ?

<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>

<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 plain copy print ?

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");
}
}
}

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