ajax

 1、有些要引入jquery
  2、ajax要连上服务器方可看到效果
  3、//注释内容 and <!-- 注释内容 -->
一、ajax介绍：
  AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)。
  AJAX 是一种用于创建快速动态网页的技术。
  不用刷新页面，但可以和服务器端进行通信的方式。
  使用 Ajax 的主要方式是 XMLHttpRequest 对象
二、XMLHttpRequest 对象：
  XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  最兼容的创建方法：

  1. <script>
  2.     var xmlhttp;
  3.     if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  4.       xmlhttp=new XMLHttpRequest();
  5.     }
  6.     else{// code for IE6, IE5
  7.       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  8.     }
  9.     xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
  10.     xmlhttp.send();
  11.     xmlhttp.onreadystatechange=function(){
  12.       if(xmlhttp.readyState==4 && xmlhttp.status==200){
  13.         document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  14.       }
  15.     }
  16.   </script>
复制代码


1、open() 和 send();方法：
  open(method,url,async)//method：请求的类型；GET 或 POST, url：文件在服务器上的位置, async：true（异步）或 false（同步）
  send(string);//string：仅用于POST请求(将请求发送到服务器。)
  例：
  xmlhttp.open("GET","ajax_info.txt",true);
  xmlhttp.send();
    (1),GET 还是 POST？
      与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
      然而，在以下情况中，请使用 POST 请求：
        a.无法使用缓存文件（更新服务器上的文件或数据库）
        b.向服务器发送大量数据（POST 没有数据量限制）
        c.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
2、setRequestHeader(header,value);//header:规定头的名称，value规定头的值

三、Ajax 传输数据的 3 种方式：
  1、XML:笨重，解析困难，单 XML是通用的数据交换格式。
  2、HTML:不需要解析可以直接放到文档中，适用于仅跟新一部分区域，但传输   数据不是很方便，且html代码需要拼装完成。
  3、JSON:小巧，有面向对象的特性，而且很多第三方工具，使用最多。

四、获取服务器响应：
  使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
  responseText ：获得字符串形式的响应数据。//来自服务器的响应不是xml时使用
  xmlhttp.responseText;//返回字符串形式的响应
  responseXML  ：获得 XML 形式的响应数据。 //来自服务器的响应是xml时使用
  xmlhttp.responseXML();//得到的相当于document可以访问xml里的标签等

五、XMLHttpRequest 对象的三个重要的属性：
  1、onreadystatechange 存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
  2、readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                 0: 请求未初始化
                 1: 服务器连接已建立
                 2: 请求已接收
                 3: 请求处理中
                 4: 请求已完成，且响应已就绪
  3、status  200: "OK"
             404: 未找到页面
  4、当 readyState 等于 4 且状态为 200 时，表示响应已就绪

(***重点***)
六、使用 jquery 操作 Ajax
  1、load 方法: 可以用于 HTML 文档的元素节点，文档的元素节点，
     把结果直接加入对应的子元素，常用于操作一个html片段
    例1：核心代码
      

  1. <script>
  2.         $(function(){
  3.           $(".wrap a").click(function(){
  4.             var Jurl=this.href;
  5.             var args={"time":new Date()};
  6.             $("#shownr").load(Jurl,args);
  7.             return false;
  8.           });
  9.         });
  10.         </script>
  11.       <body>
  12.       <div class="wrap">
  13.         <a href="yuanqiao.html">yuanqiao</a>
  14.         <!-- 此处可以多写几个a 多建立些外部 .html -->
  15.       </div>
  16.       <div id="shownr">
  17.       </div>
  18.       </body>
  19.       <!-- yuanqiao.html 代码 -->
  20.       <p>my name is yuanqiao</p>
  21.       <p>我是前端程序员，励志成为NB的前端</p>
复制代码


    例2：php文件获取传过来的参数并显示
     

  1. <script>
  2.         $(function(){
  3.            $("#shownr").click(function(){
  4.             var Jurl="ajax_info.php?user=yuanqiao&lname=Ford";
  5.             $("#myDiv").load(Jurl);
  6.            });
  7.         });
  8.       </script>
  9.       </head>
  10.       <body>
  11.         <h2>AJAX</h2>
  12.         <button type="button" id="shownr">Request data</button>
  13.         <div id="myDiv"></div>
  14.       </body>
  15.       <!-- ajax_info.php -->
  16.       <p>你好,<?php echo $_GET['user'] ?>,今天过得怎么样？</p>//
  17.       <!-- $_GET['user'] php中用于获取客户端传输的user数据 -->
复制代码



  2、$.get,$.post,$.getJSON:更加灵活，去除使用load方法情况，大部分使用这3个方法
    三个参数：
      url: Ajax 请求的目标 URL
      args: 传递的参数：JSON 类型
      data: Ajax 响应后的数据，可能是XML,HTML,JSON
   

  1. $.get(url,args,function(data){
  2.     });
复制代码


    请求json数据
   

  1. $.get(url,args,function(data){
  2.     },"JSON");
复制代码


    或者
  

  1. $.getJSON(url,args,function(data){
  2.     });
复制代码


      例1：xml
      

  1. <script>
  2.           $(function(){
  3.             $(".wrap a").click(function(){
  4.               var Jurl=this.href;
  5.               var args={"time":new Date()};
  6.               $.get(Jurl,args,function(data){
  7.                 var name=$(data).find("name").text();
  8.                 var life=$(data).find("life").text();
  9.                 $("#shownr").empty().append("<p>"+name+"</p>").append("<p>"+life+"</p>");
  10.               });
  11.               return false;
  12.             });
  13.           });
  14.         </script>
  15.         <body>
  16.           <div class="wrap">
  17.             <a href="yuanqiao.xml">yuanqiao</a>
  18.             <a href="xiewendong.xml">xiewendong</a>
  19.             <a href="yangguo.xml">yanguo</a>
  20.           </div>
  21.           <div id="shownr">
  22.           </div>
  23.         </body>
  24.         <!-- yuanqiao.xml -->
  25.         <?xml version="1.0" encoding="utf-8"?>
  26.         <message>
  27.         <name>my name is yuanqiao</name>
  28.         <life>我是前端程序员，励志成为NB的前端</life>
  29.         </message>
复制代码


      例2：json
      

  1. <script>
  2.           $(function(){
  3.             $(".wrap a").click(function(){
  4.               var Jurl=this.href;
  5.               var args={"time":new Date()};
  6.               $.get(Jurl,args,function(data){
  7.                 var name=data.message.name;
  8.                 var life=data.message.life;
  9.                 $("#shownr").empty().append("<p>"+name+"</p>").append("<p>"+life+"</p>");
  10.               },"json");
  11.                 return false;
  12.             });
  13.           });
  14.         </script>
  15.         <body>
  16.           <div class="wrap">
  17.             <a href="yuanqiao.json">yuanqiao</a>
  18.             <a href="xiewendong.json">xiewendong</a>
  19.             <a href="yangguo.json">yanguo</a>
  20.           </div>
  21.           <div id="shownr">
  22.           </div>
  23.         </body>
  24.         <!-- yuanqiao.json -->
  25.         {"message":{
  26.           "name":"my name is yuanqiao",
  27.           "life":"我是前端程序员，励志成为NB的前端"}
  28.         }
复制代码


七、拓展：用户名验证
  1、案例说明，使用json模拟数据库，使用ajax读取并判断
   

  1. <script>
  2.       $(function(){
  3.         $("#userName").keyup(function(){
  4.           var $val=$(this).val();
  5.           var $val=$val.trim();
  6.           if(""!=$val){
  7.             var Jurl="message.json?"+new Date();//去除缓存
  8.             var args={"time":new Date()};
  9.             $.get(Jurl,args,function(data){
  10.               var messages=data.messages.split(',');
  11.               var Matching;
  12.               for(var i in messages){
  13.                 if(messages[i]==$val){
  14.                   $("#message").html("<font color='red'>此用户名以存在</font>");
  15.                   return Matching;
  16.                 }else{
  17.                   $("#message").html("<font color='blue'>此用户名可以使用</font>");
  18.                 }
  19.               }
  20.             },"json");
  21.           }
  22.         });
  23.       });
  24.     </script>
  25.     <body>
  26.       userName:
  27.       <input type="text" id="userName"><span id="message"></span>
  28.     </body>
  29.     <!-- message.json 代码 -->
  30.     {"messages":"aaa,bbb,ccc,ddd,fff,abd,abc,yuan,qiao,yuanqiao,hehe,he,lala,lili,dong,java,web,ajax,js,html,css"}
posted @ 2015-10-10 07:48  hxy123456  阅读(265)  评论(0)    收藏  举报