ajax【Done】

最新推荐文章于 2023-12-28 09:38:28 发布

chijianlu5190

最新推荐文章于 2023-12-28 09:38:28 发布

阅读量440

点赞数

文章标签： json javascript java ViewUI

原文链接：https://my.oschina.net/niuxiaojun/blog/607565

版权

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实际上是没有被调用的，页面直接返回的是缓存的内容
                var url = ...;
                xmlHttp.open("GET", url + 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()方法

转载于:https://my.oschina.net/niuxiaojun/blog/607565