JQuery_Ajax全解析

使用ajax发起异步请求（javascript）                                                       

发起ajax请求分为以下四个步骤：

1.        创建XMLHttpRequest对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建XMLHttpRequest 对象的语法：

     var xmlHttp = new XMLHttpRequest();

       老版本的 Internet Explorer（IE5和 IE6）使用 ActiveX对象：

     variable=newActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest对象。

如果支持，则创建 XMLHttpRequest对象。如果不支持，则创建 ActiveXObject

//定义一个全局变量var xmlHttp = null;//创建XMLHttpRequest对象function getXmlHttp(){if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else {xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');}return xmlHttp;}}

2.打开连接

打开连接通过调用XMLHttpRequest对象的open方法，该方法需要传入三个参数

Method：请求的方法 get/post;

url:访问后台服务器的url地址

issync:是否是异步的。一般都设置为true

//打开连接var url = "http://localhost:80/项目名称/servlet";xmlHttp.open("GET", url, true);

注意：如果请求方法是post,那么在打开连接之后必须设置一个请求头：

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

3.发送请求

发送请求通过调用xmlHttp.send方法。如果请求方式是post,可以在send方法中传递请求的参数，如：xmlHttp.send(“username=itjot&password=password”)也可以直接加到url后面;

//发送请求

xmlHttp.send(“username=itjot&password=password”);

4.接受响应

如果async=true必须规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange = function() {

           if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

               document.getElementById("myDiv").innerHTML= xmlhttp.responseText;

       }

}

Ajax请求                                                                                                 

ajax([options])

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意：所有的选项都可以通过$.ajaxSetup()函数来全局设置。

回调函数：

beforeSend----------在发送之前调用，并传入一个XMLHttpRequest作为参数。

error---------在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以                      及一个异常对象（如果有话）

dataFilter------在请求成功之后调用。传入返回的数据以及”dataType”参数的值，并且必                       须返回新的数据（可能是处理过得）传递给success回调函数。

success------当请求之后调用，传入返回的数据以及包含成功代码的字符串。

complete------当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest                        对象，以及成功或错误代码的字符串

数据类型：

数据类型可以是xml、html、json、jsonp、script、text

如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。如果浏览器不支持，则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

发送数据到服务器

默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

data选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如{key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。如果我们希望发送一个XML对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变contentType选项的值，用其他合适的MIME类型来取代默认的 application/x-www-form-urlencoded 。

实例一：加载并执行一个js文件

$.ajax({  type: "GET",  url: "test.js",  dataType: "script"});

实例二：保存数据到服务器，成功显示信息        

$.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston",   success: function(msg){     alert( "Data Saved: " + msg );   }});

实例三：装入一个HTML网页最新版本

$.ajax({  url: "test.html",  cache: false,  success: function(html){    $("#results").append(html);  }});

实例四：同步加载数据，发送请求时封锁住浏览器。需要锁定用户交互操作时使用同步方式

var html = $.ajax({  url: "some.php",  async: false }).responseText;

实例五：发送XML数据至服务器，设置processData选项为false，防止自动转换数据格式。

 var xmlDocument = [create xml document]; $.ajax({   url: "page.php",   processData: false,   data: xmlDocument,   success: handleResponse });

load(url,[data],[callback])

实例一：加载文章侧边栏导航部分至一个无序列表。

HTML代码：

        <b>jQueryLinks:</b>

        <ulid="links"></ul>

jQuery代码：

       $("#links").load("/Main_Page#p-Getting-Started li");

实例二：加载feeds,html文件内容  

  $("#feeds").load("feeds.html");

实例三：同上，但是以 POST 形式发送附加参数并在成功时显示信息。

 

            $("#feeds").load("feeds.php",{limit: 25}, function(){                      alert("The last 25 entries in the feedhave been loaded");                });

get(url,[data],[callback],[type])

type(可选)：返回内容格式，xml、html、script、json、text、_default。

实例一：请求test.php网页，忽略返回值

$get("test.php");

实例二：请求test.php网页，传送2个参数，忽略返回值。

$get("test.php",{name:"john",time:"2pm"});

实例三：显示test.php返回值（HTML或XML，取决于返回值）

$get("test.php",function(data){    alert("Data Loaded:"+data);})

实例四：显示test.cgi返回值，添加一组请求参数。

$get("test.cgi",{name:"john",time:"2pm"},function(data){    alert("Data Loaded:"+data);})

getJSON(url,[data],[callback])

实例一：从FlickrJSONP API载入4张最新的关于猫的图片

HTML代码：

  <div  id="images"></div>

JQuery代码：

$getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",function(data){ $.each(data.items, function(i,item){   $("<img/>").attr("src",item.media.m).appendTo("#images");    if ( i == 3 ) return false;  });});

实例二：从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。

$.getJSON("test.js", function(json){  alert("JSON Data: " + json.users[3].name);});

实例三：从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字 段数据。

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){  alert("JSON Data: " + json.users[3].name);});

post(url,[data],[callback],[type])