AJAX的简介和使用

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

如何使用ajax：

1.创建一个XMLlHttpRequest 对象：

      var xmlhttp;
              function loadXMLDoc()
              {               
                if (window.XMLHttpRequest)
                  {// code for IE7+,Firefox,Chrome,Opera,Safari
                  xmlhttp = new XMLHttpRequest();
                  }
                else
                  {// code for IE6,IE5
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }

xmlHttp.open("method",url,async);

xmlHttp.send();

解释：method请求类型：POST或GET（GET简单快捷适合发送少量数据，POST比GET稳定可靠可发送大量数据无数据量的限制）；

url：文件在服务器上的位置；

async：传输方式true（异步客户端和服务器之间发送数据互不影响）或false（同步）。

3.服务器响应：使用ResponseText（获取字符串类型的响应数据）或ResponseXML（获取XML类型的响应数据）属性

4.执行响应任务：

xmlHttpRequest对象的三个重要属性：

DOM操作将请求的数据放到相应的html文件内容的相应位置：

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

完整原生代码：

          var xmlhttp;
          var date=new Date();
              function loadXMLDoc(url,cmp)
              {               
                if (window.XMLHttpRequest)
                  {// code for IE7+,IE5
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                xmlhttp.onreadystatechange=cmp;
                xmlhttp.open("get",true);
                xmlhttp.send();
              }   
                function Myfunction(){
                  loadXMLDoc("list.txt?t="+date.toLocaleTimeString(),function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    }
                  }); 
                  }                  

jQuery 下的ajax应用：

1.load()方法：

load（url，[data]，[callback]）

data（可选）object 发送至服务器的key/value数据

callback（可选）Function 请求完成时的回调函数，无论请求是否成功

传递方式：

// 无参数传递，则是GET方式
$("#reset").load("test.php",funtion(){
    //......
})；

//有参数传递，则是POST方式
$("#reset").load("test.php",{user:"wang",age:"10"},function (){
//.....
});

$("#reset").load("test.php",funtion(responseText,textStatus,XMLHttpRequest){
//  responseText : 请求返回的内容
//  textStatus : 请求返回的状态（success、error、notmodified、timeout四种）
// XMLHttpRequest对象
})；

2.$.get()方法：(下面的例子是JSON文件）

$(function(){
   $("#div1").click(function(){
    $.get("get1.php",{
      username:$("#username").val(),content:$(".content").val()
     },function(data,textStatus){
      var username = data.username;
      var content = data.content;
      var txtHtml = "<div class='comment'><h6>"+username
                    +"</h6><p class='para'>"+content+"</p></div>";
      $("#resText").html(txtHtml);
    },"json");
  })
   });
  

3.$.post()方法：

用法格式和类型基本上和get方法类似。

有三点区别：

（1）get请求会将参数跟在url后进行传递，而post请求则作为http消息的实体内容发送给web服务器；

（2）get请求有数据量的限制（不大于2KB），post请求可以发送大量数据（理论上不受限制）；

（3）get传输不太安全，请求的数据会被浏览器缓存下来（cookie），会从历史记录中读取（重要的user、passwd），而post相对安全可避免此类问题。

4.$.getScript()

$(function(){
  $("#send").click（function（）{
       $.getScript("test.js");
}）;
});

$(function(){
  $("#send").click（function（）{
       $.getJSON("test.json");
}）;
});

$.ajax()方法是jQuery最底层的ajax实现，用它可以代替上面的所有的jQurey方法。

$(function(){
  $("#send").click(function(){
     $.ajax({
          tyoe:"GET",url:"test.js";
          datatype:"script" 
    });
  });
});

初次学习，不足之处还望各位博友指正！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!