zoukankan      html  css  js  c++  java
  • 原生ajax

    从页面向服务器发送请求,当然少不了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版本。 

  • 相关阅读:
    PAT——1007. 素数对猜想
    PAT——1006. 换个格式输出整数
    PAT——1005. 继续(3n+1)猜想 (25)
    PAT——1003. 我要通过!
    PAT——1002. 写出这个数
    PAT——1001. 害死人不偿命的(3n+1)猜想
    PAT——年会抽奖(错位 排序 )
    PAT——年会抽奖(错位 排序)
    PAT——不吉利的日期(java中date和Calendar使用)
    MapReduce的输入格式
  • 原文地址:https://www.cnblogs.com/SofuBlue/p/8027594.html
Copyright © 2011-2022 走看看