Ajax整理

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

附源码

　　ajaxml.jsp

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>Insert title here</title>
 8 <script>
 9 function loadXMLDoc(url)
10 {
11 var xmlhttp;
12 var txt,x,xx,i;
13 if (window.XMLHttpRequest)
14   {// code for IE7+, Firefox, Chrome, Opera, Safari
15   xmlhttp=new XMLHttpRequest();
16   }
17 else
18   {// code for IE6, IE5
19   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
20   }
21 xmlhttp.onreadystatechange=function()
22   {
23   if (xmlhttp.readyState==4 && xmlhttp.status==200)
24     {
25     txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
26     x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
27     for (i=0;i<x.length;i++)
28       {
29       txt=txt + "<tr>";
30       xx=x[i].getElementsByTagName("TITLE");
31         {
32         try
33           {
34           txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
35           }
36         catch (er)
37           {
38           txt=txt + "<td>&nbsp;</td>";
39           }
40         }
41       xx=x[i].getElementsByTagName("ARTIST");
42         {
43         try
44           {
45           txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
46           }
47         catch (er)
48           {
49           txt=txt + "<td>&nbsp;</td>";
50           }
51         }
52       txt=txt + "</tr>";
53       }
54     txt=txt + "</table>";
55     document.getElementById('txtCDInfo').innerHTML=txt;
56     }
57   }
58 xmlhttp.open("GET",url,true);
59 xmlhttp.send();
60 }
61 </script>
62 </head>
63 <body>
64 <div id="txtCDInfo">
65 <button onclick="loadXMLDoc('cd.xml')">Get CD info</button>
66 </div>
67 </body>
68 </html>

View Code

Servlet

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

    }

}

View Code

引用博客

http://blog.163.com/xiaopengyan_109/blog/static/14983217320108165441831/

http://blog.sina.com.cn/s/blog_5b6cb9500100z7y8.html