AJAX

什么是AJAX

• AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

• AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

• AJAX 是一种用于创建快速动态网页的技术。

• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
  这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

• 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

核心API

XMLHttpRequest

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

AJAX请求

XMLHttpRequest 对象用于和服务器交换数据。

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

• get请求

  xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates");
  

• post请求

  xmlhttp.open("POST","ajax_test.asp",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Bill&lname=Gates");
  

AJAX响应内容

xmlhttp.responseText;

AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

• onreadystatechange

  存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
  

• readyState

  存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
  

• status

  200: "OK"
  404: 未找到页面
  
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    } 
  

AJAX访问步骤

• 第一步:根据浏览器类型创建XMLHttpRequest

  var xmlhttp;
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  

• 第二步：设置请求方式和请求参数以及路径

  xmlhttp.open("get",
          "${pageContext.request.contextPath}/servlet/AjaxServlet1");
  

• 第三步：编写回调函数

  xmlhttp.onreadystatechange = function() {
      alert(xmlhttp.readyState);
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          alert(xmlhttp.responseText);
      }
  };
  

• 第四步：发送请求

  xmlhttp.send();
  

案例–通过AJAX验证用户名是否存在

• 创建regist.jsp表单

  用户名
  密码

• 定义用户名的onblue事件

  function checkName(username) {
  
  var s_username = document.getElementById("s_username");
  
  var sub = document.getElementById("sub");
  //第一步 定义核心对象
  var xmlhttp;
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
  } else {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  //第二步：定义请求
  xmlhttp.open("post",
          "${pageContext.request.contextPath}/servlet/CheckNameServlet");
  xmlhttp.setRequestHeader("Content-type",
          "application/x-www-form-urlencoded");
  //第三步：定义接口回调
  xmlhttp.onreadystatechange = function() {
  
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          //获取响应结果
          var response = xmlhttp.responseText;
          if (response == 0) {
              s_username.innerHTML = "用户名已存在";
              sub.disabled = true;
          } else if (response == 1) {
              s_username.innerHTML = "该用户名可用";
              sub.disabled = false;
          }
  
      }
  };
  xmlhttp.send("username=" + username);
  
  }
  

• Servlet中验证数据库用户是否存在

  request.setCharacterEncoding("utf-8");
      String username = request.getParameter("username");
      UserDao userDao = new UserDao();
      //查询数据库
      User user = userDao.findUser(username);
      if (user != null) {
          //响应数据0
          response.getWriter().write("0");
      } else {
          //响应数据1
          response.getWriter().write("1");
      }
  

  ssh框架相关jar包和api,json,jquery,ajax