【jQuery学习笔记----AJAX之javascript角度】

AJAX----javascript角度

Ajax应用的核心是XMLHTTPRepuest对象，它是实现异步通信技术的关键。该对象最早是在IE5.0版本浏览器的ActiveX组件中被引入的，之后其他主流浏览器也内置了XMLHTTPRequest对象，虽然各大浏览器实现的方式不同，但是它们都保留了相同的属性、方法和用法。在系统深入学习之前，

JQuery实现

我们先看一个简单的jQuery实例

$(function(){

    $(“input”).click(function(){

          $.get(“test.asp”,function(data){

                   alert(“来自服务器的问候”+data);

           });

     })

})

在这个示例中，jQuery的公共方法get()能够以异步方式向服务器发出一个简单的请求，然后把服务器端的响应信息存储在get()方法的回调函数参数中，从而完成一次异步通信的过程。

get()访求可以包含四个参数，第一个参数表示请求的服务器端地址，第二个参数及其后面所有参数都是可选参数，第二个参数可是请求的信息，第三个参数表示回调函数，第四个参数表示响应信息的类型。

 

javascript实现

若要直接使用javascript实现异步通信，则应该先定义XMLHTTPRequest对象，由于不同浏览器定义XMLHTTPRequest的试不同，因此必须考虑浏览器兼容问题。定义如下：

    if(window.XMLHttpRequest){

        var xhr = new XMLHttpRequest();

    }else if(window.ActiveXObject){

        try{

            var xhr = newActiveXObject("Msxml2.XMLHTTP");

        }catch (e){

            try{

                var xhr = newActiveXObject("Microsoft.XMLHTTP");

            }catch (e){

 

            }

        }

    }

 

var input =document.getElementsByTagName(“input”)[0];

input.onclick =function(){

         xhr.open(“GET”,”test.asp”,fasle); //建立异步连接

        xhr.send(null); //发送请求

        …省略

}

 

XMLHttpRequest对象成员和用法

XMLHttpRequest对象共包含8个基本属性和6个基本方法，这些属性和方法负责完成异步通信的全部工作

onreadystatechange	指定当readyState属性改变时的事件处理句柄
readyState	返回当前请求状态
status	返回当前请求的http状态码
statusText	返回当前请求的响应状态
responseBody	返回正文信息
responseStream	以文本流的形式返回响应信息
responseText	以字符串的形式返回响应信息
responseXML	以XML数据的形式返回响应信息
方法
open	创建一个新的http请求，并指定此请求的方法、url，以及验证信息（用户名/密码）
send	发送请求到http服务器并接收回应
getAllResponseHeaders()	获取响应的所有http头信息
getResponseHeader()	从响应信息中获取指定的http头信息
setRequestHeader	单独指定请求的某个http头信息
abort()	取消当前请求

 

使用XMLHttpRequest对象实现异步通信一般需要下面几个步骤：

1.   定义XMLHttpRequest对象实例

2.   调用opne()方法建立连接

3.   注册onreadystatechange事件处理函数，以便接收和处理从服务器端响应的信息

4.   调用send()方法发送请求。

 

建立异步连接

定义了XMLHttpRequest对象之后，调用open()方法可能建立异步连接。

xhr.open(method,url,async,user,password);

五个参数：

其中前两个参数是必须的

mehtod：表示http方法：POST/GET/PUT/PROPFIND

URL:表示请求的地址，可以是绝对地址，也可以是相对地址

async:默认为true，表示异步；取fasle 表示同步

user和password表示请求文件需要服务器进行验证，如果未指定，当服务器需要验证时，会弹出验证窗口要求进行验证。

 

发送请求

当建立连接之后，就可以使用send()方法发送请求到http服务器端，并接收服务器的响应。send()方法只有一个参数，该参数可以传递客户端发送给服务器端的请求数据。如果不传递信息，则可以设置参数值为null。send()方法虽然能够接收服务器端的响应，但是要把接收的数据读取出来，还需用到responseBody、responseStream、responseText或者responseXML属性。

 

发送GET请求

GET方法就是通过查询字符串的方式来传递请求信息。GET请求的参数通过？前缀附加在url末尾，参数是以连字“&“连接一个或多个名值对。每个名称必须在编码后才能用在URL中，js使用encodeURIComponent()方法进行编码，服务器端在接收到这些数据时，也必须使用decodeURIComponent()方法进行解码。

当使用XMLHttpRequest对象发送一个GET请求时，只需将包含所有参数的URL传入open()方法，同时设置第一个参数值为“GET”即可。这样服务器就能够自动在URL后面的查询字符串中接收到客户端传递过来的信息。使用GET请求比较简单，也非常方便。由于URL最大长度为2048字符（2KB），因此它适合传递一些简单的参数信息，而不易传输大常量或受保护的数据

如：

xhr.open(“GET”,”text1.asp?name=css8&pass=12345&age=1”,false);

发送POST请求

POST请求方式与GET请求方式截然不同。POST请求支持发送任意格式、任意长度的数据，而不仅仅限于”名/值”对字符串。对于传递二进制的文件、大容量信息、安全信息或XML格式数据时，使用POST方式比较高效。

一般，POST请求用户于表单中输入数据后的提交过程。与GET请求相似，POST请求的参数也必须进行编码，并用连字符&进行分隔，这些参数在发送POST请求时，不会被附加到URL的末尾，而是作为send()方法的参数进行传递，然后被送到服务器端。

如上例中的GET请求：

send(“name=css8&pass=12345&age=1”);

在open()方法中设置一个参数为POST，表明当前请求连接的是POST。

调用setRequestHeader()方法，设置请求的消息头，指定请求内容类型为”application/x-www.urlencoded”。

为了方便服务器能够识别当前请求为ajax异步请求，一般设置头部信息中的User-Agent首部为XMLHTTP，以便于服务器端能够辨别出XMLHttpRequest异步请求和其他客户端的普通请求。

application/x-www.form-urlencoded是通常格式

text/xml或application/xml类型给服务器直接发送xml数据，甚至以application/json类型发送javascript对象数据

跟踪响应状态

readyState属性

0	未初始化。表示对象已经建立，但是尚未初始化，尚未调用open()方法
1	初始化。表示对象已经建立，尚未调用send()方法
2	发送数据，表示send()方法已经调用，但是当前的状态及http头未知
3	数据传送中。表示已经接收部分数据，因为响应及http头不全，这时通过resposneBody和responseText获取部分数据会出现错误
4	完成。表示数据接收完毕，此时可以通过responseBody和responseText获取完整的响应数据

 

一旦请求和响应的状态发生变化，也就是说当readyState属性值发生变化时，就会触发onreadystatechange事件处理函数。readystatechagne是一种特殊的事件类型，它与http传输紧密相关。每当HTTP请求状态改变时，服务器都会回调客户端的onreadystatechange事件处理函数。

虽然通过readyState属性可以确定响应是否完成，但是还存在另一个问题：如果服务器完成响应请求，但是报告了一个错误，此时如果读取响应信息，也容易发生错误。为了防止此类意外，应坚持http通信状态。只有当状态码为200时，才表示服务器正确完成了响应处理。XMLHttpRequest对象可以借助status属性获取当前的HTTP状态码。

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中对应的状态信息是“MovedTemporatily”。出现该状态代码时，浏览器能够自动访问新的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 谓词不被允许（方法不被允许）（HTTP1.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 TooLarge 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。

　· 414 - Request URI Too Long URI太长（HTTP 1.1新）。

　· 415 – 不支持的媒体类型。

　· 416 – Requested Range NotSatisfiable 服务器不能满足客户在请求中指定的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版本。

 

获取响应信息

属性	说明
responseBody	将响应信息正文以Unsigned Byte数组形式返回
responseStream	以ADO Stream对象的形式返回响应信息
responseText	将响应信息作为字符串返回
responseXML	将响应信息格式化为XML文档格式返回。

 

响应数据一般为文本格式或XML格式，对于二进制数据流可以使用responseStream属性存取。获取响应信息之后，还需要使用javascript脚本把它们转换为需要的形式进行显示。