异步JavaScript和XML（Ajax）干货整理
什么是Ajax
AJAX全称为“Asynchronous JavaScript and XML"(异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，AJAX提供与服务器异步通讯的能力，从而使用户从请求/响应的循环中解脱出来。
ajax的优势
1.通过异步模式，提升了用户体验。
2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
3.AJAX引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了服务器负载。
ajax的局限性
1.不能实时请求和响应服务器数据。
2.不支持浏览器回退功能。
3.不能提交多媒体数据，比如图片，文件等。
工作流程
1.客户端产生js的事件
2.创建XMLHttpRequest对象
3.对XMLHttpRequest进行配置
4.通过AJAX引擎发送异步请求
5.服务器端接收请求并且处理请求，返回html或者xml内容
6.XML调用一个callback()处理响应回来的内容
7.页面局部刷新
实现步骤
1.声明verify()函数和xmlhttp全局变量
2.创建XML对象
3.注册回调对象
xmlhttp.onreadystatechange = callback;
4.设置服务器连接信息
xmlhttp.open("GET","verifyUser.action?name="+encodeURI(username),true);
5.发送数据
6.接收响应数据即callback函数
附源码输入代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd.xml')">Get CD info</button>
</div>
</body>
</html>package com.hp.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class VerifyServlet extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse resbonse) throws ServletException, IOException {
doGet(request, resbonse);
}
protected void doGet(HttpServletRequest request,
HttpServletResponse resbonse) throws ServletException, IOException {
try {
request.setCharacterEncoding("utf-8");
resbonse.setContentType("text/html; charset=utf-8");
PrintWriter out = resbonse.getWriter();
String old = request.getParameter("name");
if (old == null old.length() == 0) {
out.println("用户名不能为空！");
} else {
String name = old;
if (name.equals("zhangsan")) {
out.println("用户名[" + name + "]已经存在！");
} else {
out.println("用户名[" + name + "]尚未存在，可以使用！");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}引用博客
http://blog.163.com/xiaopengyan_109/blog/static/14983217320108165441831/
http://blog.sina.com.cn/s/blog_5b6cb9500100z7y8.html点击查看更多内容
15人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦