《HTML教程》_9.3-9.4教学材料.pptxVIP

本实例从服务器请求一幅图片，并显示在网页中，以此说明Ajax的请求处理过程。需要说明的是，接收和发送二进制数据是XMLHttpRequestLevel2新增的功能，除了设置的请求类型和数据解析方式不同外，基本过程与其他数据——文本、XML和JSON——是一致的。

9.3.1创建XMLHttpRequest请求对象要发送Ajax请求，首先要创建异步请求对象。这里我们采取先直接以new关键字创建XMLHttpRequest对象;如果创建不成功，则再以ActiveX插件的形式创建该异步请求对象。代码如下：

varxhr=null;try{ xhr=newXMLHttpRequest(); }catch(e){ xhr=newActiveXObject(Microsoft.HTTP);}这种通过try…catch创建对象的方式，不需要进行任何条件判断，执行效率较高。

9.3.2建立连接创建异步请求对象以后，就可以建立与服务器的连接了。注意：此时只是建立了与服务器的连接，但并没有发起任何请求。异步请求对象通过open方法建立与服务器的连接。open方法的原型及用法前面已经介绍（见9.2.2节），这里再做几点说明：

（1）请求方式HTTP请求方式有8种，每种请求可以实现的功能不同。但如果要服务器响应某种请求的话，则需要服务器端对这种方式进行响应。也就是说，服务器必须实现了对这种请求方式的处理，当然不同的服务器实现方式不同。

请求方式最为常用的就是GET和POST，为了便于大家的理解，也简单的把其他方式[28]列举如下，仅供参考。◆GET——请求指定的页面信息，并返回实体主体。◆HEAD——类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头

◆POST——向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。◆PUT——从客户端向服务器传送的数据取代指定的文档的内容。◆DELETE——请求服务器删除指定的页面。

◆CONNECT ——HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。◆OPTIONS——允许客户端查看服务器的性能。◆TRACE——回显服务器收到的请求，主要用于测试或诊断。

针对以上请求方式需要特别注意的是，如果Ajax发送了某种请求，而服务器没有实现对这种请求的处理，或者服务器不能识别这种请求方式，则会返回相应的状态码以告知客户，如405（不允许执行该方法），501（服务器不识别或者没有实现此方法）等。

常用的GET和POST方式的主要区别：◆GET方式主要用于向服务器请求数据，POST请求主要用于向服务器提交数据。◆GET以参数字符串的方式向服务器提交数据，参数字符串拼接在请求的URL地址之后，可以显示在浏览器的地址栏中，不安全。而POST请求则将请求参数（或请求数据）封装在HTTP请求体中，不在地址栏中显示，所以比较安全。

◆GET发送的数据长度有限制，一般不超过1K，而POST请求发送的请求则可达2M。◆发送POST请求之前，必须使用setRequestHeader()方法将Content-Type设置为application/x-www-form-urlencoded，而GET请求则不需要。

这里我们要从服务器请求一幅图片，并不向服务器发送任何数据，所以可以采用GET请求方式。我们要请求的URL地址是loadImage.jsp，也就是说服务器端有一个loadImage.jsp文件，它来响应这一请求，并把服务器上的图片内容读取出来发回到客户端。这里采用异步请求方式。

（2）同步和异步所谓异步就是请求者和被请求者可以同时进行各自的工作，这种请求的方式就称为异步。举个例子，假如老师上课时忘了带教本，然后就让班长去取，之后老师就继续讲课，班长去老师办公室取教本，这样的方式就是异步（老师讲课与班长取教本互不干涉，各自独立进行）的。

假如老师没有教本就上不了课，非要等班长取回教本才能继续上课的话，那就称之为“同步”了。异步请求可以增强客户体验，因为在发起请求之后，客户端继续处理需要处理的事件，而没有必要等待服务器的响应。

这里用异步方式请求加载服务器端的图片，好处就是发送请求之后，该干嘛干嘛，喝喝茶或咖啡，图片就显示出来了！经过上面的分析，得到如下的open方法：xhr.open(GET,loadImage.jsp,true);

（3）设置请求的类型通过open方法建立与服务器的连接之后，需要设置请求的类型，也就是说明客户端（或者XMLHttpRequest对象）希望接收的数据类型，这可以通过对responseType属性进行赋值