AJAX与XMLHttpRequest

XMLHttpRequest:

　 中文能够解释为可扩展超文本传输请求。Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象能够在不向服务器提交整个页面的状况下，实现局部更新网页。当页面所有加载完毕后，客户端经过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。XMLHttpRequest 对象提供了对 HTTP 协议的彻底的访问，包括作出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 能够同步或异步返回 Web 服务器的响应，而且能以文本或者一个 DOM 文档形式返回内容。　　　

• 在不从新加载页面的状况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

   if(window.XMLHttpRequest){//能够用undefined做为判断条件,但不能用error做为判断条件;变量不定义,加window至关于undefinded;
        var oAjax = new XMLHttpRequest();   //用于非ie6
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHttp');//用于ie6;Microsoft公司的插件
    }

属性	说明
readyState	表示XMLHttpRequest对象的状态：
onreadystatechange	请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。
responseText	服务器响应的文本内容
responseXML	服务器响应的XML内容对应的DOM对象
Status	服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。
statusText	服务器返回状态的文本信息。

 

方法	说明
Open(string method,string url,boolean asynch, String username,string password)	指定和服务器端交互的HTTP方法，URL地址，即其余请求信息； Method:表示http请求方法，通常使用"GET","POST". url：表示请求的服务器的地址； asynch：表示是否采用异步方法，true为异步，false为同步； 后边两个能够不指定，username和password分别表示用户名和密码，提供http认证机制须要的用户名和密码。
Send(content)	向服务器发出请求，若是采用异步方式，该方法会当即返回。 content能够指定为null表示不发送数据，其内容能够是DOM对象，输入流或字符串。
SetRequestHeader(String header,String Value)	设置HTTP请求中的指定头部header的值为value. 此方法需在open方法之后调用，通常在post方式中使用。
getAllResponseHeaders()	返回包含Http的全部响应头信息，其中相应头包括Content-length,date,uri等内容。 返回值是一个字符串，包含全部头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！
getResponseHeader(String header)	返回HTTP响应头中指定的键名header对应的值
Abort()	中止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

 

readyState(网络状态码):

　　0 － （未初始化）open()方法已经调用，尚未调用send()方法；
　　1 － （发送请求）已调用send()方法，正在发送请求；
　　2 － （接收完成）send()方法执行完成，已经接收到所有响应内容 ；
　　3 － （解析数据）正在解析响应内容 ；
　　4 － （解析数据完成）响应内容解析完成，能够在客户端调用了；

status(http状态码):

　　　　HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码;

　　　　

分类	分类描述
1**	信息，服务器收到请求，须要请求者继续执行操做
2**	成功，操做被成功接收并处理
3**	重定向，须要进一步的操做以完成请求
4**	客户端错误，请求包含语法错误或没法完成请求
5**	服务器错误，服务器在处理请求的过程当中发生了错误

 

　　　　

状态码	状态码英文名称	中文描述
100	Continue	继续。客户端应继续其请求
101	Switching Protocols	切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200	OK	请求成功。通常用于GET与POST请求
201	Created	已建立。成功请求并建立了新的资源
202	Accepted	已接受。已经接受请求，但未处理完成
203	Non-Authoritative Information	非受权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204	No Content	无内容。服务器成功处理，但未返回内容。在未更新网页的状况下，可确保浏览器继续显示当前文档
205	Reset Content	重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可经过此返回码清除浏览器的表单域
206	Partial Content	部份内容。服务器成功处理了部分GET请求
300	Multiple Choices	多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。从此任何新的请求都应使用新的URI代替
302	Found	临时移动。与301相似。但资源只是临时被移动。客户端应继续使用原有URI
303	See Other	查看其它地址。与301相似。使用GET和POST请求查看
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端一般会缓存访问过的资源，经过提供一个头信息指出客户端但愿只返回在指定日期以后修改的资源
305	Use Proxy	使用代理。所请求的资源必须经过代理访问
306	Unused	已经被废弃的HTTP状态码
307	Temporary Redirect	临时重定向。与302相似。使用GET请求重定向
400	Bad Request	客户端请求的语法错误，服务器没法理解
401	Unauthorized	请求要求用户的身份认证
402	Payment Required	保留，未来使用
403	Forbidden	服务器理解请求客户端的请求，可是拒绝执行此请求
404	Not Found	服务器没法根据客户端的请求找到资源（网页）。经过此代码，网站设计人员可设置"您所请求的资源没法找到"的个性页面
405	Method Not Allowed	客户端请求中的方法被禁止
406	Not Acceptable	服务器没法根据客户端请求的内容特性完成请求
407	Proxy Authentication Required	请求要求代理的身份认证，与401相似，但请求者应当使用代理进行受权
408	Request Time-out	服务器等待客户端发送的请求时间过长，超时
409	Conflict	服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突
410	Gone	客户端请求的资源已经不存在。410不一样于404，若是资源之前有如今被永久删除了可以使用410代码，网站设计人员可经过301代码指定资源的新位置
411	Length Required	服务器没法处理客户端发送的不带Content-Length的请求信息
412	Precondition Failed	客户端请求信息的先决条件错误
413	Request Entity Too Large	因为请求的实体过大，服务器没法处理，所以拒绝请求。为防止客户端的连续请求，服务器可能会关闭链接。若是只是服务器暂时没法处理，则会包含一个Retry-After的响应信息
414	Request-URI Too Large	请求的URI过长（URI一般为网址），服务器没法处理
415	Unsupported Media Type	服务器没法处理请求附带的媒体格式
416	Requested range not satisfiable	客户端请求的范围无效
417	Expectation Failed	服务器没法知足Expect的请求头信息
500	Internal Server Error	服务器内部错误，没法完成请求
501	Not Implemented	服务器不支持请求的功能，没法完成请求
502	Bad Gateway	充当网关或代理的服务器，从远端服务器接收到了一个无效的请求
503	Service Unavailable	因为超载或系统维护，服务器暂时的没法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504	Gateway Time-out	充当网关或代理的服务器，未及时从远端服务器获取请求
505	HTTP Version not supported	服务器不支持请求的HTTP协议的版本，没法完成处理

 

 

AJAX:

 　　AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。

　　 经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

ajax特色：
    1.缓存
        浏览器访问同一个地址 会产生缓存
        时间戳  +Math.random()

    2.从服务器返回的数据都是string
        eval 解析json的时候 必须加括号
        拿到数据 先检验一下合法性再解析数据    

    3.编码格式要统一
        先后台统一
        国际通用编码    utf-8    
        中国大陆    gb2312

    4. 与后缀名无关
        后缀名只是给人看的

 

function json2str(json){    //将json转str
    json.t=Math.random();
    var arr=[];
    for(var name in json){
        arr.push(name+'='+encodeURIComponent(json[name]));  //encodeURIComponent兼容汉字
    }
    return arr.join('&');
}

//json:url,data,type,success,error   data是url？后面的东西,type是获取方式
function ajax(json){  
    json=json||{}; //判断json是否存在,存在则为json
    if(!json.url) return;//json.url为空则中止
    json.data=json.data||{};//判断json.data是否存在,存在则为json.data
    json.type=json.type||'GET';//获取方式默认为GET
    json.timeout=json.timeout||10000;//超时处理
    
    //1.建立一个ajax对象
    if(window.XMLHttpRequest){//能够用undefined做为判断条件,但不能用error做为判断条件;变量不定义,加window至关于undefinded;
        var oAjax = new XMLHttpRequest();   //用于非ie6
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHttp');//用于ie6;Microsoft公司的插件
    }
    switch(json.type.toLowerCase()){
        case 'get':
                        //2.创建链接  是否异步
                    oAjax.open('GET',json.url+'?'+json2str(json.data),true);
                    //3.发送
                    oAjax.send();
                    break;
        case 'post':
                    oAjax.open('POST',json.url,true);
                    oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded')
                    oAjax.send(json2str(json.data));
                    break;
    }
        json.loading&&json.loading();  //加载事件
        
    //若是超过指定时间没有请求到数据
    var timer=setTimeout(function(){
            json.complete&&json.complete();//完成事件,跟成功失败无关
            json.error&&json.error(oAjax.status);
            oAjax.onreadystatechange=null;
    },json.timeout);
    //4.接收
    oAjax.onreadystatechange = function(){
             //网络状态readyState
        if(oAjax.readyState == 4){   //接收完成   0,初始化1,创建链接2.发送3.接收4.完成
            //http的状态status
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status == 304){   //接收成功  200-300接收成功 304未修改 404未找到
                //从服务器返回的文本
                    clearTimeout(timer);   //成功失败都要关定时器
                    json.complete&&json.complete();
                    json.success&&json.success(oAjax.responseText);    //若是成功,服务器返回的文本内容    
            }else{
                    clearTimeout(timer);
                    json.complete&&json.complete();
                    json.error&&json.error(oAjax.status);//若是错误,服务器返回的错误码
            }
        }
    };
    
}