Ajax的XMLHttpRequest学习

---恢复内容开始---

我们现在来做这样一个功能:

 当我们在用户名中输入姓名后，我们一点别的地方，它就会自动到数据库中去检查这个用户名是否存在。

 如果说存在的话，在后面用红色的字标出来"该用户名已存在！"

 如果说不存在，在后面也用绿色的字标出来"该用户名可用！" 这样一个功能

但是大家要注意一点：即便是我们做了这个功能，在提交的时候，在我们往数据库中插入一条记录的时候，我们还是需要检查这条记录是否存在(因为可能存在两个客户同时对这个数据库进行操作，而且输入的用户名相同，并发型操作；解决方法：在往数据库中插入一条记录时，检查用户名是否存在，检查用户名的操作和存储要在同一个transaction中，否则还是可能出现并发)

XMLHttpRequest Properties

readyState：这个对象有5种状态

       1)  0 = uninitialized：说明我这个open方法还没被调用

       2)  1 = loading: 指的是open方法被调用了，send方法还没有被调用

       3)  2 = loaded:  指的是我send方法掉用了，我把请求发出去了，服务器端给了我反馈了，我只得到了反馈的头信息

       4)  3 = interactive:我真在和服务器端进行交互之中

       5)  4 = completed:和服务器交互完成

Basic method:

 1.open(method,url,boolean) ：open的意思：是我准备打开，准备去访问url指定的页面了。真正什么时候去访问，调用send()方法，这个请求会被发出去

      1.method can be "GET" ,"POST" ,"PUT" ,"DELETE"

      2.URL must be an HTTP URL(start with "http://")

      3.boolean:是一个boolean的值，代表是(true)异步的，还是(false)同步的

 2.send():当调用send的时候，这个请求会被发送出去

调用方式：

 

主要的javascript代码：

 

<script type="text/javascript">
   var req;
   function validate(){
    
    var idField = document.getElementById("userid");//拿到id=userid的input
    var url = "Validate.jsp?id=" + escape(idField.value);//我们要发起一个请求,这个请求会发到服务器的某一个页面(validate.jsp)，然后由通过页面(validate.jsp)来对这个请求进行验证
    if(window.XMLHttpRequest){//NetScape的创建XMLHttpRequest对象的方法，IE7以后也是这样创建的
       req = new XMLHttpRequest();//XMLHttpRequest这个对象，它可以发起一个请求，这个请求不用刷新页面就能够发送到服务器上
       }
      req.open("GET",url,true);//意思是：请你使用get的方法打开url指定的网页，使用get方式，true表示使用异步的方式打开url指定的网页，如果设为false（同步）就没意义了，所以说一定是true
      req.onreadystatechange = callback;//当readyState对象的状态改变的时候，调用callback方法
      req.send(null);//我们向validate.jsp页面发送了一个请求，服务器端有没有给我反馈呀？反馈内容对不对呀？那么这时候怎么办呢？
      //onreadystatechange是指readyState这个对象的状态
   }
   function callback(){
        alert(req.readyState);
        if(req.readyState ==4){
           alert(req.status);//当没有找到Validate.jsp这个页面时会报404错误，请求没找到相应的页面
             if(req.status == 200){//如果等于200，表示请求找到相应的页面validate.jsp
             
             }
          }
   }
  
  </script>

 

 Validate.jsp 可以在这里面连接数据库，并对数据库进行操作

<%
response.setContentType("text/xml"); //反馈给客户端的文本格式为XML格式的
response.setHeader("Cache-Control","no-store");//HTTP1.1 ,支持HTTP1.1协议的，不让其缓存接下来的3句话是阻止缓存，不予许我们的浏览器对我们的页面进行缓存，写Ajax的引用的时候必须阻止我们客户端的缓存，不然代码缓存在哪里，会出各种各样的错误
response.setHeader("Pragma","no-cache");//HTTP1.0 支持HTTP1.0协议的
response.setDateHeader("Expires",0);//prevents catching at proxy server 阻止缓存，不让我们的代理服务器缓存
response.getWriter().write("<msg>invalid</msg>");

%>