亲宝软件园·资讯

展开

原生JavaScript下的Ajax

coderHe 人气:3
  • 概述

  AJAX即asynchronous javascript and XML,中文翻译是异步的javascript和XML。是指一种创建交互式网页应用、用于创建快速动态网页的开发技术。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

  而AJAX通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

   

    ajax包括以下几步骤:

    1、创建AJAX对象

    2、发出HTTP请求

    3、接收服务器传回的数据

    4、更新网页数据

 

  概括起来,就是一句话,ajax通过原生的XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后,再进行处理.

  尽管名称如此,XMLHttpRequest 也可以用于获取任何类型的数据,而不仅仅是XML,它甚至支持HTTP以外的协议(包括 file:// 和 FTP)。

XMLHttpRequest对象创建和使用

  • 创建

  XMLHttpRequest对象是AJAX的核心技术,这是由微软首先引入的一个特性。

    IE5是第一款引入XHR对象的浏览器。

    在IE5中,XHR对象是通过MSXML库中的一个ActiveX对象实现的,而IE7+及其他标准浏览器都支持原生的XHR对象

      

1 var xhr;
2 if(window.XMLHttpRequest){
3     xhr = new XMLHttpRequest();
4 }else{
5     xhr = new ActiveXObject('Microsoft.XMLHTTP');
6 }

   

  • 初始化请求

 

  创建好之后使用open方法初始化一个请求

1     open(method: string, url: string): void;
2     open(method: string, url: string, async: boolean, username?: string | null, password?: string | null): void;

  参数

  method
  要使用的HTTP方法,比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
  url
  该URL相对于执行代码的当前页面,且只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误
  async 可选
  一个可选的布尔参数,默认为true,表示要不要异步执行操作。如果值为falsesend()方法直到收到答复前不会返回。如果true,已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true,否则将引发异常。
  user 可选
  可选的用户名用于认证用途;默认为null
  password 可选
  可选的密码用于认证用途,默认为null
  • 发送请求

  发送请求使用的是send方法

 send(body?: Document | BodyInit | null): void;

 

  如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回

  1.GET方法,send()方法无参数,或参数为null;

  2.POST方法,send()方法的参数为要发送的数据( Blob | BufferSource | FormData | URLSearchParams | ReadableStream<Uint8Array> | string)一般为FormData.

  注:没有设置头部信息的话,会默认发送带有 "* / *" 的Accept 头部。

 

  • 接收响应

  上边几个步骤设置完以后就可以接收服务器响应回来的数据

  一个完整的HTTP响应由状态码、响应头集合和响应主体组成。在收到响应后,这些都可以通过XHR对象的属性和方法使用

  属性有

responseText  作为响应主体被返回的文本(文本形式),如果请求未成功或尚未发送,则返回 null。
responseXML 返回一个 Document,如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的XML DOM文档,如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML,则返回 null。
status 代表请求的响应状态
readyState 代表请求的状态码

  在接收到响应后,第一步是检查status属性,以确定响应已经成功返回。

  一般来说,可以将HTTP状态码为200作为成功的标志。

  此时,responseText属性的内容已经就绪,而且在内容类型正确的情况下,responseXML也可以访问了。

  此外,状态码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;当然,也意味着响应是有效的

  无论内容类型是什么,响应主体的内容都会保存到responseText属性中,而对于非XML数据而言,responseXML属性的值将为null

  

 1   xhr.onreadystatechange = function () {
 2   if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
 3       console.log(xhr.responseText);
 4   }else{
 5       alert('request was unsuccessful:' + xhr.status);
 6   }
 7     if (xhr.readyState === 4) {
 8       if (xhr.status == 200) {
 9        console.log(xhr.responseText);
10       }
11     }
12   }

 

   这里要注意一下超时的问题

  • 超时

  XHR对象的timeout属性等于一个整数,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止。该属性默认等于0,表示没有时间限制

  如果请求超时,将触发ontimeout事件需要在send之后状态码改变之前使用

  xhr.ontimeout = function () {
    console.log('The request timed out.');
  }
  xhr.timeout = 1000;

 

  [注意]IE8-浏览器不支持该属性

 

  • 最后

  AJAX本身并不难,主要的就是有一部分内容涉及到网络方面的知识,所以导致学起来有一定的难度。

  [注意]如果要建立N个不同的请求,就要使用N个不同的XHR对象。当然可以重用已存在的XHR对象,但这会终止之前通过该对象挂起的任何请求

  

  HTTP协议有一个天生的缺陷:通信只能由客户端发起,因此HTTP协议做不到服务器主动向客户端推送信息

  它的这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就必须采用轮询的方式。而轮询的效率低下且非常浪费资源,因为必须不停地连接或者让HTTP连接始终打开。此时,也就出现了WebSocket。 
       之后会写一下WebSocket API的用法 

加载全部内容

相关教程
猜你喜欢
用户评论