原生Ajax和jQuery Ajax实例。

首先，介绍下Ajax

 Ajax：在不刷新整个网页的情况下，更新部分网页的数据。

  

   原生Ajax：

      第一步，创建xmlHttpRequest对象，每个浏览器的创建都是不同的。

   

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

     第二步：这是open()方法和setRequestHeader()。第三步：发送执行。利用send方法，与服务器真正的交互执行。第四步：获得执行结果。首先判断执行是否完成，然后通过js操作dom元素，将返回的responseText返回到页面。

xmlhttp.onreadystatechange=function(){
      if( 
     //  判断是否发送成功，是否找到请求页面等。
        xmlhttp.readyState == 4 && xmlhttp.status == 200){
    // 操作页面元素
        document.getElementById("div1").innerHTML=xmlhttp.responseText;
      }
  open("GET","text.txt","ture");
  send();


      }
 function aa(){
   alert("aaa");
 }     

Html：

 <button type="button" οnclick="createXMLHttpRequest(text.txt)">请求数据</button>
 <div id="div1"></div>
 <button type="button" οnclick="aa()">点击事件</button>

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

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

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

• 0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
• 1: 服务器连接已建立（open方法已经被调用）
• 2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
• 3: 请求处理中（下载中，responseText 属性已经包含部分数据）
• 4: 请求已完成，且响应已就绪（下载操作已完成）

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

jQuery Ajax：

jQuery 是个轻量级的JS框架，能够帮助我们快速的开发JS应用。

 实例分为三种：调用本地文件，调用后台文件，调用html文件

  第一种：调用本地文件。

     $(funtion(){
        //点击事件
        $("#btn").click(funtion(){
            //取得Ajax返回结果
            obj= $.ajax({
                url:"/test.txt",
                async:false      

            //显示Ajax返回结果

          $("#btn").html(obj.responseText); 
            })

 })

 })

  <div id="myDiv">通过Ajax改变文本</div>
  <button id="btn" type="button">Ajax改变内容</button>

第二种：调用后台文件。

    $(funtion(){
        //点击事件
        $("#btn").click(function(){
            var html =$.ajax({
                var html = $.ajax({
                    type:'POST',
                    utl:"test.php",
                    data:"name=hom&age=21",
                    async:false
                }).responseText;
                $("#myDiv").html('<h2>'+html+'</h2>');
            })
        })

 <div id="myDiv">通过Ajax改变文本</div>
  <button id="btn" type="button">Ajax改变内容</button>

<?php
    $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';
    echo $msg;

?>

第三种：调用html文件。

    $(function(){
        //按钮单击时执行
        $("#btn").click(function(){
              
              //Ajax调用处理
            $.ajax({
               type: "POST",
               url: "test.php",
               data: "name=hom&age=21",
               success: function(data){
                        $("#myDiv").html('<h2>'+data+'</h2>');
                  }
            });
            
         });
    });

 <div id="myDiv">通过Ajax改变文本</div>
  <button id="btn" type="button">Ajax改变内容</button>