AJAX = 异步 JavaScript和 XML（ 标准通用标记语言的子集）。
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+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript"> //给文本框注册一个失去焦点事件  window.onload=function(){ var dom=document.getElementById("txtName"); dom.onblur=function(){ myajax(); }; }; function myajax(){ //01.定制出 xhr对象 var xhr; //02.能力检测 if(window.XMLHttpRequest){ //非IE浏览器  xhr=new XMLHttpRequest(); }else{ //IE内核  xhr=new ActiveXObject("Microsoft.XMLHttp"); } var dom=document.getElementById("txtName"); var myspan=document.getElementById("msg"); var myval=dom.value; //03.构建请求地址 //xhr.open("请求类型","请求地址","是否异步");  xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true); //04.设置回调函数 响应回来的数据  xhr.onreadystatechange=function(){ //什么 if(xhr.readyState==4&&xhr.status==200){ //获取响应数据 var data=xhr.responseText; if(data=='OK'){ myspan.innerText="用户名已经被注册"; }else{ myspan.innerText="用户名可以注册"; } } }; //05.用send真正的发送请求  xhr.send(null); } </script> </head> <body> <input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/> <input type="password" name="txtPwd"/> </body> </html>
复制代码

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

servlet不变：在index.jsp中添加

复制代码 
   window.onload=function()
    {
        var dom=document.getElementById("txtName");
        dom.onblur=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”,我一直忘记了哈哈！