码迷,mamicode.com
首页 > Web开发 > 详细

Ajax技术详解

时间:2015-12-09 19:40:11      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载。Ajax的核心是JS的XMLHttpRequest构造函数,它定义了用脚本操纵HTTP的API。
 
XMLHttpRequest构造函数:每new一个XMLHttpRequest构造函数返回的对象都表示一个独立的请求/响应对,并且这个对象的属性和方法允许指定请求细节和提取响应数据。需要注意的是当你重用已存在的XMLHttpRequest,这将会终止之前通过该对象挂起的任何请求。
 
案例:创建一个HTTP API
    //该构造函数返回的对象API能够操作HTTP请
    var xhr = new XMLHttpRequest();
 
 
HTTP API的open()方法:创建了HTTP API后的下一步就是调用open()方法。这个方法有三个参数,参数一指定HTTP请求的方法,GET、POST、DELETE、HEAD、OPTIONS和PUT都能用。参数二指定了请求的URL,但URL不能是跨域的URL。参数三指定了这个请求是否异步进行,true表示异步,false表示同步。
 
案例:open()方法的调用
    var xhr = new XMLHttpRequest();
    var URL = "lookup.php?name=csh&sex=男&ie=utf-8";
    xhr.open(‘GET‘, URL, true);
 
 
onreadystatechange事件:调用了open()方法后的下一步就是监听onreadystatechange事件,这个事件主要用于监听请求返回时的状态码(status属性)和返回数据的情况(readyState属性)。当status和readyState属性符合需求的时候调用回调函数。
 
readyState属性:readyState属性的值是一个整数,它指定了HTTP请求的状态。
0表示open()尚未调用
1表示open()已调用
2表示接收到头信息
3表示接收到响应主体
4表示响应完成
理论上,每次readyState属性改变都会触发readystatechange事件,但实际中当readyState改变为0或1时可能没有触发这个事件。当readyState值改变为4或服务器的响应完成时,所有的浏览器都触发readystatechange事件。
 
status属性:readyState属性的值是一个整数,它指定了HTTP的状态码。
常见的HTTP状态码:
HTTP: Status 200 – 服务器成功返回网页
HTTP: Status 404 – 请求的网页不存在
HTTP: Status 503 – 服务不可用
案例:监听onreadystatechange事件
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
     //2xx状态与表示从缓存中直接取出的304可以看是成功的,IE(非原生的XHR对象)中会将204设置为1223,opera会在取得204时设置为0
     if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){
          options.callBack(converter[dataType].call(this, xhr.responseText, xhr.responseXML));
     }
};
 
 
HTTP API的send()方法:这是HTTP请求的最后一步,调用这个方法把请求发送到服务器。send()有一个可选参数,GET请求的时候为null,POST请求的时候为传给后台的数据
案例:调用send()方法
    var xhr = new XMLHttpRequest();
    xhr.send(null);
 
 
HTTP API的setRequestHeader()方法:该方法用于设置HTTP头信息。而在POST请求时就必须要设置HTTP头信息的Content-Type属性,用于告诉服务器发送给它的数据的MIME类型。如果调用setRequestHeader()多次,新值不会取代之前旧的值,相反,HTTP请求将包含这个头的多个副本或这个头将指定多个值。
 
编码请求主体:HTTP POST请求包括一个请求主体,它包含客户端传递给服务器的数据,请求主体除了是简单的文本字符串之外,还可能是复杂的数据。在Ajax应用中,一般情况下发送到服务器的很可能是一个JS对象(即把数据存放到一个对象里面,直接把这个对象发送给服务器,也就是说这个对象就是请求主体)。
案例:使用JSON编码主体来发起HTTP POST请求
function postJSON(url, data, callback){
     var request = new XMLHttpRequest();
     request.open(‘POST‘, url); //对指定URL发送POST请求
     request.onreadystatechange = function (){};
     request.setRequestHeader("Content-Type", "application/json");
     request.send(JSON.stringify(data));//data对象要转换为json类型
};
 
 
案例:发送一个GET请求
/**
* GET请求
* @param options  【该参数是一个object】
* {url: ‘http://www.plateno.com/index.html, data: {name: ‘luke‘}, callBack: function(data){}}
*/
function get(options){
     var xhr = new XMLHttpRequest(),
          async = options.async || true;
     try{
          //判断是否传参数
          var data = ‘‘, n = 0, a = ‘‘;
          if (options.data){
               data = ‘?‘;
               for (var name in options.data){
                    n == 0 ? a = ‘‘ : a = ‘&‘;
                    n++;
                    data += a + name +‘=‘+ encodeURI(options.data[name])
               }
          }

          //判断是否缓存
          var cache = ‘&‘ + new Data().getTime();
          if (!options.cache){cache = ‘‘;}
 
          xhr.open(‘get‘, options.url + data + cache, async); //设置请求数据

          xhr.send(); //发送请求

          //监听请求过程
          xhr.onreadystatechange = function (){
               //2xx状态与表示从缓存中直接取出的304可以看是成功的,IE(非原生的XHR对象)中会将204设置为1223,opera会在取得204时设置为0
               if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){
                    options.callBack.call(this, xhr.responseText, xhr.responseXML);
               }
          }
     }catch(e){throw new Error(‘GET请求失败‘);}
}
 
 
案例:发送一个POST请求
/**
* POST请求
* @param options  【该参数是一个object】
* {url: ‘http://www.plateno.com/index.html‘, data:{name: ‘luke‘}, callBack: function(data){}}
*/
function post(options) {
     var xhr = new XMLHttpRequest(),
          async = options.async || true;
     try{
          //判断是否传参数
          var data = ‘‘, n = 0, a = ‘‘;
          if (options.data){
               for (var name in options.data){
                    n == 0 ? a = ‘‘ : a = ‘&‘;
                    n++;
                    data += a + name +‘=‘+ options.data[name]
               }
          }

          xhr.open(‘post‘, options.url, async); //设置请求数据
         
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //设置请求头

          xhr.send(data); //发送请求

          //监听请求过程
          xhr.onreadystatechange = function (){
               //2xx状态与表示从缓存中直接取出的304可以看是成功的,IE(非原生的XHR对象)中会将204设置为1223,opera会在取得204时设置为0
               if (xhr.readyState == 4 && ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0)){
                    options.callBack(converter[dataType].call(this, xhr.responseText, xhr.responseXML));
               }
          }
     }catch(e){throw new Error(‘POST请求失败‘);}
}

Ajax技术详解

标签:

原文地址:http://www.cnblogs.com/zhuifeng/p/5033631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!