ajax应用-y

1.ajax的demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
        <script type="text/javascript">
            function ajaxFunction(){
                /**
                 *1.声明XMLHttpRequest对象的变量xmlHttp,并根据特定浏览器赋值
                 *使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。
                 *假如失败,则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"),
                 *假如也不成功,则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
                 *假如这三种方法都不起作用,那么这个用户所使用的浏览器已经太过时了,他或她会看到一个声明此浏览器不支持 AJAX 的提示。
                 */
                var xmlHttp;
                try{
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp=new XMLHttpRequest();
                }catch(e){
                    // Internet Explorer
                    try{
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                    }catch(e){
                        try{
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){
                            alert("您的浏览器不支持AJAX!");
                        return false;
                        }
                    }
                }
                
                //2.设置xmlHttp的请求方式为GET,设置请求的URL,设置为异步提交
                //PS:
                //2.1 flag:1获取当前时间,2,获取20年后的时间
                //2.2 Math.random():结果为0-1间的一个随机数(包括0,不包括1) 
                //2.3 加随机数的原因是,不让发送的请求都是同一个URL,否则话浏览器的缓存会起作用,造成你后台的servlet实际上是没有被调用的,页面直接返回的是缓存的内容
                xmlHttp.open("GET","  + Math.random(),true);

                //3.设置xmlHttp的回调函数
                xmlHttp.onreadystatechange=function(){ 
                    if(xmlHttp.readyState== 4){//4-请求已完成(可以访问服务器响应并使用它)
                        if(xmlHttp.status == 200){
                            if(xmlHttp.responseText != ""){
                                document.myForm.time.value=xmlHttp.responseText;//给name为time的input标签
                                //  document.getElementById("spanUserId").innerHTML 
                                //= "<font color='red'>" + xmlHttp.responseText + "</font>";
                            }
                        }else{
                        alert("请求失败,状态码:"+xmlHttp.status);
                        }
                    }
                }
                
                //4.将设置信息发送到Ajax引擎   
                xmlHttp.send(null);
            }
        </script>
        <form name="myForm">
            <!-- onkeyup 事件会在键盘按键被松开时发生 -->
            用户: <input type="text" name="username" onkeyup="ajaxFunction();"/><br>
            时间: <input type="text" name="time" />
        </form>
    </body>
</html>

2.ajax的使用:

ajax知识点汇总,摘自:http://www.webjx.com/special/20090215/9625.html 
1.Ajax定义:
   AJAX 指异步JavaScript 及 XML(Asynchronous JavaScript And XML)。
   AJAX 基于JavaScript和HTTP请求(HTTP requests)。
   AJAX 是一种在 2005 年由 Google 推广开来的编程模式。
   AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。 
   PS:个人理解:异步javascript、xml、http请求
 
 
2.Ajax原理:
  通过AJAX,使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。
  通过XMLHttpRequest对象,您的 JavaScript可在不重载页面的情况与Web服务器交换数据。
  AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
   
   
3.Ajax产生背景:
   3.1 传统的JavaScript编程:假如您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个HTML表单向服务器GET或POST数据。而用户则需要单击“提交”按钮来发送/获取信息,
   等待服务器的响应,然后一张新的页面会加载结果。由于每当用户提交输入后服务器都会返回一张新的页面,传统的 web 应用程序变得运行缓慢,且越来越不友好。
   3.2 AJAX编程:JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象,直接与服务器来通信。
   通过使用HTTP请求,web页可向服务器进行请求,并得到来自服务器的响应,而不加载页面。用户可以停留在同一个页面, 他或她不会注意到脚本在后台请求过页面,或向服务器发送过数据。
   
   
4.XMLHttpRequest对象的三个重要的属性。
    4.1 onreadystatechange 属性
         onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:
         xmlHttp.onreadystatechange=function(){
          // 我们需要在这里写一些代码
         }
    4.2 readyState 属性
         readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,
         onreadystatechange 函数就会被执行。这是 readyState 属性可能的值:
         状态    描述
         0      请求未初始化(在调用 open() 之前)
         1      请求已提出(调用 send() 之前)
         2      请求已发送(这里通常可以从响应得到内容头部)
         3      请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
         4      请求已完成(可以访问服务器响应并使用它)
         我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):
         xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4){
               // 从服务器的response获得数据
            }
          }
    4.3 responseText 属性
    可以通过 responseText 属性来取回由服务器返回的数据。在我们的代码中,我们将把时间文本框的值设置为等于 responseText:
         xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4){
                 document.myForm.time.value
                      =xmlHttp.responseText;
              }
          }  
     
 
5.AJAX-向服务器发送一个请求
    要想把请求发送到服务器,我们就需要使用open()方法和 send() 方法。
    5.1 open()
        xmlHttp.open("GET","time.asp",true);
        第一个参数定义发送请求所使用的方法(GET还是 POST)。
        第二个参数规定服务器端脚本的URL。
        第三个参数规定应当对请求进行异步地处理(true-异步)。
    5.2 send() 
        send()方法可将请求送往服务器。如:xmlHttp.send(null); 
 
 
6.ajax请求的具体步骤(详情见ajaxDemo.html):
    6.1 声明XMLHttpRequest对象
        声明为变量xmlHttp,并根据特定浏览器赋值
    6.2 用xmlHttp调用open()方法
        设置xmlHttp的请求方式为GET,设置请求的URL,设置为异步提交
    6.3 设置xmlHttp的回调函数
    6.4 用xmlHttp调用send()方法






你可能感兴趣的:(ajax应用-y)