Ajax 简介(一)

前端之家收集整理的这篇文章主要介绍了Ajax 简介(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

很早就听说过 Ajax 异步刷新的大名,在未学 Ajax 之前,一直以为异步刷新是一项很复杂的技术,今天看了看,发现 Ajax 只是 web 开发中一项很小的技术,也很简单,今天就简单介绍一下 Ajax。

1.0 什么是 Ajax ?

  • Ajax是一种用于创建快速动态网页的技术

2.0 为什么要用 Ajax ?

  • 传统的网页技术,如果更需要新网页内容的话,那么必须重载整个页面,即便我们只想请求页面中很小一部分数据,也必须重载整个网页才能完成,这就造成了网络资源的浪费。
  • Ajax 通过核心对象 XMLHttpRequest 在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,这就提高了网页的响应速度。

3.0 Ajax 的核心对象 XMLHttpRequest :

(1) 创建 XMLHttpRequest 对象

  • IE7+、Firefox、Chrome 浏览器: new XMLHttpRequest();
  • IE5 和 IE6 等老版本浏览器: new ActiveXObject(“Microsoft.XMLHTTP”);

(2) XMLHttpRequest 属性

  • responseText: 获得字符串形式的响应数据。
  • responseXML: 获得 XML 形式的响应数据。
  • status: 由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
  • statusText: 跟 status 属性一样,它只是用“OK”代替了200,用“Not Found”代替了404
  • readyState: HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪

(3) XMLHttpRequest 方法

  • abort(): 取消当前响应,关闭连接并且结束任何未决的网络活动。
  • open(): 初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。
  • send(): 发送 HTTP 请求。
  • getResponseHeader(): 返回指定的 HTTP 响应头部的值。
  • getAllResponseHeaders(): 把 HTTP 响应头部作为未解析的字符串返回。
  • setRequestHeader(): 向一个打开但未发送的请求设置或添加一个 HTTP 请求。

(4)XMLHttpRequest 事件句柄

  • 每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时,它也可能调用多次。

4.0 XmlHttpRequest 对象的局限性

  • XmlHttpRequest 不支持跨域访问,这是由网景公司 (netscape) 在开发浏览器时定义的同源策略导致的。

猜你在找的Ajax相关文章