网站开发之AJAX篇

目录
    1. 简介
    2. 使用  
        2.1 原生使用
        2.2 JQuery AJAX

1.简介

AJAX（Asynchronous JavaScript and XML） 
    异步JavaScript和XML
    局部更新网页，无需重新加载整个网页
    jQuery解决了AJAX不同浏览器兼容问题

2.使用

2.1 原生使用

var xmlhttp;
if (window.XMLHttpRequest){ 
    // 大多数浏览器 code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // 旧版本IE code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest 对象
    AJAX 的基础
    所有现代浏览器均支持

onreadystatechange

/* readyState状态改变后就会调用
readyState
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
*/
xmlhttp.onreadystatechange=function(){
/*
收到响应后的处理方法：
状态文本
    xmlhttp.statusText
请求成功是否状态值(200，404)
    xmlhttp.status  
所有响应头
    xmlhttp.getAllResponseHeaders()
指定的响应头
    xmlhttp.getResponseHeader('Last-Modified')
状态值
    xmlhttp.readyState 见上
*/
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
      // 以字符串形式获取
      xmlhttp.responseText;
      // 以xml形式获取
      xmlhttp.responseXML;      
    }else if(xmlhttp.status==404){  // 路径错误
    }
}

GET

简单也更快

// 设置（请求方式，请求路径，是否异步：绝大多数情况下：true）,并发送请求
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST

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

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

2.2 JQuery AJAX

$(document).ready(function(){
  $("#b01").click(function(){

  异步请求
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);

  开始请求时调用
  $("#txt").ajaxStart(function(){
  });
  请求完成后调用
  $("#txt").ajaxComplete(function(){
  });
  请求出错时调用
  $("div").ajaxError(function(){
  });
  开始请求前调用  
  $("div").ajaxSend(function(e,xhr,opt){
    $(this).html("Requesting " + opt.url);
  });
  AJAX 请求成功后调用
  $("div").ajaxSuccess(function(){
  });
  $("div").ajaxStop(function(){
  });
  请求开始时调用
  $("div").ajaxStart(function(){
  });

  $.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){$("div").html(result);}});
  $.ajax();

  请求并加载js脚本
  $.getScript("demo_ajax_script.js");

  请求json
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });

  以数组形式序列化表单值
  x=$("form").serializeArray();
  $.each(x, function(i, field){
    $("#results").append(field.name + ":" + field.value + " ");
  });

  以字符串序列化表单值
  $("form").serialize()

  以字符串序列化参数（&）
  var params = { width:1900, height:1200 };
  var str = jQuery.param(params);
  });
});

load

    url，获取的数据，获取数据后的回调
    $(selector).load(URL,data,callback);

例：
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){    // 结果内容，状态，XMLHttpRequest对象
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
    });

get

请求数据
$.get(URL,callback);

例：
    $.get("demo_test.asp",function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
    });


post
上传/请求数据
$.post(URL,data,callback);

例：（地址，参数，获得结果后）
    $.post("demo_test_post.asp",{
        name:"Donald Duck",
        city:"Duckburg"
      },function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });

避免和其他三方库冲突

var cx = $.noConflict();
cx(document).ready(function(){
  cx("button").click(function(){
    cx("p").text("hello");
  });
});