jQuery-Ajax简单介绍

jQuery-Ajax简单介绍

在前后端日渐分离的今天，如何进行前后端交互就是一个问题了，其中Ajax就是 一个很好的方法，简单来说它可以在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，也就是异步更新，本篇文章将简单介绍jQuery-Ajax。

Ajax全称是 Asynchronous JavaScript and XML，异步的JavaScript和XML。

创建XMLHttpRequest 对象用于在后台和服务器交换数据

variable=new XMLHttpRequest();
variable=new ActiveXObject("Microsoft.XMLHTTP");//老版本IE5、6使用Activex对象

向服务器发送请求的时候一般使用XMLHttpRequest对象的 open 和 send 方法

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

open（method，url，async）规定了请求类型，url以及是否异步处理请求，method表示请求类型，GET或者POST，url表示文件在服务器上的位置，该文件可以是任何类型的文件，如txt，.xml，服务器脚本文件，如 .asp和 .php，asyn为true表示异步，false表示同步。

send（string）可以将请求数据发送到服务器，string仅用于POST请求，POST请求和GET请求相比，可以更新服务器上的文件和数据库，可以向服务器发送大量数据，在发送包含位置字符的用户输入时，也比GET更加稳定可靠。

//script部分
<script>
   function loadXMLDoc() {
       var xmlhttp;
       if(window.XMLHttpRequest){
           // IE7+,firefox,chrome,Opera,safari 浏览器执行代码
           xmlhttp = new XMLHttpRequest();
       }else{
           // IE6,IE5 浏览器执行代码
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.onreadystatechange = function () {
           if(xmlhttp.readyState ==4 && xmlhttp.status==200){
               document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
           }
       }
       xmlhttp.open("GET","./try/ajax.txt",true);
       xmlhttp.send();
   } </script>
   //body部分
   <div id="myDiv"><h2>通过Ajax改变文本</h2></div>
<button type="button" onclick="loadXMLDoc()">改变内容</button>

jQuery-Ajax load()方法，可以从服务器加载数据，并把返回的数据放入被选元素中，一般用法是这样$(selector).load(URL,data,callback);，data 规定与请求一同发送的查询字符串键/值对集合，callback 参数是 load() 方法完成后所执行的函数名称，data和callback都不是必须填写的内容

//script部分
$(document).ready(function(){
        $("#btn1").click(function(){
            $("test").load("./try/test.txt");
        })
})
//body部分
<h3 id ="test"><h2>使用jQuery Ajax修改内容</h2></h3>
<button type="button" id="btn1">获得外部内容</button>

这是一个简单的修改内容的示例，load传入的参数只有URL，没有data和callback

$("button").click(function(){
        $("#div1").load("./try/test.txt",function(responceText,statusTxt,xhr){
            if(statusTxt =="success")
               alert("外部加载成功!");
            if(statusTxt=="error")
               alert("Error:"+xhr.status+": "+xhr.statusTxt);
        })
    })

这个较之前相比，传入了callback，可以在显示较直白的信息
jQuery-Ajax get()和post（），通过HTTP GET或POST请求从服务器请求数据，GET：从指定资源请求数据，POST：向指定资源提交要处理的数据

jQuery $.get()方法，一般使用方法‘$.get(URL,callback);`

 $("button").click(function(){
            $.get("test.asp",function(data,status){
                alert("Data:"+data+"\nStatus:"+status);
            });
        })

$.get()的第一个参数是我们所请求的URL，第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态

jQuery $.post()方法，一般使用‘$.post(URL,data,callback);`

$("button").click(function(){
            $.post("demo_test.asp",{
                name:"David",
                city:"beijing"
            },
            function(data,status){
                alert("Data:"+data+"\nStatus"+status);
            });
        });

jQuery 提供多个与 AJAX 有关的方法，jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中，也简化了我们直接使用Ajax。