学习理解ajax请求

1.ajax实例

使用js实现（get）

//步骤一:创建XMLHttpRequest对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','your url');
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　alert(xml.responseText);//处理响应结果
  　　}
}

post

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

2.使用jquery实现（jquery的ajax方法对原生做了简单的封装）

-ajax方法

$.ajax({
        url: url,
        data: param,
        type: type,
        dataType: dataType,
        timeout : 1000, //超时时间设置，单位毫秒
        async: async,
        success: function (data) {
             alert("success");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
             alert("error");
        }, 
        beforeSend: function () {
            Loading(true);//加载动画
        },
        complete: function () {
              if(status=='timeout'){//超时,status还有success,error等值的情况
 　　　　　      ajaxTimeoutTest.abort();
　　　　　       alert("超时");
　　　　       }
            Loading(false);//结束加载动画
        }
    });

$.ajax请求参数
async   布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。
cache   布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)    请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
context 为所有 AJAX 相关的回调函数规定 "this" 值。
data    规定要发送到服务器的数据。
dataFilter(data,type)   用于处理 XMLHttpRequest 原始响应数据的函数。
dataType    预期的服务器响应的数据类型。
error(xhr,status,error) 如果请求失败要运行的函数。
global  布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified  布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp   在一个 jsonp 中重写回调函数的字符串。
jsonpCallback   在一个 jsonp 中规定回调函数的名称。
password    规定在 HTTP 访问认证请求中使用的密码。
processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset   规定请求的字符集。
success(result,status,xhr)  当请求成功时运行的函数。
timeout 设置本地的请求超时时间（以毫秒计）。
traditional 布尔值，规定是否使用参数序列化的传统样式。
type    规定请求的类型（GET 或 POST）。
url 规定发送请求的 URL。默认是当前页面。
username    规定在 HTTP 访问认证请求中使用的用户名。
xhr 用于创建 XMLHttpRequest 对象的函数。

• load()—-简单但强大的 AJAX ,$(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);
  });
});

• get和post方法

  $.get("your url",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
  //////
  $.post(URL,data,callback);

2.关于XMLHttpRequest 对象

ajax的核心就是XMLHttpRequest 对象，看看他有哪些属性和方法；
属性

• readyState —-每次这个属性的值增加的时候，都会触发 onreadystatechange 事件

属性值说明
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

• responseText —-目前为止为服务器接收到的响应体（字符串类型）
• responseXML—-（响应体xml类型）
• status —-由服务器返回的 HTTP 状态代码（200，404）
• statusText—-（对应状态的说明如200时为ok）

方法
- abort()—-如果请求已经被发送,则立刻中止请求.
- getAllResponseHeaders()—-返回所有响应头信息(响应头名和值)
- getResponseHeader(DOMString header)—-返回指定的响应头的值
- open(DOMString method,DOMString url, optional boolean async,optional DOMString user,optional DOMString password)—-初始化一个请求

参数
method
请求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下个参数是非HTTP(S)的URL,则忽略该参数.
url
该请求所要访问的URL
async
一个可选的布尔值参数，默认为true,意味着是否执行异步操作，如果值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。如果为值为true，一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true,如果multipart 属性是true，否则将会出现一个意外。
user
用户名,可选参数,为授权使用;默认参数为空string.
password
密码,可选参数,为授权使用;默认参数为空string.

• overrideMimeType(DOMString mimetype)—-重写由服务器返回的MIME type。例如，强制把一个响应流当作“text/xml”来处理和解析
• send()—-发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.（所有相关的事件绑定须在调用send()方法之前进行）

重载的send方法
void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

• setRequestHeader( DOMString header,
  DOMString value)—-给指定的HTTP请求头赋值（需在open方法之后）

浏览器兼容

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");
  }

头部信息

Accept: 浏览器能够处理的内容类型
Accept-Charset: 浏览器能够显示的字符集
Accept-Encoding: 浏览器能够处理的压缩编码
Accept-Language: 浏览器当前设置的语言
Connection: 浏览器与服务器之间连接的类型
Cookie: 当前页面设置的任何Cookie
Host: 发出请求的页面所在的域
User-Agent: 浏览器的用户代理字符串
Referer: 发出请求的页面的URI