AJAX 学习

AJAX = 异步 JavaScript 和 XML， 是一种用于创建快速***页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

ajax：一种请求数据的方式，不需要刷新整个页面；
ajax的技术核心是 XMLHttpRequest 对象；
ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；

XMLHttpRequest 是 AJAX 的基础

1、创建 XMLHttpRequest 对象

variable=new XMLHttpRequest();
为适应所有的现代浏览器，包括 IE5 和 IE6，创建对象时使用判断

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2、向服务器发送请求

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

方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型 GET 或 POSTurl：文件在服务器上的位
async： true（异步）或 false（同步）
send(string) 将请求发送到服务器。
string：仅用于 POST 请求

jQuery load() 方法

从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

示例：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$.get(URL,callback);
$.post(URL,data,callback);


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

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

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

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