原生Ajax与jQuery中的ajax操作

一.基本实现

1.创建XMLHttpRequest对象

现代浏览器基本都內建了xmlhttpRequest对象，若要兼容低版本浏览器（IE5，IE6等）,则需要对其做兼容处理

 var xmlHttp = null;
function ajaxFunction(the_request_url) {
    try{
       //chrome，Firefox，Safari，opera
      xmlHttp = new XMLHttpRequest();
    }catch (e) {
        try{
            //IE6以上版本
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e) {
            try{
            //IE6以下版本
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e) {
               //否则提示用户浏览器不支持ajax操作
               alert("您的浏览器不支持ajax");
               return false;
            }
       }
   }

2.创建状态监听处理

    function readyStateChangeHandle() {
        if(xmlHttp.readyState == 4) {    //响应完成
            if(xmlHttp.status == 200) {   //请求成功
               //   document.getElementById('vv').innerHTML =                          xmlHttp.responseText;
            }
        }
    }

ajax响应状态码：（具体参考AJAX请求时status返回状态明细表http://hibeary.iteye.com/blog/697997）

• 0 :（未初始化）还没有调用send()方法 .
  此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行初始化作好准备。值为0表示对象已经存在，否则浏览器会报错（对象不存在）
• 1 :（载入）已调用send()方法，正在发送请求.
  此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
• 2 :（载入完成）send()方法执行完成，已经接收到全部响应内容
  此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备
• 3 :（交互）正在解析响应内容
  此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
• 4 :（完成）响应内容解析完成，可以在客户端调用了
  此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

3.发送请求，建立连接

if(xmlHttp) {
            xmlHttp.open('GET',the_request_url,true);
            xmlHttp.onreadystatechange =readyStateChangeHandle;    //监听状态
            xmlHttp.send(null);
        }

第一个参数为请求的方式，常用请求方式为get和post；
第二个参数为请求的url，类型有txt,html,xml等；
第三个参数为是否异步请求，默认为true；

get请求与post请求传参的差别

• get请求
  如果需要给url传参，则直接在其后面附加参数即可；
  例如：’/test/?name=lily&age=18’
  get请求方式时，send()方法的参数可以为空或者传一个null;
• post请求
  post请求方式时，需要设置请求头信息：
  xmlhttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
  post传参时，要把参数写在send()中。
  例如：xmlhttp.send(‘name=lily&age=18’);

二.3种数据交互方式

(1).txt格式
xmlhttp.open(“GET”,”test.html”,true);
(2).xml格式

function xml(url) {
   ......
  var xmlItem=xmlDOM.getElementsByTagName("note");
      document.getElementById('msg').innerHTML = xmlItem[0].firstChild.data;
      }
      <div id="msg"></div>
 <button onclick="test('ajax_data.xml')">btn</button>

(3).json格式
使用eval(string)将json解析成对象

var txt = "{'userid': '17','name': 'lily'}";
var txtObj = eval( "(" + txtObj + ")" );

然后便可以以对象的方式对数据进行访问：
txtObj.userid ; //17

三.JQuery中的Ajax方法

+ $.ajax() 方法是属于最底层的方法，
+ 第二层是  .load(),  $.get() ,$.post()方法，
+ 第三层是 getScript() 和 getJSON() 方法。

（1）. 可以使用.load()方法加载一个页面，或者加载页面中的一部分

$("#aid").load("test.html");     //#aid 为要加载html页面的容器
$("#aid").load("test.html #bid");

(2).$get()方法

$.get(url[,data][,callback]);

$("#btn").click(function() {   
  $.get("test.html",function(data) {
     $("#id").html(data);   //将test.html页面的内容作为data传到#id元素中
});
});

(3).jQuery.ajax()函数

$.ajax(url[,options])
$.ajax(options) 此时url是options的第一个参数

$.ajax({
    type: "GET",
    url: url,
    data: data,
    dataType: "script",
    success: callback
})

type：HTTP请求的类型，默认是“GET”，可以设定其他请求类型
url：获取数据的url。对get请求，data选项会添加到该url后面。
data：添加到url中（GET请求）或者在请求内体中（POST请求）发送的数据。可以是字符串或者是对象。
dataType：指定响应数据的预期类型，以及jQuery处理该数据的方式。也可以是：“text”、“html”、“script”、“json”、“jsonp”和“xml”。
contentType：指定请求的HTTP Content-Type头，即data数据的编码格式。默认是“application/x-www-form-urlencoded”
success：指定Ajax请求成功完成时的回调函数。第一个参数是服务器发送的数据；第二个参数是jQuery的状态吗；第三个参数是用来发送其扭曲的描述。
success(function(data) {…});
回调函数也可是error、complete、beforeSend、context、