Ajax 引见一 _Ajax

Ajax 介绍一

1.Ajax技术

? 全称Asynchronous(异步) JavaScript And XML

? 异步的JavaScript和XML

2.Ajax技术的作用，有什么好处

? 用于客户端和服务器交互的一项技术.

?主要用于局部刷新.提升用户体验度.?

----原有交互技术主要基于提交表单，点超链接方式----

这种方式主要有以下一些弊端：

? a.请求发出后，如果响应速度慢，客户需要等待.而且是茫然的等待.

? b.请求响应回来需要刷新整个页面，如果页面中有需要频繁更新的数据，会造成页面的频繁刷新.

? ? 采用Ajax技术可以解决以上问题,提升用户体验度.

3.Ajax技术原理

? Ajax技术是若干技术的综合运用。主要涵盖JavaScript,XMLHttpRequest,XML,css,Html

? Ajax技术使用时，需要编写客户端脚本和服务器端处理程序.

? 原理：

? ? ?a.首先客户端利用JavaScript创建一个XMLHTTPRequest对象

? ? ?b.利用XMLHTTPRequest对象，创建和发生应该请求

? ? ?c.请求到达服务器，调用Servlet组件处理，处理完毕后,返回响应数据，数据可以采用字符串或XML格式返回.

? ? ?d.XMLHTTPRequest接收到服务器返回的数据，调用客户端的回调函数，将更新到页面.

4.XMLHttpRequest对象的使用

? 该对象是由浏览器提供的,在IE中该对象以ActiveXObject组件形式存在，

? 在其他浏览器中以XMLHttpRequest形式存在.

?XMLHttpRequest对象主要的函数和属性如下：

? 1)open(param1，param2,[param3])函数:创建一个请求.

? ? param1:用于指定请求类型,可以是GET，POST

? ? param2:用于指定请求url地址

? ? param3:用于指定请求发出方式，true异步，false表示同步。默认异步。

? 2)send(param1)函数，发送请求

? ? 把open的请求发送出去.

? ? param1:用于指定发送时提交的数据.如果是GET请求,param1指定为null

? ? ?如果是POST请求需要指定为"key=value"

? 3)onreadystatechange事件

? ? 用于指定注册的回调函数.指定函数名不需要()

? ? 该事件在readyState属性发生改变的时候触发.

? 4)readyState属性

? ? 该属性有0，1，2，3，4五种状态?????

? ? 0:请求未初始化

? ? 1:请求已初始化

? ? 2:请求已发送

? ? 3:请求正在处理中

? ? 4:请求处理完毕.

? 5)status属性

? ? ?用于获取请求处理的状态码.例如：500,404等.

? ? ?404：找不到处理资源

? ? ?500：找到处理资源，执行错误

? ? ?200：处理成功

? 6)responseText属性

? ? 用于获取服务器处理返回的字符串信息.

? ? 需要在readyState==4&&status==200执行，才可以获取正常数据.

? 7)responseXML属性(过时)

? ? 用于获取服务器返回的XML结果对象.

5.Ajax程序编写步骤

? 示例1:焦点移开，检查用户名非空和唯一性.

? ? ? ?1)为用户名输入框添加onblur事件处理

? ? ? ?2)在事件处理中,创建XMLHttpRequest对象

? ? ? ? ?创建请求，发送请求.

? ? ? ?3)编写服务器处理组件Servlet，返回字符串信息

? ? ? ?4)编写回调函数,为创建XMLHttpRequest对象注册.

JSP页面：

<html>
     <head >
           <title> Ajax01</ title>
           <script type= "text/javascript">
     //创建XMLHttpRequest对象
     function getXmlHttpRequest() {
           var xhr = null ;
           if (window.XMLHttpRequest) {//firefox,safari
              xhr = new XMLHttpRequest();
          } else {//ie
              xhr = new ActiveXObject("Microsoft.XMLHTTP" );
          }
           return xhr;
     }
     var xhr = null;
     //焦点离开时触发用户名检查
     function checkForm() {
           //检查用户名
           var name = document.getElementById("username" ).value;
           if (name == "" ) {//检查用户名非空
               var nameSpan = document.getElementById("usernamespan" );
              nameSpan.innerHTML = "用户名不能为空!" ;
               return false ;
          } else {//检查用户名唯一性
              xhr = getXmlHttpRequest();
               //基于xhr发送请求
               var url = "checkusername.do?username=" + name;
               //注册一个回调函数,用于处理响应数据
              xhr.onreadystatechange = execData;
              xhr.open( "get", url);//创建一个请求
              xhr.send( null);//发送请求
          }
           return true ;
     }
     //ajax请求处理的回调函数
     function execData() {
           if (xhr.readyState == 4) {
               //将响应回来的数据,显示到namespan中
               var usernamespan = document.getElementById("usernamespan" );
               if (xhr.status == 200) {

                   usernamespan.innerHTML = xhr.responseText;
              } else {
                   usernamespan.innerHTML = "检测异常，请重试！" ;
              }
          } else {
               var usernamespan = document.getElementById("usernamespan" );
              usernamespan.innerHTML = "正在检测..." ;
          }
     }
</script>
     </head >
     <body >
           <form action= "register.do" method ="post">
               username:
               <input type= "text" onblur ="checkForm()" name="username" id="username">
               <span id= "usernamespan"></span >
               <br>
              password:
               <input type= "password" name ="password" id="password" >
               <span id= "passwordspan"></span >
               <br>
              Email:
               <input type= "text" name ="email">
               <br>
               <input type= "submit" value ="submit">
           </form>
     </body >
</html>

??Servlet:

public class CheckUsernameServlet extends HttpServlet
{
     public void service(HttpServletRequest request, HttpServletResponse response)
               throws ServletException, IOException
     {
           // 检查用户名唯一性，如果为通过检查，需要回到注册页面，进行提示
          request.setCharacterEncoding( "utf8");
          response.setContentType( "text/plain;charset=utf8");
          String username = request.getParameter("username" );
          PrintWriter out = response.getWriter();

           if ("tom" .equals(username)) {
              out.print( "此用户名被占用" );
              out.flush();

               return;
          } else {
              out.print( "此用户名可用" );
              out.flush();
               return;
          }
     }
}

?示例2：下拉单选项发生改变，提取数据库中的产品信息显示

? ? ?1)编写ComputerServlet,并进行测试?????

? ? ?2)编写onchange事件处理

? ? ?3)在事件处理中，创建XMLHttpRequest对象，创建请求，发送请求.

JSP页面：

<html>
     <head >
           <title> My JSP 'demo02.jsp' starting page </title>
           <script type= "text/javascript">
     function getXMLHttpRequest() {
           var xhr = null ;
           if (window.XMLHttpRequest) {
              xhr = new XMLHttpRequest();
              alert( "XMLHttpRequest");
          } else {
              xhr = new ActiveXObject("Microsoft.XMLHTTP" );
              alert( "Microsoft.XMLHTTP");
          }
           return xhr;
     }
     //当select选项发生改变时触发
     function viewComputer() {
           var xhr = getXMLHttpRequest();
          alert(xhr);
           var id = document.getElementById("computer" ).value;
           var url = "computer.doo?id=" + id;
           //注册回调函数
          xhr.onreadystatechange = function() {
               var span = document.getElementById("span" );
               if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                         var price = xhr.responseText;

                        span.innerHTML = price;
                   } else {
                        span.innerHTML = "";
                   }
              } else {
                   span.innerHTML = "正在提取数据..." ;
              }
           }
          xhr.open( "get", url);
           //发送请求
          xhr.send( null);
     }
</script>
     </head >

     <body >
           <h1>
              产品查看
           </h1>
           <hr />
           <select id= "computer" onchange ="viewComputer()">
               <option value= "1">
                   X200
               </option>
               <option value= "2">
                   X500
               </option>
               <option value= "3">
                   X600
               </option>
           </select>
           <hr />
           <span id= "span"></span >
     </body >
</html>

?Servlet:

public class SearchComputer extends HttpServlet
{
     public void service(HttpServletRequest request, HttpServletResponse response)
               throws ServletException, IOException
     {
          request.setCharacterEncoding( "utf-8");
          response.setContentType( "text/plain;charset=utf-8");
          PrintWriter out = response.getWriter();
           int id = Integer.parseInt(request.getParameter( "id"));
          System. out.println("获取id：：：" + id);
           try {
              Thread. sleep(500);
          } catch (InterruptedException e) {
              e.printStackTrace();
          }
           if (id == 1) {
              out.print( "1000");
          }
           if (id == 2) {
              out.print( "3000");
          }
           if (id == 3) {
              out.print( "6000");
          }
     }
}