zoukankan      html  css  js  c++  java
  • AJAX

    原生AJAX--XMLHttpRequest对象

    http://www.w3cfuns.com/forum.php?mod=viewthread&tid=1955&extra=page%3D1%26filter%3Dtypeid%26typeid%3D177%26typeid%3D177 w3cfun

    JS跨域:http://www.cnblogs.com/2050/p/3191744.html

    1、创建对象 

    1 var xmlhttp;
    2 if (window.XMLHttpRequest)
    3   {// code for IE7+, Firefox, Chrome, Opera, Safari
    4   xmlhttp=new XMLHttpRequest();
    5   }
    6 else
    7   {// code for IE6, IE5
    8   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    9   }

    2、向服务器发送请求

    使用XMLHTTPRequest对象的open()和send()方法。

    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

    然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    例子:

    open()得第三个参数用于设置是否为异步,true为异步。如果为false,则达不到异步效果。

    xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); //添加?后面的随机数是为了避免得到缓存结果
    xmlhttp.send();

    3、服务器响应

    使用XMLHttpRequest对象的responseText(字符串类型的响应)或responseXML(XML类型的响应)属性。

    xmlDoc=xmlhttp.responseXML;

    4、readyState事件

    每当 readyState 改变时,就会触发 onreadystatechange 事件。

    readyState 属性存有 XMLHttpRequest 的状态信息。

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }

    onreadystatechange:存储函数, 当readyState属性改变时,会调用该函数

    readyState:

    0:请求未初始化

    1:服务器连接已建立

    2:请求已处理

    3:请求处理中

    4、请求已完成,且响应已就绪

    status:

    200: "OK"

    404: 未找到页面

    5、例子--根据输入框的输入显示提示

    <html>
    <head>
    <script type="text/javascript">
    
    var xmlHttp=null;
    
    function showHint(str)
    {
    if (str.length==0)
      { 
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    try
      {// Firefox, Opera 8.0+, Safari, IE7
      xmlHttp=new XMLHttpRequest();
      }
    catch(e)
      {// Old IE
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch(e)
        {
        alert ("Your browser does not support XMLHTTP!");
        return;  
        }
      }
    var url="/ajax/gethint.asp?q=" + str;
    url=url+"&sid="+Math.random();
    xmlHttp.open("GET",url,false);
    xmlHttp.send(null);
    document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
    }
    </script> 
    </head>
    <body><form> 
    First Name:
    <input type="text" id="txt1"
    onkeyup="showHint(this.value)">
    </form><p>Suggestions: <span id="txtHint"></span></p> </body>
    </html>

    JQuery--AJAX

    1、$.ajax()

    可以DIY一堆参数,是最全的一个ajax.可以不带参数直接使用。返回的是XMLHttpRequest对象。

     例子:

    $(document).ready(function(){
      $("#b01").click(function(){
      htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
      $("#myDiv").html(htmlobj.responseText);
      });
    });

    2、$.post()

    $.ajax({
      type: 'POST',
      url: url,
      data: data,  //规定连同请求发送到服务器的数据
      success: success(data, textStatus, jqXHR), //用于定义callback function
      dataType: dataType //默认执行智能判断(xml、json、script 或 html)
    });

    例子:

    $.post("test.php", { name: "John", time: "2pm" },
       function(data){
         alert("Data Loaded: " + data);
       });
  • 相关阅读:
    云计算设计模式(十九)——运行重构模式
    云计算设计模式(十八)——重试模式
    云计算设计模式(十七)——基于队列的负载均衡模式
    云计算设计模式(十六)——优先级队列模式
    云计算设计模式(十五)——管道和过滤器模式
    云计算设计模式(十四)——实体化视图模式
    云计算设计模式(十三)——领导人选举模式
    云计算设计模式(十二)——索引表模式
    使用WebClient上传文件时的一些问题
    .NET研发人员面试题(一)
  • 原文地址:https://www.cnblogs.com/hemi/p/4018152.html
Copyright © 2011-2022 走看看