Ajax基础 同步请求与异步请求-阿里云开发者社区

开发者社区> 开发与运维> 正文

Ajax基础 同步请求与异步请求

简介: Ajax基础讲义  使用XMLHttpRequest发送异步请求   使用XMLHttpRequest对象发送请求的三个步骤: · 创建XHR对象 · 准备请求数据,发送请求 · 当响应到达后,处理响应     1.如何创建XMLHttpRequest对象:  var xhr;                          if (window.XMLHt

Ajax基础讲义


 使用XMLHttpRequest发送异步请求

 

使用XMLHttpRequest对象发送请求的三个步骤:

· 创建XHR对象

· 准备请求数据,发送请求

· 当响应到达后,处理响应

 

 

1.如何创建XMLHttpRequest对象:

 var xhr;                        
 if (window.XMLHttpRequest{  
    xhr = new XMLHttpRequest();  
 } else {                        
 xhr = new ActiveXObject("Microsoft.XMLHTTP");//对于其它IE版本请参看Demo代码
 } else {
   alert("cannot use Ajax");
 }

创建该对象写出这么多代码的原因,就是在不同的浏览器下对该对象的实现方式不同。所以为了要适应多种浏览器的要求,通过如上代码来创建XHR对象。

微软的JS中,并没有内置的XHR对象,而是通过ActiveX控件实现的,所以的IE浏览器下创建XHR对象必须通过ActiveX方式实现。而其它浏览器中的JS库中有内置的JS XHR对象,所以可以直接创建出来。

2.发送请求

在发送请求前,我们需要创建如下的信息:

l 需要请求的URL地址(通过URL地址可以定位到服务器端的一个具体资源)

l 请求的类型,POST方式还是GET方式

l 传递给服务器端的参数

l 注册响应到达后的JS回调函数的名字

调用时使用的三种函数参数格式:

l open(http_method, url)

l open(http_method, url, asynchronous)

l open(http_method, url, asynchronous, userid, password)

 

说明:

第一个参数说明请求的方式,GET或者POST

第二个参数请求的服务器端资源的URL地址

第三个参数,采用异步方式还是同步方式发送请求(说明异步请求和同步请求的区别)

第四个参数,如果服务器端采用了HTTP身份认证方式,那么需要给出认证的用户名和密码

 

例如:

xhr.open('GET', 'servlets/ajax/getItem?id=321', true);

设置回调函数的名字:

xhr.onreadystatechange = parseResponse;

如果采用POST方式,那么提交给服务器的数据需要调用send方法来发送数据;如果是GET方式那么send方法给空字符串参数即可

xhr.send('id=321');


3.处理响应 

将请求发送给服务器端后,服务器端的对应程序就会被执行;并将执行后结果返回给客户端,通过注册的处理响应的JS函数来处理响应数据。

在你处理响应的JS函数中,需要判断响应的状态。通过readyState来判断,readyState的状态说明见附表。

在处理响应的方法中:

xhr.onreadystatechange = function(){

  var ready = xhr.readyState;

  if (ready == 4){

    parseCompletedResponse(xhr);

  }

}; 

在status中含有响应的状态码,通过响应的状态码可以获得响应的状态。如200表示响应正常、404表示资源未找到、500表示服务器端程序有错误

xhr.onreadystatechange = function(){

  var ready = xhr.readyState;

  if (ready == 4) {

    var status = xhr.status;

    if (status >= 200 && status < 300) {

      parseCompletedResponse(xhr);

    } else {

      parseErroredResponse(xhr);

    }

  }

};




 

响应提供了两个对象:responseText和responseXML分别用来获取不同文本格式的响应和XML格式的响应。

其它的一些响应中的方法:

abort():放弃请求。即使请求已经被发送,服务器端已经产生响应,也会忽略响应的结果,而且结束处理。

setRequestHeader(header,value):设置请求的头部信息。例如:

xhr.setRequestHeader(

  'Content-type', 

  'application/x-www-form-urlencoded'

);

客户端发送XML格式数据到服务器端的时候,需要对文档的编码进行设置。

xhr.setRequestHeader(

  'Content-type', 

  'application/xml; charset=UTF-8'

);

xhr.send("<data source='ajax in practice'>hello world</data>");

getResponseHeader(header)和getAllResponseHeaders()方法:用来获取响应的头部信息。getAllResponseHeaders将取回所有响应的头部的名字。getResponseHeader方法将根据头部的key值取出value值。

if (xhr.getResponseHeader("Server")

  .indexOf("Microsoft-IIS") != -1 ) {

    alert("The server is a Microsoft IIS server.");

}

 

状态

描述

0

Uninitialized

open()函数没有被调用

1

Loading

open()函数正在被调用

2

Loaded

send()函数被调用

3

Interactive

服务器端正在返回结果

4

Complete

请求结束,并且服务器端已经结束发送数据到客户端

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章