AJAX = 异步 和 （ 的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
优点：局部刷新,减少等待时间，节省很多的带宽
核心对象：XMLHttpRequest

步骤一：使用ajax发送get请求及处理响应

1：servlet配置如下：

package 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 RegisterServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name=request.getParameter("uname"); if(name.equals("admin")) { response.getWriter().write("OK"); } else { response.getWriter().write("NO"); } } }

2：重头戏，配置index.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>     My JSP 'index.jsp' starting page

步骤二：使用ajax发送post请求

servlet不变：在index.jsp中添加

window.οnlοad=function()    {        var dom=document.getElementById("txtName");        dom.οnblur=function()        {            myajax();        };    };    function myajax()    {        var xhr;        if(window.XMLHttpRequest)            {              xhr=new XMLHttpRequest();            }        else            {              xhr=new ActionXObject("Microsoft.XMLHttp");            }        var dom=document.getElementById("txtName");        var myspan=document.getElementById("msg");        var myvalue=dom.value;        xhr.open("post", "<%=path%>/servlet/RegisterServlet?uname="+myvalue,true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") xhr.onreadystatechange=function() { if(xhr.readyState==4&&xhr.status==200) { var data=xhr.responseText; if(data=='OK') { myspan.innerText="用户名已经被注册"; } else { myspan.innerText="用户名可用"; } } }; xhr.send(data); }

使用GET和POST方式提交的区别

get：指定XMLHttpRequest对象的open()中的method参数为“get”

       指定XMLHttpRequest对象的send方法中的data参数为null

post：1.指定XMLHttpRequest对象的open()方法中method参数为post

         2.指定XMLHttpRequest对象要请求的HTTP头信息，该HTTP请求头为固定写法

        指定XMLHttpRequest对象的send方法中的data需要传递具体的数据！

步骤三：使用jquery实现ajax

servlet不变，index.jsp代码如下：

//给文本框注册一个失去焦点事件      $(function(){         //等待页面上所有标签完毕后执行         var dom=$("#txtName");         dom.blur(function(){            myjquery();         });      });                  function  myjquery(){      var dom=$("#txtName");        $.ajax({          url:'<%=path%>/servlet/CheckUserServlet', type:'post', data:{uname:dom.val()}, success:function(today){ //today server 打到 浏览器的数据 alert(today); } }); }

比javascript方式简单多了，，，，

步骤四：初识json

JSON（即json）简介：

　　JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成（）。

JSON语法规则：

       JSON 语法是 JavaScript 对象表示语法的子集。

  1. 数据在名称/值对中

  2. 数据由逗号分隔

  3. 花括号保存对象

  4. 方括号保存数组

  5. json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。

    1. 对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。

    2. 数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。

           经过对象、数组2种结构就可以组合成复杂的数据结构了。

//var json={"firstName":"yym","secondName":"myy","thirdName":"ymy"};               /*$.each(json,function(i,dom){        alert(dom);     });*/          /*var json=     {    "people":[        {"firstName":"孙悟空","lastName":"大闹天宫","email":"aaaa"},        {"firstName":"美猴王","lastName":"花果山山大王","email":"bbbb"},        {"firstName":"大圣","lastName":"天上各位尊神尊称他","email":"cccc"},          {"firstName":"弼马温","lastName":"人生第一份工作","email":"DDDD"}    ]   };      $.each(json.people,function(i,dom){        alert(dom.firstName+"\n"+dom.lastName);   });*/    var json={    "programmers": [{        "firstName": "Brett",        "lastName": "McLaughlin",        "email": "aaaa"    }, {        "firstName": "Jason",        "lastName": "Hunter",        "email": "bbbb"    }, {        "firstName": "Elliotte",        "lastName": "Harold",        "email": "cccc"    }],    "authors": [{        "firstName": "Isaac",        "lastName": "Asimov",        "genre": "sciencefiction"    }, {        "firstName": "Tad",        "lastName": "Williams",        "genre": "fantasy"    }, {        "firstName": "Frank",        "lastName": "Peretti",        "genre": "christianfiction"    }],    "musicians": [{        "firstName": "Eric",        "lastName": "Clapton",        "instrument": "guitar"    }, {        "firstName": "Sergei",        "lastName": "Rachmaninoff",        "instrument": "piano"    }]};     $.each(json.programmers,function(i,dom){        alert(dom.firstName+"\n"+dom.lastName);   });

注意：在此换行一直是“/n”,我一直忘记了哈哈！