zoukankan      html  css  js  c++  java
  • ajax 底层源码解析

    对象: XMLHttpRequest

    属性:
    readyState
    请求状态,开始请求时值为0直到请求完成这个值增长到4


    responseText
    目前为止接收到的响应体,readyState<3此属性为空字符串,=3为当前响应体,=4则为完整响应体


    responseXML
    服务器端相应,解析为xml并作为Document对象返回


    status
    服务器端返回的状态码,=200成功,=404表示“Not Found”


    statusText
    用名称表示的服务器端返回状态,对于“OK”为200,“Not Found”为400


    方法:
     
    setRequestHeader()
    向一个打开但是未发生的请求设置头信息


    open()
    初始化请求参数但是不发送


    send()
    发送Http请求


    abort()
    取消当前相应


    getAllResponseHeaders()
    把http相应头作为未解析的字符串返回


    getResponseHeader()
    返回http相应头的值

    事件句柄: 

    onreadystatechange
    每次readyState改变时调用该事件句柄,但是当readyState=3有可能调用多次

     ajax.js:

    // JavaScript Document
    var ajax={
    	post:function(url,data,func){//导入3个参数
    		//创建ajax对象
    		var xhr=null;
    		if(window.ActiveXObject){//处理兼容问题
    			xhr = new ActiveXObject("Msxml2.XMLHTTP")||new ActiveXObject("Microsoft.XMLHTTP");
    		}else{
    			xhr = new XMLHttpRequest();
    		}
    		//建立连接
    		xhr.open("post",url,true);//method  url true=异步
    		//发送请求
    		xhr.setRequsetHeader("Content-Type","application/x-www-form-urlencoded");
    		xhr.send(data);
    		//获取响应
    		xhr.onreadystatechange = function(){//判断 需满足两个条件
    			if(xhr.readyState==4){
    				if(xhr.status==200){
    					var str = xhr.responseText;//str 为json数据
    					if(typeof func=="function"){//判断func是否为函数,为函数时调用
    						func(str);//回调函数
    					}
    				}
    			}
    		}
    	},//","必须添加
    	
    	get:function(url,func){//导入两个参数
    		//创建ajax对象
    		var xhr = null;
    		if(window.ActiveXObject){
    			xhr = new ActiveXObject("Msxml2.XMLHTTP")||new ActiveXObject("Microsoft.XMLHTTP");
    		}else{
    			xhr = new XMLHttpRequest();
    		}
    		//建立连接
    		xhr.open("get",url,true);
    		//发送请求
    		xhr.send();
    		//获取响应
    		xhr.onreadystatechange = function(){
    			if(xhr.readyState==4&&xhr.status==200){
    				var str = xhr.responseText;
    				if(typeof func == "function"){
    					func(str);
    				}
    			}
    		}
    	}
    }
    

     分步解析(封装):

    //与服务器通信
    function talktoServer(url) {
      var req = newXMLHTTPRequst();
      var callbackHandler = getReadyStateHandler(req);
      req.onreadystatechange = callbackHandler;
      req.open("POST", url, true);
      req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      var testmsg = document.getElementById("testmsg");
      var msg_value = testmsg.value;
      req.send("msg="+msg_value);
    }
    //创建XMLHTTP对象
    function newXMLHTTPRequst() {
      var xmlreq = false;
      if (window.XMLHttpRequest) {
        xmlreq = new XMLHttpRequest();
      } else if (window.ActiveXobject) {
        try{
          xmlreq=new ActiveXObject("Msxm12.XMLHTTP");
        } catch (e1) {
          try {
            xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e2) {
            //
          }
        }
      }
      return xmlreq;
    }
    //服务器回调函数
    function getReadyStateHandler(req) {
      return function() {
        if (req.readyState == 4) {
          if (req.status == 200) {
            var msg_display = document.getElementById("msg_display");
            msg_display.innerHTML = req.responseText;
          } else {
            var hellomsg = document.getElementById("hellomsg");
            hellomsg.innerHTML = "ERROR" + req.status;
          }
        }
      }
    }

    从代码我们看出:首先我们创建一个 XMLHttpRequest 对象(由于浏览器不同需要 相应判断处理),设置相应的请求信息(通过open来做,例如请求地址等 设置 );然后我们绑定 onreadystatechange 事件,在这个事件中我们根 据服务器返回状态的不同来做出不同处理,这其中主要是请求成功后接收相应的返回值来通过 javascript 对客户端做出相应操作(我 们只是使显示有关信息);最后我们发送这个请 求(通过send方法)。 

    XMLHttpRequest.readyState有五种可能的值:
    0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法。
    1 (载入):已经调用open() 方法,但尚未发送请求。
    2 (载入完成): 请求已经发送完成。
    3 (交互):可以接收到部分响应数据。
    4 (完成):已经接收到了全部数据,并且连接已经关闭。
    

    //

    XMLHttpRequest.status 的所有可能值:
    
    1xx - 信息提示
    这些状态代码表示临时的响应。客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应。
    
       ·0 - 本地响应成功。
    
     · 100 - Continue 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1新) 
     · 101 - Switching Protocols 服务器将遵从客户的请求转换到另外一种协议(HTTP 1.1新) 
    
    2xx - 成功
    
    这类状态代码表明服务器成功地接受了客户端请求。
     · 200 - OK 一切正常,对GET和POST请求的应答文档跟在后面。 
     · 201 - Created 服务器已经创建了文档,Location头给出了它的URL。 
     · 202 - Accepted 已经接受请求,但处理尚未完成。 
     · 203 - Non-Authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝,非权威性信息(HTTP 1.1新)。
     · 204 - No Content 没有新文档,浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。 
     · 205 - Reset Content 没有新的内容,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容(HTTP 1.1新)。 
     · 206 - Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它(HTTP 1.1新)。 
    
    3xx - 重定向
    
     · 300 - Multiple Choices 客户请求的文档可以在多个位置找到,这些位置已经在返回的文档内列出。如果服务器要提出优先选择,则应该在Location应答头指明。 
     · 301 - Moved Permanently 客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL。 
     · 302 - Found 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。注意,在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时,浏览器能够自动访问新的URL,因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如,如果浏览器错误地请求 http://host/~user (缺少了后面的斜杠),有的服务器返回301,有的则返回302。严格地说,我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。 
     · 303 - See Other 类似于301/302,不同之处在于,如果原来的请求是POST,Location头指定的重定向目标文档应该通过GET提取(HTTP 1.1新)。 
     · 304 - Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
     · 305 - Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取(HTTP 1.1新)。 
     · 307 - Temporary Redirect 和302(Found)相同。许多浏览器会错误地响应302应答进行重定向,即使原来的请求是POST,即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因,HTTP 1.1新增了307,以便更加清除地区分几个状态代码:当出现303应答时,浏览器可以跟随重定向的GET和POST请求;如果是307应答,则浏览器只能跟随对GET请求的重定向。(HTTP 1.1新) 
    
    4xx - 客户端错误
    
    发生错误,客户端似乎有问题。例如,客户端请求不存在的页面,客户端未提供有效的身份验证信息。
     · 400 - Bad Request 请求出现语法错误。 
     · 401 - Unauthorized 访问被拒绝,客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头,浏览器据此显示用户名字/密码对话框,然后在填写合适的Authorization头后再次发出请求。IIS 定义了许多不同的 401 错误,它们指明更为具体的错误原因。这些具体的错误代码在浏览器中显示,但不在 IIS 日志中显示:
     · 401.1 - 登录失败。
     · 401.2 - 服务器配置导致登录失败。
     · 401.3 - 由于 ACL 对资源的限制而未获得授权。
     · 401.4 - 筛选器授权失败。
     · 401.5 - ISAPI/CGI 应用程序授权失败。
     · 401.7 – 访问被 Web 服务器上的 URL 授权策略拒绝。这个错误代码为 IIS 6.0 所专用。
     · 403 - Forbidden 资源不可用。服务器理解客户的请求,但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。禁止访问:IIS 定义了许多不同的 403 错误,它们指明更为具体的错误原因:
     · 403.1 - 执行访问被禁止。
     · 403.2 - 读访问被禁止。
     · 403.3 - 写访问被禁止。
     · 403.4 - 要求 SSL。
     · 403.5 - 要求 SSL 128。
     · 403.6 - IP 地址被拒绝。
     · 403.7 - 要求客户端证书。
     · 403.8 - 站点访问被拒绝。
     · 403.9 - 用户数过多。
     · 403.10 - 配置无效。
     · 403.11 - 密码更改。
     · 403.12 - 拒绝访问映射表。
     · 403.13 - 客户端证书被吊销。
     · 403.14 - 拒绝目录列表。
     · 403.15 - 超出客户端访问许可。
     · 403.16 - 客户端证书不受信任或无效。
     · 403.17 - 客户端证书已过期或尚未生效。
     · 403.18 - 在当前的应用程序池中不能执行所请求的 URL。这个错误代码为 IIS 6.0 所专用。
     · 403.19 - 不能为这个应用程序池中的客户端执行 CGI。这个错误代码为 IIS 6.0 所专用。
     · 403.20 - Passport 登录失败。这个错误代码为 IIS 6.0 所专用。
     · 404 - Not Found 无法找到指定位置的资源。这也是一个常用的应答。 
     · 404.0 -(无) – 没有找到文件或目录。
     · 404.1 - 无法在所请求的端口上访问 Web 站点。
     · 404.2 - Web 服务扩展锁定策略阻止本请求。
     · 404.3 - MIME 映射策略阻止本请求。
    
     · 405 - Method Not Allowed 请求方法(GET、POST、HEAD、DELETE、PUT、TRACE等)对指定的资源不适用,用来访问本页面的 HTTP 谓词不被允许(方法不被允许)(HTTP 1.1新) 
     · 406 - Not Acceptable 指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定的不兼容,客户端浏览器不接受所请求页面的 MIME 类型(HTTP 1.1新)。 
     · 407 - Proxy Authentication Required 要求进行代理身份验证,类似于401,表示客户必须先经过代理服务器的授权。(HTTP 1.1新) 
     · 408 - Request Timeout 在服务器许可的等待时间内,客户一直没有发出任何请求。客户可以在以后重复同一请求。(HTTP 1.1新)
     · 409 - Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突,因此请求不能成功。(HTTP 1.1新) 
     · 410 - Gone 所请求的文档已经不再可用,而且服务器不知道应该重定向到哪一个地址。它和404的不同在于,返回407表示文档永久地离开了指定的位置,而404表示由于未知的原因文档不可用。(HTTP 1.1新) 
     · 411 - Length Required 服务器不能处理请求,除非客户发送一个Content-Length头。(HTTP 1.1新) 
     · 412 - Precondition Failed 请求头中指定的一些前提条件失败(HTTP 1.1新)。
     · 413 – Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求,则应该提供一个Retry-After头(HTTP 1.1新)。 
     · 414 - Request URI Too Long URI太长(HTTP 1.1新)。 
     · 415 – 不支持的媒体类型。
     · 416 – Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。(HTTP 1.1新) 
     · 417 – 执行失败。
     · 423 – 锁定的错误。
    
    5xx - 服务器错误
    
    服务器由于遇到错误而不能完成该请求。
     · 500 - Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求。 
     · 500.12 - 应用程序正忙于在 Web 服务器上重新启动。
     · 500.13 - Web 服务器太忙。
     · 500.15 - 不允许直接请求 Global.asa。
     · 500.16 – UNC 授权凭据不正确。这个错误代码为 IIS 6.0 所专用。
     · 500.18 – URL 授权存储不能打开。这个错误代码为 IIS 6.0 所专用。
     · 500.100 - 内部 ASP 错误。
     · 501 - Not Implemented 服务器不支持实现请求所需要的功能,页眉值指定了未实现的配置。例如,客户发出了一个服务器不支持的PUT请求。
     · 502 - Bad Gateway 服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答。 亦说Web 服务器用作网关或代理服务器时收到了无效响应。
     · 502.1 - CGI 应用程序超时。
     · 502.2 - CGI 应用程序出错。
     · 503 - Service Unavailable 服务不可用,服务器由于维护或者负载过重未能应答。例如,Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。这个错误代码为 IIS 6.0 所专用。
     · 504 - Gateway Timeout 网关超时,由作为代理或网关的服务器使用,表示不能及时地从远程服务器获得应答。(HTTP 1.1新) 。
     · 505 - HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。
    

    .

  • 相关阅读:
    SystemV和BSD的区别
    Linux init 系列一 System V风格
    ps -ef和ps aux的区别
    Linux中/etc/resolv.conf文件简析
    Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stoc
    在Linux中利用Service命令添加系统服务及开机自启动
    实例具体解释Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化(二)
    关于程序性能优化基础的一些个人总结
    C++开发人脸性别识别总结
    double型转换成string型
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7015701.html
Copyright © 2011-2022 走看看