zoukankan      html  css  js  c++  java
  • 原生js发送ajax请求

            堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了。2016年已过半,不能再这么晃荡下去了。

            参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰。但是无论如何,不管结果怎样,一定要完成这次任务——毕竟是花了银子的,不能浪费。所以准备写一个系列博客,把开发过程中遇到的各种小问题记录下来,也算是从头到尾做一个开发备案吧。通读了开发要求,大致做了一下分解,打算拆分成一个个的小模块,逐个击破。今天是准备阶段,想先试着调一下接口,看看能否调的通。

            言归正传。从页面向服务器发送请求,当然少不了ajax方法。此处我们不再从头到尾扯历史、扯概念,直接上手,一切向生产力看齐。通常发送ajax请求,都会使用jQuery方法,但是大作业里不允许使用任何js框架,所以此处使用原生js发送请求。

            归纳起来步骤如下:

            1. 建立XMLHttpRequest对象

            此处要注意有兼容性问题(对IE7及以下浏览器写法有不同),实现代码如下:

    1 <script>
    2     var xmlHttp;
    3     if(window.XMLHttpRequest){
    4         xmlHttp = new XMLHttpRequest();
    5     }else{//对IE7及以下版本浏览器做兼容
    6         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    7     }
    8 </script>

            2. 建立连接,发送请求及参数

           此处用到ajax的一些方法。其实主要是request.open()方法。请求分为"GET"与"POST"两种形式。"GET"用来获取服务器返回的一些参数,而"POST"方法则允许用户修改服务器上的一些数据。

            

    <script>
          /*
           *open方法解释
           *建立请求  共三个参数
           *第一个参数:使用的方法,GET  or  POST
           *第二个参数:url地址
           *第三个参数:同步方式  or  异步方式,一般置为true,为异步;默认也为异步调用
           */
          request.open("GET","http://study.163.com /webDev/dhuai",true);
          /*
           *send方法解释
           *发送参数,一般针对于POST方法。使用GET方法时,此参数传null或不传值
           */
         request.send(null);
    </script>

            3. 建立响应信息

            对服务器返回的状态进行判断,若成功,则拿到数据,进行后续的事宜。这里主要是对request.readyState和request.status两个属性进行判断。

            request.readyState:状态码属性,枚举如下:

            0:请求未初始化,open还没有调用

            1:服务器连接已建立,open已调用

            2:请求已接收,即收到头信息了

            3:请求处理中,即接收到响应主体了

            4:请求已完成,且响应已就绪,即响应完成了

            request.status:状态值,比较多,在文章结尾处贴出全部状态值枚举,此处先上代码。

    <script>
     2     request.onreadystatechange = function() {
     3         if (request.readyState==4) {//请求完成
     4             if (request.status==200) { //OK  一切正常
     5                 var data = JSON.parse(request.responseText);//将返回的数据放在data变量中
     6                 if (data.success) { 
     7                     document.getElementById("XXX").innerHTML = data.msg;
     8                 } else {
     9                     document.getElementById("XXX").innerHTML = "出现错误:" + data.msg;
    10                 }
    11             } else {
    12                 alert("发生错误:" + request.status);
    13             }
    14         } 
    15     }
    16 </script>

            至此,一个完整的ajax请求已发送,并对返回信息做了处理。上面用到了JSON.parse方法,意为将字符串解析成json对象,以便在程序中使用。完整的代码如下:

     1 <script>
     2     var xmlHttp;
     3     if(window.XMLHttpRequest){ 
     4         xmlHttp = new XMLHttpRequest();
     5     }else{
     6         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     7     }
     8     request.open("GET", "http://study.163.com/fafhfg",true);
     9     request.send(null);
    10     request.onreadystatechange = function() {
    11         if (request.readyState==4) {
    12             if (request.status==200) { 
    13                 var data = JSON.parse(request.responseText);
    14                 if (data.success) { 
    15                     document.getElementById("XXX").innerHTML = data.msg;
    16                 } else {
    17                     document.getElementById("XXX").innerHTML = "出现错误:" + data.msg;
    18                 }
    19             } else {
    20                 alert("发生错误:" + request.status);
    21             }
    22         } 
    23     }
    24 </script>

            亲测可用,调起了大作业中的第一个接口,并获取到了数据。悲催的是,谷歌上没问题,但是在火狐上发生了跨域拦截。火狐对安全性的要求高,所以有这个限制。尝试了几种方法,并没有解决。不过作业文档中说不考虑跨域问题,所以此处不再深究了。

            附:state状态值

       100 - Continue 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1新)
       101 - Switching Protocols 服务器将遵从客户的请求转换到另外一种协议(HTTP 1.1新) 

       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新)


       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新)

       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 – 锁定的错误。

       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版本。 

  • 相关阅读:
    第二次作业循环语句
    c语言01次作业分支,顺序结构
    PAT 1027. Colors in Mars
    PAT 1026 Table Tennis
    PAT 1035 Password
    PAT 1038. Recover the Smallest Number
    PAT 1028 List Sorting (25)
    PAT 1041 Be Unique (20)
    PAT 1025 PAT Ranking
    1037. Magic Coupon
  • 原文地址:https://www.cnblogs.com/LXJ-CHEER/p/5492921.html
Copyright © 2011-2022 走看看