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);//如果错误,服务器返回的错误码
            }
        }
    };
    
}    

 

 

 

转载于:https://www.cnblogs.com/yang0901/p/6766987.html